网站后台统计线上广告平台
关键词：Thymeleaf、Spring Boot、HTML 模板引擎、标准表达式、文本替换、条件判断、循环遍历
✅ 引言
在 Spring Boot 项目中，Thymeleaf 是一个非常流行且功能强大的服务器端 HTML 模板引擎。它支持自然模板（Natural Templates），即即使不运行后端也能直接在浏览器中查看页面效果。
本文将围绕 Thymeleaf 的基础语法与标准表达式 进行系统讲解，涵盖变量替换、条件判断、循环遍历、URL 处理、属性操作等核心知识点，并为每个小节提供完整的 HTML + Java 后端示例代码，帮助你快速上手 Thymeleaf 开发。
📌 一、Thymeleaf 简介与基本使用
1.1 引入依赖（Spring Boot 项目）
<!-- pom.xml -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1.2 控制器返回视图名称
// HelloController.java
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class HelloController {@GetMapping("/hello")public String sayHello(Model model) {model.addAttribute("message", "Hello, Thymeleaf!");return "hello"; // 对应 templates/hello.html}
}
1.3 Thymeleaf 页面结构（hello.html）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Hello Thymeleaf</title>
</head>
<body><h1 th:text="${message}">默认标题</h1>
</body>
</html>
📌 访问 /hello 输出结果：
Hello, Thymeleaf!
📌 二、标准表达式类型详解
Thymeleaf 支持多种表达式，常见的有：
| 表达式 | 描述 |
|---|---|
${...} | 变量表达式（用于获取模型数据） |
*{...} | 选择变量表达式（适用于对象内部字段访问） |
#{...} | 消息表达式（国际化支持） |
@{...} | 链接 URL 表达式 |
~{...} | 片段表达式（用于引入其他模板片段） |
📌 三、变量表达式 ${...}
示例代码
<p th:text="${'当前时间是：' + #dates.format(now, 'yyyy-MM-dd HH:mm:ss')}">时间</p>
后端传参：
model.addAttribute("now", new java.util.Date());
📌 输出效果：
当前时间是：2025-07-16 17:34:00
📌 四、选择变量表达式 *{...}
当对象上下文已知时使用，例如：
User user = new User("张三", 25);
model.addAttribute("user", user);
<div th:object="${user}"><p>姓名：<span th:text="*{name}"></span></p><p>年龄：<span th:text="*{age}"></span></p>
</div>
📌 输出结果：
姓名：张三
年龄：25
📌 五、消息表达式 #{...}（国际化支持）
5.1 定义消息文件（src/main/resources/messages.properties）
welcome.message=欢迎访问我们的网站！
5.2 使用消息表达式
<h2 th:text="#{welcome.message}">Welcome Message</h2>
📌 输出结果：
欢迎访问我们的网站！
📌 六、链接表达式 @{...}（生成 URL）
示例代码
<a th:href="@{/user/{id}(id=${user.id})}">查看详情</a>
若 user.id = 1001，则输出：
<a href="/user/1001">查看详情</a>
📌 七、片段表达式 ~{...}（模块化复用）
7.1 定义公共片段（fragments.html）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header"><meta charset="UTF-8"><title>公共头部</title>
</head>
</html>
7.2 引用片段
<div th:insert="~{fragments :: common_header}"></div>
📌 八、条件判断 th:if / th:unless
示例代码
<p th:if="${user.age >= 18}">您已成年。</p>
<p th:unless="${user.age >= 18}">您未成年。</p>
根据 user.age = 25 输出：
您已成年。
📌 九、循环遍历 th:each
示例代码（后端传 List）
List<String> fruits = Arrays.asList("苹果", "香蕉", "橙子");
model.addAttribute("fruits", fruits);
<ul><li th:each="fruit : ${fruits}" th:text="${fruit}"></li>
</ul>
📌 输出 HTML：
<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>
📌 十、属性设置 th:attr 与快捷方式
10.1 设置任意属性
<input type="text" th:attr="placeholder=#{form.name}" />
10.2 快捷写法（推荐）
<input type="text" th:placeholder="#{form.name}" />
✅ 总结
| 表达式 | 用途 | 示例 |
|---|---|---|
${...} | 获取变量值 | th:text="${message}" |
*{...} | 从对象中取值 | th:text="*{name}" |
#{...} | 国际化消息 | th:text="#{welcome.message}" |
@{...} | 构建 URL | th:href="@{/user/{id}(id=1)}" |
~{...} | 引入模板片段 | th:insert="~{fragments :: header}" |
th:if | 条件渲染 | th:if="${user.isAdmin}" |
th:each | 循环处理 | th:each="item : ${items}" |
th:attr | 动态设置属性 | th:attr="data-id=${id}" |
📚 推荐阅读
- Thymeleaf 官方文档
- Spring Boot 中 Thymeleaf 的最佳实践
- Thymeleaf + Bootstrap 实现动态表格