java后台

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>

总共分为两步:

  1. 创建header.html的文件,里面定义公共片段的内容,用th:fragment标明,值为header_common
  2. 在你需要用到这个公共部分的位置,通过th:fragment申明的片段用th:relpace引入,值为 文件名 空格 双冒号 空格 th:fragment的值。也就是这里的 header :: header_common
  3. 通过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>

  注意的地方就是:

条件判断

<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>
上一篇下一篇

猜你喜欢

热点阅读