Thymeleaf是一種Java XML / XHTML / HTML5模板引擎，可以在Web和非Web環境中使用。它更適合在基於MVC的Web應用程式的視圖層提供XHTML / HTML5，但即使在離線環境中，它也可以處理任何XML檔案。它提供了完整的Spring Framework整合。
關於Spring推薦Thymeleaf的這種說法，我在Spring官方文檔並沒有看到具體的說明，只是在和JSP比較的時候，說了JSP和Thymeleaf對比JSP的一些不足，而Thymeleaf只是作為其他模板引擎的一種代表。
作為一款優秀的模板引擎，除了易用性、活躍的社區、健康快速的發展外，還有非常重要的一點就是效能了，那Thymeleaf 3 和 FreeMaker 的效能對比是怎麼樣的，後續文章會陸續更新。
二、Thymeleaf基礎使用Thymeleaf的使用是由兩部分組成的：標籤 + 運算式，標籤是Thymeleaf的文法結構，而運算式就是文法裡的內容實現。
通過標籤 + 運算式，讓資料和模板結合，最終轉換成html代碼，返回給使用者。
Thymeleaf基礎使用分為三部分：
HTML代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><span th:text="${name}"></span></body></html>Java代碼：
@RequestMapping("/")public ModelAndView index() { ModelAndView modelAndView = new ModelAndView("/index"); modelAndView.addObject("name", "老王"); return modelAndView;}最終效果： 老王
使用"th:text"是對內容的原樣輸出，使用“th:utext”可以進行html標籤輸出。
Java代碼：
@RequestMapping("/eat")public ModelAndView eat() { ModelAndView modelAndView = new ModelAndView("/cat"); modelAndView.addObject("data", "<span style='color:red'>老王是吃貨</span>"); return modelAndView;}HTML代碼：
<h4 th:text="'th:text '+${data}"></h4><h4 th:utext="'th:utext '+${data}"></h4>展示效果：
1.3 th:if, th:unless 條件判斷<span th:if="${age > 18}"> 成年</span><span th:unless="${age > 18}"> 未成年</span>th:if為滿足條件的業務處理，th:unless正好相反，是除去的意思。
1.4 th:switch, th:case 多條件判斷<div th:switch="${age}"> <span th:case="18">18歲</span> <span th:case="19">19歲</span> <spa th:case="*">其他</spa></div>注意： 預設選項使用th:case="*" 指定。
HTML代碼：
<div th:each="name,item:${names}"> <span th:text="${item.count}"></span> <span th:text="${name}"></span></div>Java代碼：
@RequestMapping("/")public ModelAndView index() { ArrayList<String> names = new ArrayList<>(); names.add("java"); names.add("golang"); names.add("nodejs"); ModelAndView modelAndView = new ModelAndView("/index"); modelAndView.addObject("names",names); return modelAndView;}訪問效果如下：
其中item為每行的詳細值，key值如下：
footer.html頁面代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><div th:fragment="copyright"> 著作權歸 老王 所有</div><div th:fragment="about"> 關於</div><div th:fragment="links"> CCTV</div></body></html>聲明了兩個程式碼片段，copyright和about。
cat.html頁面代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><div th:replace="footer :: copyright"></div><div th:insert="footer :: about"></div><div th:include="footer :: links"></div></body></html>其中第一個div引用了footer.html 的 copyright 程式碼片段，第二個div引用了 footer.html 的 about 程式碼片段。
雙冒號的理解： 其中使用“::”雙冒號來完成對頁面片段的引用，有點像php裡面的文法，使用雙冒號來表示對類的靜態屬性和方法進行直接引用。
執行效果如：
總結： 可以很清晰的看出th:insert、th:replace、th:include之間的區別，在於是否保留自己的主標籤，th:include 在3.0之後已經不推薦使用了，可以使用th:replace標籤替代。
提高班——fragment代碼傳參使用fragment我們是可以在html代碼中傳參的，比如我們定義了一個top.html其中有一個“歡迎XXX”的提示，而這個人名XXX就是需要動態傳遞的，這樣我們可以最大程度的完成代碼的複用，這個時候就是一個很好的使用情境，我們需要這樣做。
頁面main.html代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><div th:replace="footer :: webcome('老王')"></div></body></html>頁面top.html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><div th:fragment="webcome(about)"> <span th:text="'歡迎：'+${about}"></span></div></body></html>最終的效果：
1.7 th:with 定義局部變數頁面代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><div th:with="sum=4-2"> <span th:text="${sum}"></span></div></body></html>頁面輸出結果：2
1.8 th:remove 刪除標籤th:remove用於html代碼的刪除，th:remove值有五個：
樣本index.html代碼如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><div id="all" th:remove="all"> <span>all</span> <span>1</span></div><div id="body" th:remove="body"> <span>body</span> <span>2</span></div><div id="tag" th:remove="tag"> <span>tag</span> <span>3</span></div><div id="all-but-first" th:remove="all-but-first"> <span>all-but-first</span> <span>4</span></div><div id="none" th:remove="none"> <span>none</span> <span>5</span></div></body></html>最終展示效果如下：
1.9 其他標籤<div th:style="'color:'+${skinColor}"><input type="button" value=" Click " th:onclick="'onsub()'"><a th:href="${myhref}"></a><input th:value="${user.name}" /><img th:src="${img}" /><form th:action="@{/suburl}"><form id="${fromid}"><img th:attr="src=@{/img/stone.jpg},alt=${alt}" /><div th:object="${user}">Variant 運算式：${...}
選擇Variant 運算式：*{...}
訊息運算式：#{...}
連結資料表達式：@{...}
片段表達：~{...}
文字：'one text', 'Another one!',…
數字文字：0, 34, 3.0, 12.3,…
布爾文字：true, false
NULL文字：null
文字標記：one, sometext, main,…
字串拼接：+
字面替換：|The name is ${name}|
二進位運算子：+, -, *, /, %
減號(一元運算子)：-
二進位運算子：and, or
布爾否定(一元運算子)：!, false
比較值：>, <, >=, <=
相等判斷： ==, !=
如果-然後：(if) ? (then)
如果-然後-否則：(if) ? (then) : (else)
違約：(value) ?: (defaultvalue)
所有以上這些運算式都可以組合和嵌套，例如：
2.2 運算式使用執行個體2.2.1 Variant 運算式 ${...}'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
Variant 運算式的使用，我們前面的代碼已經見到了，$是我們平常開發中最常用的運算式，用於把後台Java類的動態資料，映射到頁面，例如：
Java代碼：
public ModelAndView index() { ModelAndView modelAndView = new ModelAndView("/cat"); modelAndView.addObject("data", "我是老王"); return modelAndView;}HTML代碼：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><span th:text="${data}"></span></body></html>最終效果：
2.2.2 選擇運算式 *{...}選擇運算式相當於選擇了一個對象，在使用的時候不在需要這個對象的首碼，直接使用屬性的key進行內容展示，代碼如下：
<div th:object="${goods}"> <span th:text="${goods.name}"></span> <span th:text="*{price}"></span> <span th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span></div>最終效果：
iMac 7999.0 2018-08-10 14:03:51總結： *{price} = ${goods.price}只是省去了“goods.”首碼，效果都是一樣的。
2.2.3 連結資料表達式 @{...}用於轉換url，代碼如下：
<a th:href="@{/footer(id=666,name=laowang)}">連結</a>最終呈現的效果：
<a href="/footer?id=666&name=laowang">連結</a>
連結資料表達式，可以傳遞參數，用逗號分隔。
伺服器根相對路徑：@{~/path/to/something}
2.2.4 文本操作文本操作分為兩個：文本拼加、文本替換
文本拼加：
<span th:text="'我叫'+${name}"></span>文本替換：
文本替換的文法：|內容${tag}|
<span th:text="|我叫${name}，是一名開發工程師。|"></span><p th:text="${val}">...</p><p th:text="${{val}}">...</p>結果：
<p>1234567890</p><p>1,234,567,890</p>雖然標準的標籤幾乎可以滿足所有的業務情境，但某些情況我們更喜歡直接寫入HTML文本，例如：
<p>Hello, [[${name}]]</p>嵌入文本有兩種寫法“[[...]]”和“[(...)]”，分別的作用就像th:text 和 th:utext 一樣，例如：
<p> [[${name}]]</p><p> [(${name})]</p>看到的效果是這樣的：
2.3 運算式對象概述運算式裡面的對象可以協助我們處理要展示的內容，比如運算式的工具類dates可以格式化時間，這些內建類的熟練使用，可以讓我們使用Thymeleaf的效率提高很多。
2.3.1 運算式基本對象#ctx: 操作當前上下文.#vars: 操作上下文變數.#request: (僅適用於Web項目) HttpServletRequest對象.#response: (僅適用於Web項目) HttpServletResponse 對象.#session: (僅適用於Web項目) HttpSession 對象.#servletContext: (僅適用於Web項目) ServletContext 對象.#execInfo: 操作模板的工具類，包含了一些模板資訊，比如：${#execInfo.templateName} .#uris: url處理的工具#conversions: methods for executing the configured conversion service (if any).#dates: 方法來源於 java.util.Date 對象，用於處理時間，比如：格式化.#calendars: 類似於 #dates, 但是來自於 java.util.Calendar 對象.#numbers: 用于格式化數字.#strings: methods for String objects: contains, startsWith, prepending/appending, etc.#objects: 普通的object對象方法.#bools: 判斷bool類型的工具.#arrays: 數組操作工具.#lists: 列表操作資料.#sets: Set操作工具.#maps: Map操作工具.#aggregates: 運算元組或集合的工具.每個類中的具體方法，點擊查看：www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects
3.IDEA設定Thymeleaf自動補全先上：
IDEA預設是開啟了Thymeleaf 外掛程式支援的，如果不放心需要驗證，請訪問：www.jetbrains.com/help/idea/2018.2/thymeleaf.html
但僅僅是配置上面的效果，依然是無法正常使用的，原因是你要在html中聲明 Thymeleaf 命名空間 xmlns:th="http://www.thymeleaf.org" ，完整代碼如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h2 th:text="${hi}"></h2></body></html>其中關鍵的代碼是：
xmlns:th="http://www.thymeleaf.org"
這樣當你在代碼輸入“th:”的時候就會看到 Thymeleaf 的所有標籤了。
三、Spring Boot 整合 Thymeleaf3.1 開發環境在正式整合Thymeleaf引擎之前，先來看下目錄結構
3.2 Spring MVC目錄結構除去包名，我們來解釋一下這些目錄代表的含義：
接下來我們具體分別來看具體的步驟。
3.3.1 pom.xml 添加 Thymeleaf 模板引擎<!--thymeleaf模板--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency># 啟用緩衝:建議生產開啟spring.thymeleaf.cache=false# 建議模版是否存在spring.thymeleaf.check-template-location=true# Content-Type 值spring.thymeleaf.servlet.content-type=text/html# 是否啟用spring.thymeleaf.enabled=true# 模版編碼spring.thymeleaf.encoding=utf-8# 應該從解析中排除的視圖名稱列表（用逗號分隔）spring.thymeleaf.excluded-view-names=# 模版模式spring.thymeleaf.mode=HTML5# 模版存放路徑spring.thymeleaf.prefix=classpath:/templates/# 模版尾碼spring.thymeleaf.suffix=.html| 配置項 | 類型 | 預設值 | 建議值 | 說明 |
|---|---|---|---|---|
| spring.thymeleaf.enabled | bool | true | 預設 | 是否啟用 |
| spring.thymeleaf.mode | String | HTML | 預設 | 模板類型，可以設定為HTML5 |
| spring.thymeleaf.cache | bool | true | 預設 | 是否啟用緩衝，產生環境建議設定為true |
| spring.thymeleaf.prefix | String | classpath:/templates/ | 預設 | 模版存放路徑 |
| spring.thymeleaf.suffix | String | .html | 預設 | 模版尾碼 |
| spring.thymeleaf.servlet.content-type | String | text/html | 預設 | Content-Type 值 |
| spring.thymeleaf.encoding | String | - | utf-8 | 模版編碼 |
我們在controller檔案夾建立index.java，代碼如下：
package com.hello.springboot.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;@Controller@RequestMapping("/")public class Index { @RequestMapping("/") public ModelAndView index() { ModelAndView modelAndView = new ModelAndView("/index"); modelAndView.addObject("name", "王磊的部落格"); return modelAndView; }}關鍵代碼解讀：
我們在resources/templates下建立index.html，代碼如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>王磊的部落格</title></head><body><span th:text="${name}"></span></body></html>啟動調試，在瀏覽器輸入：http://localhost:8080/
效果如下：
相關代碼GitHub：github.com/vipstone/springboot-example.git
四、參考資料thymeleaf官方文檔 Thymeleaf ：www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
thymeleaf官方文檔 Spring + Thymeleaf ：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
