Spring Boot學習筆記(6)—— SpringBoot整合Thymeleaf模板引擎

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章