手机建设网站目的vue 做网站

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

---

✅ 引言

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

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

---

📌 一、条件判断：th:if 与 th: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:switch 与 th: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)}" 避免空指针
逻辑运算	支持 and、or、not、eq、neq、gt、lt 等
性能优化	尽量避免在模板中进行复杂逻辑处理，交由后端处理

---

✅ 总结

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

---

📚 推荐阅读

• Thymeleaf 官方文档 - Iteration
• Spring Boot + Thymeleaf 实战教程
• Thymeleaf 中文文档