引入 Thymeleaf
修改 html 標籤用於引入 thymeleaf 引擎，這樣纔可以在其他標籤裏使用 th:* 語法，這是下面語法的前提。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
常用標籤
| 語法 | 說明 |
|---|---|
{home.welcome} |
使用國際化文本,國際化傳參直接追加 (value…) |
${user.name} |
使用會話屬性 |
@{} 表達式中使用超鏈接 |
<link rel="stylesheet" type="text/css" media="all"href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> |
| - | - |
${} |
表達式中基本對象 |
| param | 獲取請求參數，比如 ${param.name}, http://localhost:8080?name=jeff |
| session | 獲取 session 的屬性 |
| application | 獲取 application 的屬性 |
| execInfo | 有兩個屬性 templateName 和 now (是 java 的 Calendar 對象) |
th:text |
普通字符串 |
th:utext |
轉義文本 |
th:href |
鏈接 |
th:attr 設置元素屬性 |
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> |
th:with |
定義常量 |
th:attrappend |
追加屬性 |
th:classappend |
追加類樣式 |
th:styleappend |
追加樣式 |
獲取變量值
<p th:text="'Hello！, ' + ${name} + '!'" >name</p>
獲取變量值用 $ 符號，對於javaBean的話使用 變量名.屬性名 方式獲取，這點和 EL 表達式一樣。
$ 表達式只能寫在th標籤內部，不然不會生效。上面例子就是使用 th:text 標籤的值替換 p 標籤裏面的值，至於 p 裏面的原有的值只是爲了給前端開發時做展示用的，這樣的話很好的做到了前後端分離.
引入 URL
Thymeleaf 是通過語法 @{…} 來處理URL 的。
<a th:href="@{http://www.baidu.com}">絕對路徑</a>
<a th:href="@{/}">相對路徑</a>
<a th:href="@{css/bootstrap.min.css}">Content路徑,默認訪問static下的css文件夾</a>
類似的標籤有:th:href 和 th:src
字符串替換
很多時候可能我們只需要對一大段文字中的某一處地方進行替換，可以通過字符串拼接操作完成：
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
簡潔方式：
<span th:text="|Welcome to our application, ${user.name}!|">
當然這種形式限制比較多，|…|中只能包含變量表達式${…}，不能包含其他常量、條件表達式等。
運算符
在表達式中可以使用各類算術運算符，例如+, -, *, /, %
th:with="isEven=(${prodStat.count} % 2 == 0)"
邏輯運算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>時需要用它的HTML轉義符：
th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
條件
if
標籤只有在 th:if 中條件成立時才顯示：
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>
unless
th:unless 於 th:if 恰好相反，只有表達式中的條件不成立，纔會顯示其內容。
<a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a>
switch
Thymeleaf 同樣支持多路選擇 Switch 結構：
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
</div>
默認屬性 default 可以用 \* 表示：
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
th:block
<table>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.login}">...</td>
<td th:text="${user.name}">...</td>
</tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
</th:block>
</table>
推薦下面寫法（編譯前看不見）
<table>
<tr>
<td th:text="${user.login}">...</td>
<td th:text="${user.name}">...</td> </tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
<!--/*/ </th:block> /*/-->
</table>
th:inline
th:inline
th:inline 可以等於 text , javascript(dart) , none
text: [[…]]
<p th:inline="text">Hello, [[#{test}]]</p>
javascript: /[[…]]/
<script th:inline="javascript">
var username = /*[[
#{test}
]]*/;
var name = /*[[
${param.name[0]}+${execInfo.templateName}+'-'+${#dates.createNow()}+'-'+${#locale}
]]*/;
</script>
<script th:inline="javascript">
/*<![CDATA[*/
var username = [[#{test}]];
var name = [[${param.name[0]}+${execInfo.templateName}+'-'+${#dates.createNow()}+'-'+${#locale}]];
/*]]>*/
</script>
adding code: /* [+…+]*/
var x = 23;
/*[+
var msg = 'Hello, ' + [[${session.user.name}]]; +]*/
var f = function() {
removind code: /[- / and /* -]*/
var x = 23;
/*[- */
var msg = 'This is a non-working template'; /* -]*/
var f = function() {
循環
渲染列表數據是一種非常常見的場景，例如現在有 n 條記錄需要渲染成一個表格，該數據集合必須是可以遍歷的，使用 th:each 標籤。
示例一
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
迭代器的狀態：
- index: 當前的索引，從0開始
- count: 當前的索引，從1開始
- size：總數
- current:
- even/odd:
- first
- last
示例二
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
<p>
<a href="../home.html" th:href="@{/}">Return to home</a>
</p>
可以看到，需要在被循環渲染的元素（這裏是）中加入 th:each 標籤，其中 th:each="prod : ${prods}" 意味着對集合變量 prods 進行遍歷，循環變量是 prod 在循環體中可以通過表達式訪問。