SpringBoot系列—Thymeleaf（六）

引用公共片段 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>