Thymeleaf

摘要：本文学习了如何在Spring Boot中使用Thymeleaf模板引擎。

环境

Windows 10 企业版 LTSC 21H2
Java 1.8
Maven 3.6.3
Spring 5.3.31
Spring Boot 2.7.18

1 概述

Thymeleaf是一个现代服务器端Java模板引擎，适用于Web和独立环境。

Spring Boot官方推荐使用Thymeleaf作为默认引擎，无需额外配置即可使用。

与JSP相比，Thymeleaf更轻量级，从Spring Boot的3.0版本开始，移除了对JSP的支持，使用JSP需要手动配置。

官网地址：https://www.thymeleaf.org/

2 使用

2.1 项目结构

2.2 配置依赖

配置依赖：

pom.xml

<!-- Spring Boot Web -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Spring Boot Thymeleaf -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.3 配置文件

增加配置：

application.properties

# 开启支持，默认开启
spring.thymeleaf.enabled=true
# 模板文件存放路径，默认为类路径下的/templates/目录
spring.thymeleaf.prefix=classpath:/templates/
# 模板文件后缀，默认为html格式
spring.thymeleaf.suffix=.html
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 关闭缓存，默认开启，生产环境关闭
spring.thymeleaf.cache=false
# 检查模板位置是否存在
spring.thymeleaf.check-template-location=true

2.4 视图控制

创建Controller文件：

DemoController.java

@Controller
public class DemoController {
    @GetMapping("/demo")
    public String demo(Model model) {
        model.addAttribute("msg", "欢迎");
        return "demo";
    }
}

2.5 模板文件

创建HTML页面文件，使用命名空间：

demo.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
</head>
<body>
  <div>
    <p th:text="${msg}"></p>
  </div>
</body>
</html>

3 语法

3.1 命名空间

需要在HTML根标签添加命名空间：

demo.html

1	<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

3.2 表达式

表达式语法：

${表达式}：变量表达式，用于获取模型中的属性，支持级联获取属性。
*{表达式}：选择表达式，用于获取当前对象的属性。
#{表达式}：消息表达式，用于获取消息资源，实现国际化。
@{表达式}：链接表达式，用于生成链接。
~{表达式}：资源表达式，用于加载静态资源。

3.2.1 变量表达式

示例：

demo.html

1	<p th:text="${msg}"></p>

3.2.2 选择表达式

示例：

demo.html

<div th:object="${user}">
  <p th:text="*{id}"></p>
  <p th:text="*{name}"></p>
</div>

3.2.3 消息表达式

示例：

demo.html

1	<p th:text="#{msg}"></p>

3.2.4 链接表达式

示例：

demo.html

1
2
3

<p><a th:href="@{/demo}">请求接口</a></p>
<p><a th:href="@{/index.html}">访问首页</a></p>
<p><img th:src="@{/favicon.ico}"></p>

3.2.5 资源表达式

示例：

demo.html

1	<div th:replace="~{common/common::header}" class="replace"></div>

3.3 指令

3.3.1 文本指令

常用指令：

th:text：用于设置元素的文本内容。
th:utext：用于设置元素的文本内容，支持HTML标签。
th:value：用于设置元素的value属性值。
th:attr：用于设置元素的任意属性值。

视图控制：

java

@GetMapping("/demo")
public String demo(Model model) {
    User user = new User();
    user.setId(1);
    user.setName("张三");
    model.addAttribute("user", user);
    model.addAttribute("msg", "<strong>欢迎</strong>");
    return "demo";
}

模板文件：

demo.html

1
2
3

<p th:text="${msg}"></p>
<p th:utext="${msg}"></p>
<input type="text" th:attr="id=${user.id}" th:value="${user.name}" />

3.3.2 属性指令

常用指令：

th:checked：用于设置复选框或单选框的选中状态。
th:selected：用于设置下拉列表框的选中状态。
th:readonly：用于设置元素的只读状态。
th:disabled：用于设置元素的禁用状态。

视图控制：

java

@GetMapping("/demo")
public String demo(Model model) {
    User user = new User();
    user.setGender("男");
    user.setHobbies(Arrays.asList("看书", "画画"));
    model.addAttribute("user", user);
    return "demo";
}

模板文件：

demo.html

<label>性别：</label>
<input type="radio" name="gender" value="男" th:checked="${user.gender == '男'}">男
<input type="radio" name="gender" value="女" th:checked="${user.gender == '女'}">女
<br>
<label>爱好：</label>
<input type="checkbox" value="跑步" th:checked="${user.hobbies.contains('跑步')}">跑步
<input type="checkbox" value="看书" th:checked="${user.hobbies.contains('看书')}">看书
<input type="checkbox" value="画画" th:checked="${user.hobbies.contains('画画')}">画画

3.3.3 条件指令

常用指令：

th:if：用于根据结果判断是否显示元素。
th:unless：用于根据结果判断是否显示元素，与th:if相反。
th:switch：用于根据结果判断多个条件。
th:case：用于根据结果判断是否显示元素，只能判断固定值，只能在th:switch中使用。

视图控制：

java

@GetMapping("/demo")
public String demo(Model model) {
    User user = new User();
    user.setAge(20);
    user.setStatus(0);
    model.addAttribute("user", user);
    return "demo";
}

模板文件：

demo.html

<label>是否成年：</label>
<p th:if="${user.age >= 18}">已成年</p>
<p th:unless="${user.age >= 18}">未成年</p>
<br/>
<label>成绩等级：</label>
<div th:switch="${user.status}">
  <p th:case="0">教师</p>
  <p th:case="1">学生</p>
  <p th:case="*">访客</p>
</div>

3.3.4 循环指令

常用指令：

th:each：用于遍历集合，将每个元素赋值给指定的变量。

视图控制：

java

@GetMapping("/demo")
public String demo(Model model) {
    User user = new User();
    user.setHobbies(Arrays.asList("看书", "画画"));
    model.addAttribute("user", user);
    return "demo";
}

模板文件：

demo.html

<label>爱好：</label>
<ul th:each="hobby : ${user.hobbies}">
  <li th:text="${hobby}"></li>
</ul>

3.3.5 片段指令

常用指令：

th:fragment：用于定义复用片段。
th:replace：用于替换复用片段。
th:insert：用于插入复用片段。

定义片段：

common.html

1
2
3

<div th:fragment="header" class="fragment">
  <p>定义片段</p>
</div>

替换片段，覆盖当前标签：

demo.html

1	<div th:replace="~{common/common::header}" class="replace"></div>

插入片段，保留当前标签：

demo.html

1	<div th:insert="~{common/common::header}" class="insert"></div>

3.4 内置对象

域对象：

session：会话对象，用于获取会话相关的属性。
application：应用对象，用于获取应用相关的属性。

原生对象：

#request：请求对象，用于获取请求相关的属性。
#response：响应对象，用于获取响应相关的属性。

工具类：

#strings：字符串工具类，用于处理字符串。
#numbers：数字工具类，用于处理数字。
#bools：布尔工具类，用于处理布尔值。
#dates：日期工具类，用于处理日期。
#arrays：数组工具类，用于处理数组。
#lists：列表工具类，用于处理列表。
#sets：集合工具类，用于处理集合。
#maps：映射工具类，用于处理映射。
#objects：对象工具类，用于处理对象。