SpringBoot系列—Thymeleaf常用属性(六)
2019-08-29 本文已影响0人
海晨忆
个人博客:haichenyi.com。感谢关注
引用公共片段 th:fragment,th:replace,th:insert
很多页面有很多相同的内容,比方说header和foot,这样的内容就需要公共片段引用了,修改一个地方就全部都改了。类似于android里面提取公共方法一样的道理。
方式如下图:
公共片段1.png 公共片段2.png<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>公共片段</title>
</head>
<body>
<!--通过th:fragment申明公共片段-->
<div th:fragment="header_common">这里是公共片段的内容</div>
<!--通过id申明公共片段-->
<div id="header_common_id">这里是公共片段的内容</div>
</body>
</html>
<!--引入公共片段-->
<div th:replace="header :: header_common"></div>
<div th:replace="header :: #header_common_id"></div>
总共分为两步:
- 创建header.html的文件,里面定义公共片段的内容,用th:fragment标明,值为header_common
- 在你需要用到这个公共部分的位置,通过th:fragment申明的片段用th:relpace引入,值为 文件名 空格 双冒号 空格 th:fragment的值。也就是这里的 header :: header_common
- 通过id申明的片段用th:replace引入,值为 文件名 空格 双冒号 空格 # th:fragment的值。也就是这里的 header :: #header_common_id
th:insert 和 th:replace的区别
th:insert和th:replace都可以引入片段,用的方式是一样的,两者的区别在于 th:insert: 保留引入时使用的标签 th:replace:不保留引入时使用的标签, 将声明片段直接覆盖当前引用标签
迭代器 th:each
首先,创建一个实体类User。如下:
package com.haichenyi.springbootwebthymeleaf.pojo;
public class User {
private String username;
private Integer age;
//1:女,2:男
private Integer sex;
public String getUsername() {
return username;
}
public Integer getAge() {
return age;
}
public Integer getSex() {
return sex;
}
public User(String username, Integer age, Integer sex) {
this.username = username;
this.age = age;
this.sex = sex;
}
}
其次,在controller创建一个获取User的方法。如下:
@RequestMapping("/userInfo")
public String getUserInfo(Model model) {
List<User> userList = new ArrayList<>();
userList.add(new User("小雪", 18, 1));
userList.add(new User("小红", 18, 1));
userList.add(new User("小东", 18, 2));
model.addAttribute("userList", userList);
return "userInfo";
}
这里,我用的model返回的数据,添加了一个属性以"userList"为键。页面直接获取这个键,就能拿到对应的值。之后返回userInfo页面。
最后页面的使用,如下,创建userInfo.html专门使用这个:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户信息</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr th:each="user:${userList}">
<td th:text="${user.username}"></td>
<td th:text="${user.age}"></td>
<td th:text="${user.sex==1?'女':'男'}"></td>
</tr>
<ul>
<li th:each="user:${userList}" th:text="${user.username}"></li>
</ul>
<!--
user : 第1个值,代表每次迭代出对象,名字任意取
iterStat : 第2个值,代表每次迭代器内置对象, 名字任意取, 并有如下属性:
index : 当前迭代下标 0 开始
count : 当前迭代下标 1 开始
size : 获取总记录数
current : 当前迭代出的对象
even/odd : 当前迭代是偶数还是奇数 (1开始算,返回布尔值)
first : 当前是否为第一个元素
last : 当前是否为最后一个元素
-->
<tr th:each="user,iterStat:${userList}">
<td th:text="${user.username}"></td>
<td th:text="${user.age}"></td>
<td th:text="${user.sex==1?'女':'男'}"></td>
<td th:text="${iterStat.index}"></td>
<td th:text="${iterStat.count}"></td>
<td th:text="${iterStat.size}"></td>
<td th:text="${iterStat.current}"></td>
<td th:text="${iterStat.even}"></td>
<td th:text="${iterStat.first}"></td>
<td th:text="${iterStat.last}"></td>
</tr>
</table>
</body>
</html>
注意的地方就是:
- th:each="user:${userList}",这里可以参考java里面的foreach循环,冒号前面是当前循环的变量(冒号前面可以有两个值),冒号后面是集合。这个集合怎么获取到的?就是通过userList这个键。第二步存的。
- 拿到这个集合中的每一个变量值了,用就很简单了。
条件判断
<h3 th:if="not ${#lists.isEmpty(userList)}">th:if判断,如果此文字显示说明有值</h3>
<h3 th:unless="${#lists.isEmpty(userList)}">th:unless判断,如果此文字显示说明有值</h3>
<div th:switch="${flag}">
<p th:case="1" th:text="女"></p>
<p th:case="2" th:text="男"></p>
<!--上面两条都不生效,则下面th:case="*"生效,类似于default-->
<p th:case="*" th:text="未知"></p>
</div>