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

亮子 2022-02-14 12:34:29 17754 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