Thymeleaf 核心语法详解

一、常用标签标签作用示例th:id替换idinput th:id${user.id}/th:text文本替换p text:${user.name}bigsai/pth:utext支持html的文本替换p utext:${htmlcontent}content/pth:object替换对象div th:object${user}/divth:value替换值input th:value${user.name} th:each迭代tr th:eachstudent:${user} th:href替换超链接a th:href{index.html}超链接/ath:src替换资源script typetext/javascript th:src{index.js}/script二、简单表达式表达式名称核心作用适用场景${...}变量表达式直接获取上下文Model/Request中的变量值最常用获取后端传递的普通变量、对象属性*{...}选择变量表达式基于th:object选定的对象访问其内部属性简化对象属性的重复书写配合th:object使用#{...}消息表达式读取国际化i18n配置文件中的文本多语言页面、统一文案管理{...}链接 URL 表达式处理页面链接自动补全项目上下文路径超链接、CSS/JS 引用、表单提交地址~{...}片段表达式引用 / 复用页面中的公共代码片段抽取页眉、页脚、导航栏等公共组件1.${...}变量表达式最常用核心作用直接访问 Spring MVC Model、Request、Session 等上下文中的变量相当于 JSP 的${}。!-- 后端req.setAttribute(username, 张三); -- p th:text${username}/p !-- 渲染为p张三/p -- !-- 访问对象属性 -- !-- 后端req.setAttribute(user, new User(张三, 25)); -- p th:text${user.name}/p !-- 渲染张三 -- p th:text${user.age}/p !-- 渲染25 -- !-- 调用方法、做运算 -- p th:text${#strings.toUpperCase(user.name)}/p !-- 转大写张三 → 张三中文不变 -- p th:text${user.age 1}/p !-- 运算25 → 26 --2.*{...}选择变量表达式核心作用必须配合th:object使用先选定一个根对象后续*{...}直接访问该对象的属性简化代码。!-- 不使用*{...}的写法冗余 -- div th:object${user} p th:text${user.name}/p p th:text${user.age}/p /div !-- 使用*{...}的简化写法推荐 -- div th:object${user} p th:text*{name}/p !-- 等价于${user.name} -- p th:text*{age}/p !-- 等价于${user.age} -- /div !-- 无th:object时等价于${...} -- p th:text*{user.name}/p !-- 效果同${user.name} --3.#{...}消息表达式国际化核心作用读取resources下的国际化配置文件如messages.properties实现多语言切换。1、配置文件messages.propertiesuser.name用户名 user.age年龄2、页面中使用label th:text#{user.name}/label !-- 渲染用户名 -- label th:text#{user.age}/label !-- 渲染年龄 --4.{...}链接 URL 表达式核心作用自动补全项目的上下文路径如/demo避免硬编码支持动态参数拼接。!-- 静态链接自动补全上下文 -- a th:href{/user/list}用户列表/a !-- 项目上下文为/demo时渲染为a href/demo/user/list用户列表/a -- !-- 带参数的动态链接 -- a th:href{/user/detail(id${user.id}, name${user.name})}用户详情/a !-- 渲染为a href/demo/user/detail?id1name张三用户详情/a -- !-- 相对路径、CSS/JS引用 -- link th:href{/css/style.css} relstylesheet script th:src{/js/main.js}/script5.~{...}片段表达式代码复用核心作用抽取页面中的公共片段如页眉、页脚在其他页面中引用减少重复代码。1、定义公共片段footer.htmlfooter th:fragmentcopy p© 2025 我的网站 版权所有/p /footer2、引用片段其他页面!-- 插入片段 -- div th:insert~{footer :: copy}/div !-- 替换片段用片段替换当前标签 -- div th:replace~{footer :: copy}/div !-- 包含片段仅包含不替换标签 -- div th:include~{footer :: copy}/div3、带参数的片段!-- 定义带参片段 -- div th:fragmentheader(title) h1 th:text${title}/h1 /div !-- 传参引用 -- div th:replace~{header :: header(首页)}/divThymeleaf 3.0 引入的片段表达式 (Fragment Expression)核心用于引用、复用页面片段如页眉、页脚、公共组件配合th:insert/th:replace使用。语法格式含义适用场景~{templatename}引入整个模板文件的所有内容快速引入完整页面、布局模板~{templatename :: selector}引入指定模板中匹配选择器的片段跨模板引用公共片段最常用~{::selector}/~{this::selector}引入当前模板内匹配选择器的片段同一页面内复用片段、模块化布局指令行为示例效果th:insert将片段内容插入到当前标签内部保留当前标签当前 div 包裹片段内容th:replace用片段内容替换当前标签删除当前标签片段标签直接替换原 div!-- 原片段 -- p th:fragmentmsgHello Thymeleaf/p !-- th:insert 效果 -- div th:insert~{common :: msg}/div !-- 渲染结果divpHello Thymeleaf/p/div -- !-- th:replace 效果 -- div th:replace~{common :: msg}/div !-- 渲染结果pHello Thymeleaf/p --完整实战步骤 1创建片段文件templates/common/navbar.htmlbody nav th:fragmentnav(userRole) ul lia href/首页Index/a/li li th:if${userRole admin}a href/admin管理后台/a/li lia href/profile个人中心/a/li /ul /nav /body步骤 2在目标页面引用templates/common/my.htmlbody !-- 引入 navbar 片段传递用户角色参数 -- div th:replace~{common/navbar :: nav(${userRole})}/div div classcontainer mainh1页面主体内容/h1/main /div /body后端传递userRole admin时页面会渲染包含 “管理后台” 的导航栏传递userRole user时不显示管理后台入口。