博主
258
258
258
258
标签
elasticsearch kibana LayUI rabbitmq Vue3 springboot linux jdk centos
专辑

第三节 Thymeleaf模版指令：变量以及表达式

亮子 2022-02-14 12:34:29 17793 0 0 0

1、普通变量

由于Thymeleaf是完全兼容HTML的，所以为了不破坏HTML结构，Thymeleaf 采用了自定义HTML属性的方式来生成动态内容。th:text语法的作用就是会动态替换掉作用HTML标签的内部内容。

  • 代码举例：
<span th:text="${msg}">Hello</span>
  • 渲染结果
<span>你好</span>

一般情况下，模板的变量都是会存放在模板上下文中，所以我们如果想要调用变量，就需要先设置变量到模板上下文中去

扩展：

上下文这个术语在编程里用的比较多，一 般泛指在某个具体的实例里，比如说模板上下文, 指的是这个模板运行的实例。

2、数组变量

代码：

    // 测试数组
    @GetMapping(value = "/array")
    public String array(Model model) {
        ArrayList<String> books = new ArrayList<>();
        books.add("三国演义");
        books.add("水浒传");
        books.add("红楼梦");
        books.add("西游记");

        model.addAttribute("books", books);
        return "array";
    }

模板：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试数组</title>
</head>
<body>
    <div>
        <ul th:each="item : ${books}">
            <li th:text="${item}"></li>
        </ul>
    </div>
</body>
</html>

效果：

图片alt

3、对象变量

如果对象包含对象，还是可以用.一直点出来的， 前提是这个对象是POJO类哦

  • 实体类
package com.shenmazong.thymeleaf.pojo;

import lombok.Data;

/**
 * @author 军哥
 * @version 1.0
 * @description: 用户实体类
 * @date 2022/2/16 11:06
 */

@Data
public class TbUser {
    private Integer userId;
    private String userName;
    private Integer userAge;
    private String userSkills;
}
  • 控制层
    // 测试对象以及对象数组
    @GetMapping(value = "/object")
    public String object(Model model) {
        // 测试对象
        TbUser tbUser = new TbUser();
        tbUser.setUserId(1);
        tbUser.setUserName("武松");
        tbUser.setUserAge(35);
        tbUser.setUserSkills("景阳冈打虎");

        model.addAttribute("user", tbUser);

        // 测试对象数组
        ArrayList<TbUser> tbUsers = new ArrayList<>();
        for (int idx = 0; idx < 4; idx++) {
            TbUser user = new TbUser();
            user.setUserId(idx+1);
            user.setUserName("武松"+idx);
            user.setUserAge(35+idx);
            user.setUserSkills("景阳冈打虎"+idx);

            tbUsers.add(user);
        }
        model.addAttribute("users", tbUsers);

        return "object";
    }
  • 模板文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试对象</title>
</head>
<body>
    <div>
        <div>
            <ul>
                <li th:text="${user.userId}">id</li>
                <li th:text="${user.userName}">姓名</li>
                <li th:text="${user.userAge}">年龄</li>
                <li th:text="${user.userSkills}">技能</li>
            </ul>
        </div>
        <hr>
        <div>
            <ul>
                <li th:text="${user.getUserId()}">id</li>
                <li th:text="${user.getUserName()}">姓名</li>
                <li th:text="${user.getUserAge()}">年龄</li>
                <li th:text="${user.getUserSkills()}">技能</li>
            </ul>
        </div>
        <hr>
        <div>
            <ul th:each="item,it : ${users}">
                <li th:text="${it.count}">id</li>
                <li th:text="${item.userId}">id</li>
                <li th:text="${item.getUserName()}">姓名</li>
                <li th:text="${item.getUserAge()}">年龄</li>
                <li th:text="${item.getUserSkills()}">技能</li>
            </ul>
        </div>
    </div>
</body>
</html>
  • 运行效果

图片alt

th:each有一个状态变量，如上面代码中it，具体含义如下：

  • userStat称作状态变量，属性有：
  • index:当前迭代对象的迭代索引，从0开始，这是索引属性；
  • count:当前迭代对象的迭代索引，从1开始，这个是统计属性；
  • size:迭代变量元素的总量，这是被迭代对象的大小属性；
  • current:当前迭代变量；
  • even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）；
  • first:布尔值，当前循环是否是第一个；
  • last:布尔值，当前循环是否是最后一个；

3、Thymeleaf表达式

1、${}

字符串处理

<span th:text="'00:00/'+${totalTime}"></span>

静态内容用单引号’’包裹起来，和上下文变量之间用+连接。

字符串拼接优化

Thymeleaf做字符串拼接还做了优化工作,我们可以使用上面的代码你还可以这样|围住字符串，这样就不需要在文字后面附加’…‘+’…’

<span th:text="|00:00/${totalTime}|"></span>

数据转化

Thymeleaf默认集成了大量的工具类可以方便的进行数据转化，一我们使用最多的是dates

@RequestMapping("/demo")
  public String index(Model model){
    Date dateVar = new Date();
    model.addAttribute("dateVar",dateVar);
    return "demo";
  }

前台显示：

  • 显示年月日
<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日')}"></p>
  • 显示年月日时分秒
<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>

在这里如果后台的日期类型是LocalDate/LocalDateTime，那么就把#date换成#temporals

注意：需要在pom.xml文件里添加依赖

<dependency>
  <groupId>org.thymeleaf.extras</groupId>
  <artifactId>thymeleaf-extras-java8time</artifactId>
  <version>3.0.4.RELEASE</version>
</dependency>

这个库会自动添加一个新的工具类temporals
工具类的运用和变量不同，变量使用的是${变量名} ,工具类使用的是#{工具类}。

后台代码：

@RequestMapping("/demo")
  public String index(Model model){
    LocalDateTime dateVar = LocalDateTime.now();
    model.addAttribute("dateVar",dateVar);
    return "demo";
  }

前台代码：
- 显示年月日

<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日')}"></p>
  • 显示年月日时分秒
<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>

dates/temporals工具类说明

dates和temporals支持的方法是一样的， 只是支持的类型不同，dates支持的是Date类, temporals支持的是LocalDate 和LocalDateTime。
java.util.Date类和LocalDateTime类功能是一样的，不同的是LocalDateTime是Java8才出现的，一老的应用还是用Date类的。
strings工具类
Thymeleaf里的其他工具类
各内置对象包含哪些方法可以点此看文档，也可以点这里看官方文档。
Thymeleaf内联表达式
其实就是th:text的另一种写法，直接把变量写在HTML中，格式：[[变量]]

<span>Hello [[${msg}]]</span>
<p>[[ ${#dates.format(dateVar, 'yyyy-MM-dd')} ]]</p>
<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日')}]]</p>
<p>[[${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}]]</p>
<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}]]</p>

  • 注意：
    内联表达式[[]]只能替代th:tex不是替代所有的th:标签。
    另外，也不建议使用这种方式，因为这种方式破坏原来的html结构，违背了设计初衷。

  • 示例代码

    @GetMapping(value = "/date")
    public String date(Model model) {
        Date date = new Date();
        model.addAttribute("createTime", date);

        return "date";
    }
  • 模板代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试日期函数</title>
</head>
<body>
    <div>
        <div>
            <p th:text="${#dates.format(createTime, 'yyyy-MM-dd')}"></p>
            <p th:text="${#dates.format(createTime, 'yyyy年MM月dd日')}"></p>
            <p th:text="${#dates.format(createTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
            <p th:text="${#dates.format(createTime, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>
        </div>
        <div>
            <p th:text="|年月日： ${#dates.format(createTime, 'yyyy-MM-dd')}|"></p>

        </div>
    </div>
</body>
</html>

2、*{}

选择表达式（星号表达式）。选择表达式与变量表达式有一个重要的区别：选择表达式计算的是选定的对象，而不是整个环境变量映射。也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的。那什么是选择的对象呢？是一个：th:object对象属性绑定的对象。

例如：

<div th:object=" ${session.user}" >
<p>Name: <span th: text=" *{firstName}" >Sebastian</span>. </p>
<p>Surname: <span th: text=" *{lastName}" >Pepper</span>. </p>
<p>Nationality: <span th: text=" *{nationality}" >Saturn</span>. </p>
</div>

上例中，选择表达式选择的是th:object对象属性绑定的session. user对象中的属性。

3、#{}

消息表达式（井号表达式，资源表达式）。通常与th:text属性一起使用，指明声明了th:text的标签的文本是#{}中的key所对应的value，而标签内的文本将不会显示。

例如：

新建/WEB-INF/templates/home.html，段落

<p th: text=" #{home. welcome}" >This text will not be show! </p>

新建/WEB-INF/templates/home.properties，home.welcome：

home.welcome=this messages is from home.properties!

测试结果：

从测试结果可以看出，消息表达式通常用于显示页面静态文本，将静态文本维护在properties文件中也方便维护，做国际化等。

4、@{}

超链接url表达式。

例如：

<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"/>

5、#maps

工具对象表达式。常用于日期、集合、数组对象的访问。这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。用法在上面数据转化已经举例

  • dates
  • calendars
  • numbers
  • strings
  • objects
  • bools
  • arrays
  • lists
  • sets