spring mvc中添加對Thymeleaf的支持

時間 2019-11-06

標籤 spring mvc 添加 thymeleaf 支持欄目 Spring 简体版

原文原文鏈接

1、下載Thymeleafjavascript

官方下載地址：https://dl.bintray.com/thymeleaf/downloads/thymeleaf/html

我下載的是最新的3.0.11版本java

把包裏的jar包丟到項目中去：spring

dist/thymeleaf-3.0.11.RELEASE.jar
dist/thymeleaf-spring5-3.0.11.RELEASE.jar
lib/attoparser-2.0.5.RELEASE.jar
lib/slf4j-api-1.7.25.jar
lib/unbescape-1.1.6.RELEASE.jar

若是是基於maven的項目，在pom.xml中添加以下內容：api

基於spring5的配置：session

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

基於spring4的配置：mvc

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

2、項目中添加對Thymeleaf的支持app

修改springmvc的配置文件springMVC-servlet.xml，添加以下內容：less

<bean id="templateResolver"
      class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="/WEB-INF/templates/"/>
    <property name="suffix" value=".html"/>
    <property name="characterEncoding" value="UTF-8"/>
    <property name="order" value="1"/>
    <property name="templateMode" value="HTML5"/>
    <property name="cacheable" value="false"/>
</bean>

<bean id="templateEngine"
      class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver"/>
</bean>

<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine"/>
    <property name="characterEncoding" value="UTF-8"/>
</bean>

在項目的/WEB-INF/templates/添加對應的模板文件，這個跟上面配置文件的內容是對應的，要在模板文件html標籤添加xmlns:th屬性：maven

<html lang="cn" xmlns:th="http://www.thymeleaf.org">

3、Eclipse中安裝Thymeleaf的插件

在Eclipse Marketplace中找到Thymeleaf插件，而後直接安裝便可

安裝完之後，代碼提示中就有Thymeleaf標籤的提示了。

4、基礎語法

一、在模板中引用變量：

${x} 用於返回request做用域裏的x值，或者Thymeleaf做用域裏的x值
${param.x} 用於返回頁面請求參數的x值（有可能會有多值）
${session.x} 用於返回session做用域裏的x值
${application.x} 用於返回application做用域裏的x值

二、字符串操做:

字符串拼接: +
文字替換: |The name is ${name}|

示例：

<a th:href="@{'edit?topicid=' + ${topic.topicid }}">編輯<a>

或：

<a th:href="@{|edit?topicid=${topic.topicid }|}">編輯<a>

三、連接表達式

@{...} 用來配合link src href使用的語法，對應的標籤爲 th:link、th:href和th:src

示例：

<a th:href="@{'edit?topicid=' + ${topic.topicid }}">編輯<a> <!-- 輸出結果爲：edit?topicid=1 -->

或：

<a th:href="@{edit(topicid=${topic.topicid })}">編輯<a> <!-- 輸出結果爲：edit?topicid=1 -->

多個參數：

<a th:href="@{edit(topicid=${topic.topicid },index=${index})}">編輯<a> <!-- 輸出結果爲：edit?topicid=1&index=1 -->

四、if判斷

使用th:if表示知足條件，使用th:unless表示不知足條件

示例：

<divth:if="${session.user==null}">
<a href="login">登陸</a> <a href="register">註冊</a>
</div>
<divth:unless="${session.user==null}">
<span th:text="|歡迎您，${session.user.useralias }|"></span>
</div>

五、循環遍歷

使用th:each

示例：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!-- 不存在則忽略，顯示hello null!(能夠經過默認值進行設置)-->
    <p th:text="'Hello ' + (${name}?:'admin')">3333</p>
    <table>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
        </tr>
        <tr th:each="emp : ${empList}">
            <td th:text="${emp.id}">1</td>
            <td th:text="${emp.name}">海</td>
            <td th:text="${emp.age}">18</td>
        </tr>
    </table>
</body>
</html>

使用序列的寫法：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!-- 不存在則忽略，顯示hello null!(能夠經過默認值進行設置)-->
    <p th:text="'Hello ' + (${name}?:'admin')">3333</p>
    <table>
        <tr>
            <th>INDEX</th>
            <th>NAME</th>
            <th>AGE</th>
        </tr>
        <tr th:each="emp,stat : ${empList}">
            <td th:text="${stat.index+1}">1</td>
            <td th:text="${emp.name}">海</td>
            <td th:text="${emp.age}">18</td>
        </tr>
    </table>
</body>
</html>

遍歷指定次數：

<div class="pager" th:each="item:${#numbers.sequence(1,10)}">
    <div th:text="${item}"></div>
</div>

六、在javascript中訪問Model中的變量

使用th:inline標籤，而後把變量包在[[...]]或[()]中，我試了一下,[(...)]比較好用

示例：

<script th:inline="javascript">
function func() {
    var topicid = [(${param.topicid})];
}
</script>

七、聲明局部變量

使用th:with標籤

示例：

        <div class="desc" th:with="no=${stat.index + 1}">
            <div class="info" th:text="|${no}樓|">
            </div>
        </div>

八、格式化輸出日期

使用#dates.format

示例：

<div th:text="${#dates.format(topic.createdate,'yyyy-MM-dd HH:mm')}"></div>

或者：

<div>[[${#dates.format(topic.createdate,'yyyy-MM-dd HH:mm')}]]</div>

九、模板的使用

使用th:fragment聲明模板，使用th:insert、th:replace或th:include引用模板

模板文件footer.html

<footer th:fragment="copy">  
   the content of footer 
</footer>

fragment的引用

th:insert:保留本身的主標籤，保留th:fragment的主標籤。
th:replace:不要本身的主標籤，保留th:fragment的主標籤。
th:include:保留本身的主標籤，不要th:fragment的主標籤。（官方3.0後不推薦）

模板文件名 :: fragment名稱

導入片斷：
<div th:insert="footer :: copy"></div>  
 
<div th:replace="footer :: copy"></div>  
 
<div th:include="footer :: copy"></div>
 
結果爲:
<div>  
    <footer>  
       the content of footer   
    </footer>    
</div>    
 
<footer>  
    the content of footer 
</footer>    
 
<div>  
    the content of footer 
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。