Thymeleaf 示例代码
下面是完整代码示例，帮助理解 Thymeleaf 语法和后端代码的配合：
1. 用户实体类 (User.java)
/*** 用户实体类*/
public class User {private Long id; // 用户IDprivate String name; // 用户名private String email; // 邮箱private boolean admin; // 是否是管理员private LocalDate birthDate; // 生日private double balance; // 账户余额// 构造方法public User(Long id, String name, String email, boolean admin, LocalDate birthDate, double balance) {this.id = id;this.name = name;this.email = email;this.admin = admin;this.birthDate = birthDate;this.balance = balance;}// Getter和Setter方法public Long getId() {return id;}public void setId(Long id) {this.id = id;}// ... 其他getter/setter方法省略
}2. 控制器 (UserController.java)
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;@Controller
@RequestMapping("/users")
public class UserController {// 模拟数据库中的用户数据private List<User> users = Arrays.asList(new User(1L, "张三", "zhangsan@example.com", false, LocalDate.of(1990, 5, 15), 1500.50),new User(2L, "李四", "lisi@example.com", true, LocalDate.of(1985, 8, ㅇ20), 2500.75),new User(3L, "王五", "wangwu@example.com", false, LocalDate.of(1995, 3, 10), 1800.00));/*** 显示用户列表页面* @param model 用于向视图传递数据的模型对象* @return 视图名称*/@GetMappingpublic String listUsers(Model model) {// 将用户列表添加到模型中，供Thymeleaf使用model.addAttribute("users", users);// 添加当前日期到模型中model.addAttribute("currentDate", LocalDate.now());// 返回视图名称（对应src/main/resources/templates/user/list.html）return "user/list";}/*** 显示用户详情页面* @param id 用户ID* @param model 模型对象* @return 视图名称*/@GetMapping("/{id}")public String userDetail(@PathVariable Long id, Model model) {// 根据ID查找用户User user = users.stream().filter(u -> u.getId().equals(id)).findFirst().orElse(null);// 将用户对象添加到模型中model.addAttribute("user", user);// 返回用户详情视图return "user/detail";}/*** 显示编辑用户表单* @param id 用户ID* @param model 模型对象* @return 视图名称*/@GetMapping("/{id}/edit")public String editUserForm(@PathVariable Long id, Model model) {// 根据ID查找用户User user = users.stream().filter(u -> u.getId().equals(id)).findFirst().orElse(null);// 将用户对象添加到模型中model.addAttribute("user", user);// 返回编辑表单视图return "user/edit";}/*** 处理编辑表单提交* @param id 用户ID* @param user 表单绑定的用户对象* @return 重定向到用户详情页面*/@PostMapping("/{id}/edit")public String submitEdit(@PathVariable Long id, @ModelAttribute User user) {// 在实际应用中，这里应该更新数据库System.out.println("更新用户: " + user);// 重定向到用户详情页面return "redirect:/users/" + id;}
}3. Thymeleaf 模板示例
用户列表页面 (list.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <!-- 声明Thymeleaf命名空间 -->
<head><meta charset="UTF-8"><title>用户列表</title><!-- 引入Bootstrap CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body><div class="container mt-5"><!-- 页面标题 --><h1>用户列表</h1><!-- 显示当前日期 --><p>当前日期: <span th:text="${#dates.format(currentDate, 'yyyy年MM月dd日')}"><!-- 静态默认值，当Thymeleaf未处理时显示 -->2023-01-01</span></p><!-- 条件判断：如果没有用户数据 --><div th:if="${#lists.isEmpty(users)}" class="alert alert-warning">没有找到用户数据</div><!-- 条件判断：如果有用户数据 --><table class="table table-striped" th:unless="${#lists.isEmpty(users)}"><thead><tr><th>ID</th><th>姓名</th><th>邮箱</th><th>管理员</th><th>余额</th><th>操作</th></tr></thead><tbody><!-- 循环遍历用户列表 --><!-- th:each="user, stat : ${users}" user: 当前迭代的用户对象stat: 迭代状态对象，包含index, count, size等信息--><tr th:each="user, stat : ${users}"><td th:text="${user.id}">1</td><td><!-- 链接表达式：生成动态URL --><a th:href="@{/users/{id}(id=${user.id})}" th:text="${user.name}">姓名</a></td><td th:text="${user.email}">邮箱</td><td><!-- 条件判断：如果是管理员 --><span th:if="${user.admin}" class="badge bg-success">是</span><!-- 条件判断：如果不是管理员 --><span th:unless="${user.admin}" class="badge bg-secondary">否</span></td><td><!-- 数字格式化：将余额格式化为货币形式 --><span th:text="${#numbers.formatCurrency(user.balance)}">$0.00</span></td><td><!-- 编辑按钮 --><a th:href="@{/users/{id}/edit(id=${user.id})}" class="btn btn-sm btn-primary">编辑</a></td></tr></tbody></table></div>
</body>
</html>用户详情页面 (detail.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用户详情</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body><div class="container mt-5"><h1>用户详情</h1><!-- 使用选择表达式：设置上下文对象为user --><div th:object="${user}"><!-- th:object="${user}" 设置当前上下文对象在div内部可以使用 *{...} 代替 ${user...}--><p>ID: <span th:text="*{id}">1</span></p><p>姓名: <span th:text="*{name}">姓名</span></p><p>邮箱: <span th:text="*{email}">邮箱</span></p><p>管理员: <!-- 三元表达式：根据admin值显示"是"或"否" --><span th:text="*{admin} ? '是' : '否'">是/否</span></p><p>生日: <!-- 日期格式化：将日期格式化为指定格式 --><span th:text="${#dates.format(user.birthDate, 'yyyy年MM月dd日')}">1990-01-01</span></p><p>余额: <!-- 数字格式化：将余额格式化为货币形式 --><span th:text="${#numbers.formatCurrency(user.balance)}">$0.00</span></p></div><!-- 返回用户列表的链接 --><a th:href="@{/users}" class="btn btn-secondary">返回列表</a></div>
</body>
</html>编辑用户页面 (edit.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>编辑用户</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body><div class="container mt-5"><h1>编辑用户</h1><!-- 表单绑定：th:action="@{/users/{id}/edit(id=${user.id})}" - 表单提交地址th:object="${user}" - 绑定表单数据到user对象method="post" - 提交方法--><form th:action="@{/users/{id}/edit(id=${user.id})}" th:object="${user}" method="post"><!-- ID字段（只读） --><div class="mb-3"><label class="form-label">ID</label><!-- th:field="*{id}" 绑定到user对象的id属性 --><input type="text" class="form-control" th:field="*{id}" readonly></div><!-- 姓名字段 --><div class="mb-3"><label class="form-label">姓名</label><!-- th:field="*{name}" 绑定到user对象的name属性 --><input type="text" class="form-control" th:field="*{name}"></div><!-- 邮箱字段 --><div class="mb-3"><label class="form-label">邮箱</label><input type="email" class="form-control" th:field="*{email}"></div><!-- 管理员复选框 --><div class="mb-3 form-check"><!-- th:field="*{admin}" 绑定到user对象的admin属性 --><input type="checkbox" class="form-check-input" th:field="*{admin}"><label class="form-check-label">管理员</label></div><!-- 生日字段 --><div class="mb-3"><label class="form-label">生日</label><input type="date" class="form-control" th:field="*{birthDate}"></div><!-- 余额字段 --><div class="mb-3"><label class="form-label">余额</label><input type="number" step="0.01" class="form-control" th:field="*{balance}"></div><!-- 提交按钮 --><button type="submit" class="btn btn-primary">保存</button><!-- 取消按钮（返回用户详情） --><a th:href="@{/users/{id}(id=${user.id})}" class="btn btn-secondary">取消</a></form></div>
</body>
</html>4. 关键注释总结
1. 后端控制器注释
- @Controller：标记类为Spring MVC控制器
- @RequestMapping：映射控制器处理的URL路径
- @GetMapping/@PostMapping：映射HTTP GET/POST请求
- @PathVariable：获取URL路径中的变量
- @ModelAttribute：将表单数据绑定到对象
- Model：用于在控制器和视图之间传递数据
2. Thymeleaf 语法注释
- th:text：设置元素的文本内容
- th:if/th:unless：条件渲染
- th:each：循环迭代
- th:object：设置上下文对象
- th:field：表单字段绑定
- th:href：动态生成链接
- ${...}：变量表达式
- *{...}：选择表达式（在th:object内部使用）
- @{...}：链接表达式
- #dates：日期处理工具
- #numbers：数字处理工具
- #lists：集合处理工具
3. 前端模板注释
- 静态默认值：在Thymeleaf处理前显示的内容
- Bootstrap类：用于页面样式
- 表单绑定：th:object和th:field配合实现数据绑定
- 表达式注释：解释各种Thymeleaf表达式的用途
这些注释详细解释了代码的每个部分如何工作，以及Thymeleaf语法如何与后端Spring Boot控制器配合使用。通过阅读这些注释，可以更好地理解Thymeleaf的核心概念和工作原理。
)
