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