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>