1、引入Thymeleaf:pom.xml文件加入Thymeleaf啓動器
<!-- thymeleaf 模板啓動器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
控制層代碼:
@RequestMapping(value = "/success", method = RequestMethod.GET)
public String success(Map<String, Object> map) {
map.put("name", "張三");
/**
* 當引入了thymeaf啓動器依賴之後,會自動在 classpath 下面創建一個 templates 的資源文件夾
* 通過對 ThymeleafProperties 類的分析得到:thymeaf模板的默認前綴是:classpath:/templates/,後綴是:.html
* 所以這裏直接返回 success,項目會自動去 classpath:/templates/ 下面查找 success.html 文件
*/
return "success";
}
success.html代碼:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf模板</title>
</head>
<body>
你好。。。
<hr/>
<!-- th:text 這個是thymeaf 的語法,表示設置 p 標籤的 標籤體內容 -->
<p th:text="${name}">這裏顯示名字</p>
</body>
</html>
2、Thymeleaf語法
1、Thymelea常用屬性:
2、聲明與引入公共代碼片段:
header.html:
<!--header.html-->
<body>
<!--聲明公共片段-->
<!-- 方式1:-->
<div th:fragment="header_common">
這是th:fragment聲明公共片段
</div>
<!-- 方式2:選擇器寫法-->
<div id="header_common_id">
這是id選擇器聲明公共片段
</div>
</body>
success.html:
<!-- success.html 引入頭部公共片段 -->
<!--方式1:
header : 公共片段所在模板的文件名
header_common :聲明代碼片段名 -->
<div th:replace="header :: header_common"></div>
<!--方式2:選擇器寫法
header : 公共片段所在模板的文件名
#header_common_id: 聲明代碼片的id值
-->
<div th:replace="header :: #header_common_id"></div>
<!--
th:insert 和 th:replace的區別
th:insert和th:replace都可以引入片段,兩者的區別在於
th:insert: 保留引入時使用的標籤
th:replace:不保留引入時使用的標籤, 將聲明片段直接覆蓋當前引用標籤
-->
<h2 th:insert="header :: #header_common_id"></h2>
3、迭代:th:each
常用迭代方式:
HelloController:
@RequestMapping("/study")
public String study(Map<String, Object> map, HttpServletRequest request) {
List<User> userList = new ArrayList<>();
userList.add(new User("小夢", 1));
userList.add(new User("小李", 2));
userList.add(new User("小張", 1));
map.put("userList", userList);
return "study";
}
study.html:
<table border="1px">
<tr>
<th>姓名</th>
</tr>
<!--方式1: -->
<tr th:each="user : ${userList}">
<!--每次迭代都會生成一個當前標籤-->
<td th:text="${user}">mengxuegu</td>
</tr>
</table>
<hr/>
<ul>
<!--方式2:-->
<!--作用在同一個標籤上, 每次迭代生成一個當前標籤-->
<li th:each="user : ${userList}" th:text="${user}"></li>
</ul>
獲取迭代狀態:
<table border="1px">
<tr>
<th>編號</th>
<th>姓名</th>
<th>總數</th>
<th>偶數/奇數</th>
<th>第一個元素</th>
<th>最後一個元素</th>
</tr>
<!--
user : 第1個值,代表每次迭代出對象,名字任意取
iterStat : 第2個值,代表每次迭代器內置對象, 名字任意取, 並有如下屬性:
index : 當前迭代下標 0 開始
count : 當前迭代下標 1 開始
size : 獲取總記錄數
current : 當前迭代出的對象
even/odd : 當前迭代是偶數還是奇數 (1開始算,返回布爾值)
first : 當前是否爲第一個元素
last : 當前是否爲最後一個元素
-->
<tr th:each="user, iterStat : ${userList}">
<td th:text="${iterStat.count}">0</td>
<td th:text="${user.username}">mengxuegu</td>
<td th:text="${user.gender == 1 ? '女' : '男'}">未知</td>
<td th:text="${iterStat.size}">0</td>
<td th:text="${iterStat.even}? '偶數' : '奇數'"></td>
<td th:text="${iterStat.first}"></td>
<td th:text="${iterStat.last}"></td>
</tr>
</table>
4、條件判斷
th:if 不僅判斷返回爲 true 的表達式,還判斷一些特殊的表達式。
如果值不是Null, 以下情況均返回 true:
如果值是boolean類型並且值爲true.
如果值是數值類型並且值不爲0.
如果值是字符類型並且值不爲空.
如果值是字符串並且內容不爲 “false” , “off” 或者 “no” .
如果值不是上述類型也返回true.
如果值是NULL, 則返回false
<hr/>
下面加not
<h3 th:if="not ${#lists.isEmpty(userList)}">th:if判斷,如果此文字顯示說明有值</h3>
<h3 th:unless="${#lists.isEmpty(userList)}">th:unless判斷,如果此文字顯示說明有值</h3>
th:unless 與 th:if 作用正好相反。
th:swith th:case:
@RequestMapping("/study")
public String study(Map<String, Object> map, HttpServletRequest request) {
List<User> userList = new ArrayList<>();
userList.add(new User("小夢", 1));
userList.add(new User("小李", 2));
userList.add(new User("小張", 1));
map.put("userList", userList);
// 1女, 2男
map.put("sex", 1);
map.put("man", 2);
return "study";
}
<div th:switch="${sex}">
<!--1女, 2男-->
<p th:case="1">女</p>
<!--判斷sex的值和下面取出man的值是否相等,相等則顯示-->
<p th:case="${man}">男</p>
<!--如果值都不在上述case裏,則th:case="*"語句生效。-->
<p th:case="*">未知</p>
</div>
5、顯示標籤體內容
th:text 轉義特殊字符, 即 h1標籤以文本顯示出來
th:utext 不轉義特殊字符, 即 h1 標籤展現出本來效果
@RequestMapping("/study")
public String study(Map<String, Object> map, HttpServletRequest request) {
List<User> userList = new ArrayList<>();
userList.add(new User("小夢", 1));
userList.add(new User("小李", 2));
userList.add(new User("小張", 1));
map.put("userList", userList);
// 1女, 2男
map.put("sex", 1);
map.put("man", 2);
// th:text th:utext
map.put("desc", "歡迎來到<h1>夢學谷<h1>");
return "study";
}
<div th:text="${desc}"> </div>
<div th:utext="${desc}"> </div>
**補充:**Thymeleaf 行內表達式雙中括號: [[表達式]] (就是不在標籤上使用屬性):
<input type="checkbox" /> [[${desc}]]
<p>Hello, [[${desc}]] 。。。</p>
6、th:object 直接取出對象
使用th:object 直接取出對象,然後寫對象裏的屬性名即可獲取屬性值
@RequestMapping("/study")
public String study(Map<String, Object> map, HttpServletRequest request) {
List<User> userList = new ArrayList<>();
userList.add(new User("小夢", 1));
userList.add(new User("小李", 2));
userList.add(new User("小張", 1));
map.put("userList", userList);
// 1女, 2男
map.put("sex", 1);
map.put("man", 2);
// th:text th:utext
map.put("desc", "歡迎來到<h1>夢學谷<h1>");
request.getSession().setAttribute("user", new User("小不點", 2));
return "study";
}
<!--使用th:object 直接取出對象,然後寫對象裏的屬性名即可獲取屬性值-->
<div th:object="${session.user}">
<p>
姓名:<span th:text="*{username}">xxxx</span>
</p>
<p>
性別:<span th:text="*{gender == 1 ? '女' : '男'}">xxxx</span>
</p>
</div>