在 web 应用开发中，我们经常需要在前端页面以表格形式展示后端数据，并为每条数据提供诸如“删除”、“编辑”等操作按钮。然而，在 thymeleaf 中处理这类需求时，如果对循环机制理解不当，很容易出现按钮重复渲染或数据错位的问题。本教程将深入探讨如何正确地实现这一功能，确保数据与操作按钮一一对应。
1. 问题背景与常见误区
许多初学者在 Thymeleaf 中循环展示数据时，可能会尝试分别循环不同的数据列表（例如，一个 descriptionList 和一个 idList），并试图将它们组合在同一行中。当需要为每行添加一个操作按钮时，如果再次对 ID 列表进行循环，就会导致按钮数量与 ID 列表的长度成倍增加，而非每行一个。
原始问题示例（错误示范）：
上述代码的问题在于，外部
2. 核心概念：统一数据模型
解决上述问题的关键在于统一数据模型。我们不应该在 Thymeleaf 模板中尝试将多个独立的列表拼接起来，而应该在后端将相关联的数据封装成一个统一的 Java 对象列表。每个对象代表表格中的一行数据，包含该行所需的所有信息（如描述、ID、邮箱等）。
示例：定义一个数据模型类
假设我们需要展示用户 ID、邮箱和一些其他信息，并为每个用户提供删除功能。我们可以定义一个 User 类来封装这些信息：
public class User {
private Long id;
private String email;
// 可以添加其他属性，例如 description
private String description;
// 构造函数
public User(Long id, String email, String description) {
this.id = id;
this.email = email;
this.description = description;
}
// Getter 和 Setter 方法
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}3. 后端控制器准备数据
在 Spring Boot 控制器中，我们需要创建一个 User 对象的列表，并将其添加到 Model 中，以便 Thymeleaf 模板可以访问。
示例：Spring Boot Controller
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.ArrayList;
import java.util.List;
@Controller
public class UserController {
// 模拟数据存储
private List userList = new ArrayList<>();
public UserController() {
// 初始化一些模拟数据
userList.add(new User(1L, "user1@example.com", "Description for User 1"));
userList.add(new User(2L, "user2@example.com", "Description for User 2"));
userList.add(new User(3L, "user3@example.com", "Description for User 3"));
}
@GetMapping("/users")
public String showUsers(Model model) {
model.addAttribute("users", userList); // 将用户列表添加到模型
return "userList"; // 返回 Thymeleaf 模板名称
}
@PostMapping("/user/delete")
public String deleteUser(@RequestParam("id") Long userId) {
userList.removeIf(user -> user.getId().equals(userId));
// 可以添加日志或重定向到其他页面
return "redirect:/users"; // 删除后重定向回用户列表页面
}
} 在 showUsers 方法中，我们创建了一个 User 对象的 List，并将其命名为 users 添加到 Model 中。Thymeleaf 模板将通过这个名称来访问数据。
4. Thymeleaf 模板实现
现在，我们可以在 Thymeleaf 模板中编写正确的循环逻辑，为每行数据展示信息并提供一个独立的操作按钮。
示例：userList.html
用户列表
用户管理
| ID | 邮箱 | 描述 | 操作 |
|---|---|---|---|
代码解析：
-
th:each="user : ${users}": 这是最关键的一步。我们直接在
标签上使用 th:each 来迭代 Model 中传递过来的 users 列表。每次迭代，user 变量都会代表列表中的一个 User 对象，即表格中的一行数据。 - th:text="${user.id}" 等: 在
内部的 标签中，我们可以直接通过 user.id、user.email 和 user.description 来访问当前 User 对象的属性，从而在对应的单元格中显示数据。 - 操作按钮表单: 在最后一个
中，我们嵌入了一个 - th:text="${user.id}" 等: 在
