核心内容摘要
圣诞的甜蜜魔法：跟着饼干姐姐娜娜，解锁属于你的冬日童话！
Thymeleaf 简介Thymeleaf 是一款现代化的服务器端 Java 模板引擎主要用于 Web 开发中渲染 HTML 页面能够无缝集成 Spring Boot 框架。
它的核心优势是支持 HTML 原生语法模板文件可直接在浏览器中打开预览无后端数据时显示默认值与 Spring 生态深度整合是 Spring Boot 推荐的模板引擎支持多种表达式、条件判断、循环遍历等动态渲染能力无静态标签库语法简洁易懂。
环境搭建Spring Boot 整合
依赖引入pom.xmlxmlproject xmlnshttp://maven.apache.org/POM/
4.
0 xmlns:xsihttp://www.w
org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/
4.
0 http://maven.apache.org/xsd/maven-
4.
0.
xsd modelVersion
4.
0/modelVersion parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version
3.
0/version /parent dependencies !-- Spring Web 核心依赖 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- Thymeleaf 核心依赖 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-thymeleaf/artifactId /dependency !-- Lombok可选简化实体类 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies /project
核心配置application.ymlyamlserver: port: 8080 spring: thymeleaf: cache: false # 开发环境关闭缓存修改页面无需重启服务
Thymeleaf 基础语法
命名空间声明所有使用 Thymeleaf 的 HTML 页面需在html标签中声明命名空间否则 Thymeleaf 表达式无法生效html预览html langen xmlns:thhttp://www.thymeleaf.org
变量表达式${}作用从 Spring 容器的 Model 中获取后端传递的数据是最常用的表达式。
示例后端传递数据Controllerjava运行package com.qcby.controller; import com.qcby.model.People; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.Arrays; import java.util.Date; Controller public class IndexController { GetMapping(/basic) public String basic(Model model) { // 构建实体类对象 People people new People(); people.setUsername(renliang); people.setAge(
; people.setSex(
; people.setIsVip(false); people.setBirthday(new Date()); people.setTags(Arrays.asList(PVP,Node,SUC)); // 将数据放入Modelkey为people model.addAttribute(people, people); return basic; // 跳转到templates下的basic.html } }前端渲染basic.htmlhtml预览!-- 直接获取对象属性 -- h2 th:text${people.username}/h2 p th:text${people.age}/p !-- 布尔类型判断 -- p th:if${people.isVip}会员/p
选择变量表达式*{}作用通过th:object指定根对象后简化属性获取无需重复写根对象名。
示例html预览div th:object${people} !-- 等价于 ${people.username} -- h2 th:text*{username}/h2 !-- 等价于 ${people.age} -- p th:text*{age}/p /div
文本替换与拼接1字面量拼接|${}|适用于标题、描述等简单拼接场景html预览!-- 默认标题为默认标题后端传递title则替换为传递的值 -- title th:text|${title}|默认标题/title !-- 也可拼接固定文本 -- title th:text|用户中心 - ${people.username}|用户中心/title2无转义文本th:utextth:text会转义 HTML 标签如h1变为文本th:utext则保留原生 HTML 效果java运行// Controller 传递带HTML标签的文本 model.addAttribute(hello, h1zhangsan/h
;html预览!-- 显示为纯文本h1zhangsan/h1 -- div th:text${hello}/div !-- 显示为H1标题zhangsan -- div th:utext${hello}/div
条件判断th:if /th:unless作用根据条件动态渲染元素th:if满足条件显示th:unless满足条件隐藏与th:if相反。
示例html预览!-- 基础条件判断 -- a th:href th:if${user.getAge() 2} 年龄等于2时显示/a !-- 多条件组合and/or/not -- p th:if${user.score 60 and user.score 85}B/p p th:if${user.score 60}C/p p th:if${user.score 85}优秀/p !-- th:unless 示例age不等于2时显示 -- a th:href th:unless${user.getAge() 2} 年龄不等于2时显示/a
分支选择th:switch /th:case作用类似 Java 的switch-case实现多分支条件渲染th:case*表示默认分支。
示例html预览!-- 性别判断1男2女其他默认 -- div th:switch${people.sex} p th:
男/p p th:
女/p p th:case*默认/p /div !-- 简化版无默认分支 -- span th:switch${user.gender} p th:
男/p p th:
女/p /span
循环遍历th:each作用遍历集合List / 数组等渲染列表、表格等重复元素支持获取循环状态索引、是否第一个 / 最后一个等。
基础示例遍历列表java运行// Controller 传递用户列表 ListUser uList new ArrayList(); for (int i 0; i 10; i){ User u new User(); u.setUsername(renliangi); u.setPassword(111i); uList.add(u); } model.addAttribute(uList, uList);html预览!-- 遍历uLista为每个元素aState为循环状态对象 -- table tr th:eacha,aState:${uList} td th:text${a.username}/td !-- 用户名 -- td th:text${a.password}/td !-- 密码 -- td th:text${aState.index}/td !-- 循环索引从0开始 -- /tr /table循环状态对象常用属性属性说明index索引从 0 开始count计数从 1 开始size集合总长度first是否为第一个元素booleanlast是否为最后一个元素booleaneven/odd是否为偶数 / 奇数索引boolean
动态属性th:attr / 直接绑定作用动态设置 HTML 标签的属性如 class、href、value 等推荐直接使用th:属性名方式更简洁。
示例html预览!-- 动态设置input的value属性 -- input th:value${user.getUsername()} !-- 动态设置class三元表达式 -- a th:class${user.getAge() 2}?class1:class2 年龄/a !-- 动态设置href拼接URL -- a th:href{/user/detail(id${user.id})}用户详情/a
核心
注意事项缓存配置开发环境务必关闭 Thymeleaf 缓存spring.thymeleaf.cachefalse否则修改页面后需重启服务才能生效生产环境建议开启缓存提升性能。
表达式语法调用对象方法时需注意参数和返回值如user.getAge()而非user.age()因 Lombok 生成的 getter 方法是getAge()布尔类型判断直接使用${对象.布尔属性}如${people.isVip}无需加 true。
模板位置Spring Boot 中 Thymeleaf 模板默认放在src/main/resources/templates目录下Controller 返回的字符串直接对应模板文件名无需加.html。
命名空间必须在html标签声明xmlns:thhttp://www.thymeleaf.org否则 Thymeleaf 表达式不会被解析。
完整示例流程编写实体类如 People、User使用 Lombok 的Data简化 getter/setter编写 Controller通过Model传递数据到模板编写 Thymeleaf 模板使用上述语法渲染数据启动 Spring Boot 应用访问对应接口如/basic、/success查看渲染效果。
例如访问http://localhost:8080/basic可看到 People 对象的用户名、年龄、标签列表等数据被动态渲染到页面中访问http://localhost:8080/success可看到用户列表、条件判断、动态属性等效果。