Thymeleaf 流程控制与迭代详解

发布于:2025-07-21 ⋅ 阅读:(13) ⋅ 点赞:(0)

关键词:Thymeleaf、流程控制、th:if、th:switch、th:each、迭代、状态对象、Spring Boot 模板引擎


✅ 引言

在使用 Thymeleaf 构建动态 HTML 页面时,流程控制迭代 是两个非常核心的功能。Thymeleaf 提供了丰富的属性来支持条件判断(如 th:ifth:unlessth:switch)和循环遍历(如 th:each),可以让你根据后端数据动态渲染页面内容。

本文将围绕 Thymeleaf 的流程控制与迭代机制 进行系统讲解,并为每个小节提供完整的 HTML 页面 + Spring Boot 后端 Java 示例代码,帮助你掌握 Thymeleaf 在真实项目中的高级用法。


📌 一、条件判断:th:ifth:unless

1.1 th:if:条件为真时渲染

<p th:if="${user.isAdmin}">您是管理员</p>
<p th:if="${user.role == 'guest'}">您是访客</p>

Java 后端示例:

model.addAttribute("user", new User("张三", 28, "admin", true));

📌 输出结果(当 isAdmin == true):

您是管理员

1.2 th:unless:条件为假时渲染

<p th:unless="${user.isAdmin}">您不是管理员</p>

📌 输出结果(当 isAdmin == false):

您不是管理员

📌 二、多条件判断:th:switchth:case

2.1 使用 th:switch 实现多分支判断

<div th:switch="${user.role}">
    <p th:case="'admin'">您是管理员</p>
    <p th:case="'editor'">您是编辑人员</p>
    <p th:case="*">未知角色</p>
</div>

📌 示例输出(当 user.role == "admin"):

您是管理员

📌 示例输出(当 user.role == "guest"):

未知角色

📌 三、循环遍历:th:each 详解

3.1 基本用法

<ul>
    <li th:each="fruit : ${fruits}" th:text="${fruit}"></li>
</ul>

Java 后端示例:

model.addAttribute("fruits", Arrays.asList("苹果", "香蕉", "橙子"));

📌 输出 HTML:

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

3.2 获取循环状态对象:th:each 状态变量

Thymeleaf 提供了一个内置的状态对象 stat,可用于获取索引、是否为第一个/最后一个元素等。

<ol>
    <li th:each="fruit, stat : ${fruits}"><span th:text="${stat.index + 1}"></span> 个水果:
        <b th:text="${fruit}"></b>
        <span th:if="${stat.odd}">(奇数位)</span>
        <span th:if="${stat.even}">(偶数位)</span>
    </li>
</ol>

📌 输出 HTML:

第 1 个水果:苹果(奇数位)
第 2 个水果:香蕉(偶数位)
第 3 个水果:橙子(奇数位)

📌 四、嵌套循环与多级数据结构处理

4.1 嵌套 th:each 遍历二维数据

Map<String, List<String>> categories = new HashMap<>();
categories.put("水果", Arrays.asList("苹果", "香蕉", "橙子"));
categories.put("蔬菜", Arrays.asList("西红柿", "黄瓜", "胡萝卜"));
model.addAttribute("categories", categories);

HTML 模板:

<div th:each="entry : ${categories}">
    <h3 th:text="${entry.key}"></h3>
    <ul>
        <li th:each="item : ${entry.value}" th:text="${item}"></li>
    </ul>
</div>

📌 输出 HTML:

<h3>水果</h3>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<h3>蔬菜</h3>
<ul>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>胡萝卜</li>
</ul>

📌 五、结合条件判断与循环实现复杂逻辑

5.1 示例:遍历用户列表并根据角色高亮显示

List<User> users = Arrays.asList(
    new User("张三", 25, "admin", true),
    new User("李四", 28, "editor", false),
    new User("王五", 30, "guest", false)
);
model.addAttribute("users", users);

HTML 模板:

<table border="1">
    <tr th:each="user, stat : ${users}"
         th:class="${user.isAdmin}? 'admin-row' : (${stat.odd}? 'odd-row' : 'even-row')">
        <td th:text="${user.name}"></td>
        <td th:text="${user.role}"></td>
    </tr>
</table>

CSS 示例:

.admin-row { background-color: #ffeb3b; }
.odd-row { background-color: #f0f0f0; }
.even-row { background-color: #ffffff; }

📌 输出效果:

  • 张三行高亮为黄色(管理员)
  • 李四行为灰色(奇数)
  • 王五行为白色(偶数)

📌 六、流程控制与迭代的注意事项

项目 说明
表达式语法 使用 ${} 表示变量、*{} 表示对象内部字段
状态变量 stat 是自动提供的,可获取索引、奇偶、是否为第一个/最后一个
空值处理 使用 th:if="${!#strings.isEmpty(name)}" 避免空指针
逻辑运算 支持 andornoteqneqgtlt
性能优化 尽量避免在模板中进行复杂逻辑处理,交由后端处理

✅ 总结

功能 属性 用途
条件判断 th:if, th:unless 控制是否渲染某块内容
多条件判断 th:switch, th:case 多分支选择
循环遍历 th:each 遍历集合
状态对象 stat 获取索引、奇偶等信息
嵌套循环 多层 th:each 处理复杂结构数据
样式绑定 th:class 根据逻辑动态设置样式

📚 推荐阅读