前面介紹了Spring Boot 中的整合Thymeleaf 。不清楚的朋友可以看看之前的文章：https://www.cnblogs.com/zhangweizhong/category/1657780.html。
今天我們主要來看看 Thymeleaf 的常用標簽和用法！其他詳細的內容，大家可以看看Thymeleaf官方使用手冊 。
這個系列課程的完整源碼，也會提供給大家。大家關注我的微信公眾號（架構師精進），回復：springboot源碼 獲取這個系列課程的完整源碼。或者點此鏈接直接下載完整源碼
一、基礎語法
變量表達式 ${}
使用方法：直接使用th:xx = "${}" 獲取對象屬性 。例如：
<form id="userForm"> <input id="id" name="id" th:value="${user.id}"/> <input id="username" name="username" th:value="${user.username}"/> <input id="password" name="password" th:value="${user.password}"/> </form> <div th:text="hello"></div> <div th:text="${user.username}"></div>
選擇變量表達式 *{}
使用方法：首先通過th:object 獲取對象，然后使用th:xx = "*{}"獲取對象屬性。
這種簡寫風格極為清爽，推薦大家在實際項目中使用。 例如：
<form id="userForm" th:object="${user}"> <input id="id" name="id" th:value="*{id}"/> <input id="username" name="username" th:value="*{username}"/> <input id="password" name="password" th:value="*{password}"/> </form>
URL表達式 @{}
使用方法：通過鏈接表達式@{}直接拿到應用路徑，然后拼接靜態資源路徑。例如：
<script th:src="@{/webjars/jquery/jquery.js}"></script> <link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
片段表達式 ~{}
片段表達式是Thymeleaf的特色之一，細粒度可以達到標簽級別，這是JSP無法做到的。
片段表達式擁有三種語法：
~{ viewName } 表示引入完整頁面~{ viewName ::selector} 表示在指定頁面尋找片段 其中selector可為片段名、jquery選擇器等~{ ::selector} 表示在當前頁尋找
使用方法：首先通過th:fragment定制片段 ，然后通過th:replace 填寫片段路徑和片段名。例如：
<!-- /views/common/head.html--> <head th:fragment="static"> <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script> </head> <!-- /views/your.html --> <div th:replace="~{common/head::static}"></div>
在實際使用中，我們往往使用更簡潔的表達，去掉表達式外殼直接填寫片段名。例如：
<!-- your.html --> <div th:replace="common/head::static"></div>
注意：使用替換路徑th:replace 開頭請勿添加斜杠，避免部署運行的時候出現路徑報錯。（因為默認拼接的路徑為spring.thymeleaf.prefix = classpath:/templates/）
消息表達式
即通常的國際化屬性：#{msg} 用於獲取國際化語言翻譯值。例如：
<title th:text="#{user.title}"></title>
其它表達式
在基礎語法中，默認支持字符串連接、數學運算、布爾邏輯和三目運算等。例如：
<input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/>
二、迭代循環
想要遍歷List集合很簡單，配合th:each 即可快速完成迭代。例如遍歷用戶列表：
<div th:each="user:${userList}"> 賬號：<input th:value="${user.username}"/> 密碼：<input th:value="${user.password}"/> </div>
在集合的迭代過程還可以獲取狀態變量，只需在變量后面指定狀態變量名即可，狀態變量可用於獲取集合的下標/序號、總數、是否為單數/偶數行、是否為第一個/最后一個。例如：
<div th:each="user,stat:${userList}" th:class="${stat.even}?'even':'odd'"> 下標：<input th:value="${stat.index}"/> 序號：<input th:value="${stat.count}"/> 賬號：<input th:value="${user.username}"/> 密碼：<input th:value="${user.password}"/> </div>
如果缺省狀態變量名，則迭代器會默認幫我們生成以變量名開頭的狀態變量 xxStat， 例如：
<div th:each="user:${userList}" th:class="${userStat.even}?'even':'odd'"> 下標：<input th:value="${userStat.index}"/> 序號：<input th:value="${userStat.count}"/> 賬號：<input th:value="${user.username}"/> 密碼：<input th:value="${user.password}"/> </div>
三、條件判斷
條件判斷通常用於動態頁面的初始化，例如：
<div th:if="${userList}"> <div>的確存在..</div> </div>
如果想取反則使用unless 例如：
<div th:unless="${userList}"> <div>不存在..</div> </div>
四、日期格式化
使用默認的日期格式(toString方法) 並不是我們預期的格式：Mon Dec 03 23:16:50 CST 2018
<input type="text" th:value="${user.createTime}"/>
此時可以通過時間工具類#dates來對日期進行格式化：2018-12-03 23:16:50
<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
五、內聯寫法
-
（1）為什么要使用內聯寫法？·答：因為 JS無法獲取服務端返回的變量。
-
（2）如何使用內聯表達式？答：標准格式為：
[[${xx}]]，可以讀取服務端變量，也可以調用內置對象的方法。例如獲取用戶變量和應用路徑：<script th:inline="javascript"> var user = [[${user}]];` var APP_PATH = [[${#request.getContextPath()}]]; var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]]; </script>
- （3）標簽引入的JS里面能使用內聯表達式嗎？答：不能！內聯表達式僅在頁面生效，因為
Thymeleaf只負責解析一級視圖，不能識別外部標簽JS里面的表達式。
六、包含
我們在開發中常常都把頁面共同的header和footer提取出來，弄成單獨的頁面，然后讓該包含的頁面包含進來，我們就拿footer舉例，首先在【templates】下新建一個要背其他頁面包含的footer頁面【include】：
<html xmlns:th="http://www.thymeleaf.org"> <footer th:fragment="footer1"> <p>All Rights Reserved</p> </footer> <footer th:fragment="footer2(start,now)"> <p th:text="|${start} - ${now} All Rights Reserved|"></p> </footer> </html>
然后直接在我們的hello.html頁面中分別引用上面頁面定義好的兩個foot：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Thymeleaf快速入門-Hello Thymeleaf</title> </head> <body> <div th:include="include::footer1"></div> <div th:replace="include::footer2(2015,2018)"></div> </body> </html>
刷新頁面，可以看到效果：
最后
以上，就把如何創建運行Spring Boot項目簡單的介紹完了，后面會深入介紹Spring Boot的各個功能和用法。
這個系列課程的完整源碼，也會提供給大家。大家關注我的微信公眾號（架構師精進），回復：springboot源碼。獲取這個系列課程的完整源碼。
