目錄
一、Thymeleaf 介紹
1.1 Thymeleaf 概念
thymeleaf 是一個模板引擎工具，主要用於頁面渲染操作(頁面數據填充操作)，可以取代之前的 jsp 操作。
thymeleaf 是一個XML/XHTML/HTML5模板引擎，可以用於 Web 與非 Web 環境中的應用開發。在應用開發中，你可以使用 thymeleaf 來完全代替 JSP 或其他的模板引擎，如 Velocity、FreeMarker等。
thymeleaf 的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式，因此也稱爲靜態建模，你可以使用它創建經過驗證的 XML/HTML 模板，開發者只需將標籤屬性添加到模板中即可，這些設定好的標籤屬性會在 DOM 上執行預先制定好的邏輯。
1.2 Thyeleaf 特點
開箱即用，支持處理六種模板：
二、Thymeleaf 使用
2.1 基本語法
2.1.1 輸出文本內容 th:text
java:
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("message", "hello thymeleaf");
return "demo1";
}
html:
<div th:text="${message}"></div>
<!-- 能夠識別到html標籤並顯示 -->
<div th:utext="${message}"></div>
2.1.2 表單提交 th:action
<form id="login-form" th:action="@{/test/hello}">
<button>提交</button>
</form>
2.1.3 for循環 th:each
<table>
<tr>
<th>下標</th>
<th>ID</th>
<th>姓名</th>
<th>地址</th>
</tr>
<!--
第一個參數 user: 當前被循環的對象 item
第二個參數 state: 當前被循環對象的狀態記錄，如下標、第幾條
-->
<tr th:each="user,state:${users}">
<td th:text="${state.count}"></td>
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.address}"></td>
</tr>
</table>
2.1.4 Map 輸出
--------------------- .java ------------------
Map<String, Object> dataMap = new HashMap<String, Object>();
dataMap.put("num", "105");
dataMap.put("name", "小王");
dataMap.put("address", "深圳");
model.addAttribute("dataMap", dataMap);
--------------------- .html ------------------
<div>
<!--
讀取map的種方式
1. 知道 map 的key,根據 key 直接獲取數據
2. 不知道 key，使用循環方式獲取key，然後獲取數據
-->
<h1>方式一</h1>
<div>獲取num的值：<span th:text="${dataMap.num}"></span></div>
<div>獲取name的值：<span th:text="${dataMap.name}"></span></div>
<div>獲取address的值：<span th:text="${dataMap.address}"></span></div>
<h1>方式二</h1>
<div th:each="item:${dataMap}">
<div><span th:text="${item.key}"></span><span th:text="${item.value}"></span></div>
</div>
</div>
2.1.5 時間輸出
<span th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></span>
2.1.6 條件判斷
下面這兩句話是等同的
# 當條件成立 th:if
<span th:if="${age>18}">成年人</span>
# 當條件不成立 th:unless
<span th:unless="${age>18}">成年人</span>
2.1.7 定義模塊
th: fragment 用於定義一個獨立的模塊，可以被其他頁面引用
定義一個 footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>子模塊</title>
</head>
<body>
<!-- 定義一個模塊 -->
<div th:fragment="bar">
關於我們<br/>
</div>
</body>
</html>
在展示頁面中使用 th:include="[文件名稱]::[片段名稱]"引用
<div th:include="footer::bar"></div>
2.1.8 圖片識別
<img th:src="${item.image}" />
2.1.9 url 跳轉
url表達式有其特殊的格式：
@{}
如下面實現點擊跳轉：
使用 @{}表明這是修改url ${url}可以獲取到當前url 括號中可以是擴充的內容
<a th:href="@{${url}(category=${category})}" th:text="${category}"></a><em th:unless="${state.last}">、</em>
