整合Thymeleaf

原创于 2025-03-17 17:06:11 发布 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring boot #Thymeleaf #thymeleaf #html

SpringBoot 专栏收录该内容

18 篇文章

订阅专栏

在传统的 Web 开发模式下，服务器端负责生成完整的 HTML 页面并返回给客户端。而Thymeleaf 可以方便地将 Java 对象中的数据动态填充到 HTML 模板中，实现页面的动态渲染，实现前后端不分离开发。

下面从SpringBoot项目整合引入thymeleaf和Thymeleaf的常用标签进行讲解。

引入thymeleaf

在pom.xml中导入依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

SpringBoot项目中不必再额外配置视图的前缀和后缀，因为项目里自配有ThymeleafProperties类，里面有默认的路径（如下）：

默认情况下：我们使用html作为模板，而且默认的前缀是放在classpath:/templates/下，后缀是.html。

如果想要修改的话，可以在配置文件application.properties/.yml中重新声明：

在前端html中使用thymeleaf时不要忘了添加声明：

<html lang="en" xmlns:th="http://www.thymeleaf.org">

就像这样：

thymeleaf常用标签

1. 文本替换

①th:text：用于替换标签内的文本内容，支持表达式。

<p th:text="${message}">Default Text</p>

在 HTML 中，标签的文本内容是静态的，对应就是：
<p>Default Text</p>
如果 ${message} 的值是 "Hello, World!"，那么渲染后的 HTML 将是：
<p>Hello, World!</p>

②th:utext：用于替换标签内的文本内容，但不会转义特殊字符。

<div th:utext="'<h1>Hello</h1>'">Default</div>

由于在 HTML 中，如果直接插入 < 或 > 等特殊字符，会被当作普通文本显示。
但是使用 th:utext，就可以插入 HTML 标签：
<div><h1>Hello</h1></div>

2. 属性替换

①th:value：用于替换 HTML 标签的 value 属性。

<input type="text" th:value="${user.name}" />

对应 HTML 中的 value 属性，在 HTML 中，表单控件的值是固定的，例如：
<input type="text" value="Default Value" />
使用 th:value，可以动态设置值：
<input type="text" th:value="${user.name}" />
如果 ${user.name} 是 "John"，（当链接后端代码时，这里就支持前后端数据动态更新了）渲染后的 HTML 是：
<input type="text" value="John" />

②th:href：用于替换 href 属性，常用于动态生成链接。

<a th:href="@{/user/details(id=${user.id})}">User Details</a>

同理，动态生成链接，具体是什么链接取决于后端返回值。

例如：如果 ${user.id} 是 123，渲染后的 HTML 是：
<a href="/user/details?id=123">User Details</a>

③th:src：用于替换 src 属性。

<img th:src="@{/images/logo.png}" />

同理，动态设置资源路径（和前面一样，这里不做过多赘述。）

3. 条件判断

①th:if：根据条件判断是否渲染某个标签。

<div th:if="${user != null}">User is logged in</div>

这个标签对应 HTML 中的 条件渲染逻辑，在纯 HTML 中，无法根据条件动态渲染内容。
使用 th:if，可以根据条件判断是否渲染某个标签：
<div th:if="${user != null}">User is logged in</div>
如果 ${user} 不为 null，则渲染：
<div>User is logged in</div>
否则，整个 <div> 标签会被移除。

②th:unless：与 th:if 相反，当条件为 false 时渲染。

<div th:unless="${user == null}">User is logged in</div>

和①逻辑相反，这里不再演示。

4. 循环

th:each：用于循环渲染标签。

<tr th:each="item : ${items}">
    <td th:text="${item.name}"></td>
    <td th:text="${item.price}"></td>
</tr>

对应 HTML 中的 重复渲染逻辑，在纯 HTML 中，无法动态生成重复的元素。
使用 th:each，可以循环渲染标签：
<tr th:each="item : ${items}">
    <td th:text="${item.name}"></td>
    <td th:text="${item.price}"></td>
</tr>
如果 ${items} 是一个包含多个对象的列表，例如：
List<Item> items = Arrays.asList(
    new Item("Apple", 10),
    new Item("Banana", 5)
);
渲染后的 HTML 是：
<tr>
    <td>Apple</td>
    <td>10</td>
</tr>
<tr>
    <td>Banana</td>
    <td>5</td>
</tr>

5. 国际化

#{...}：用于国际化消息的表达式。

<p th:text="#{welcome.message}">Welcome</p>

在纯 HTML 中，文本是固定的，无法根据语言动态切换。
使用 #{...}，可以实现国际化：
<p th:text="#{welcome.message}">Welcome</p>
如果当前语言是中文，#{welcome.message} 的值可能是 "欢迎"，渲染后的 HTML 是：
<p>欢迎</p>

6. 片段引用

th:insert 和 th:replace：用于插入或替换模板片段。

<div th:insert="~{common/header :: header}"></div>

语法格式一般是 th:insert="~{模板文件路径 :: 片段名称}"，进行片段引用。

假设 common/header.html 中的 header 片段是：
<header>Common Header</header>
渲染后的 HTML 是：
<div><header>Common Header</header></div>

7. 对象绑定

th:object：用于绑定对象到标签，子标签可以通过选择表达式访问对象属性。

<div th:object="${user}">
    <p th:text="*{name}">Name</p>
</div>

如果 ${user} 是一个对象，user.name 的值是 "John"，渲染后的 HTML 是：
<div>
    <p>John</p>
</div>

补充详细版本

关键字	功能介绍	案例	对应HTML中的什么	对应HTML中的什么案例
th:id	替换 `id` 属性	`<input th:id="'xxx' + ${collect.id}" />`	替换 HTML 标签的 `id` 属性值	`<input id="xxx123" />`
th:text	文本替换	`<p th:text="${collect.description}">description</p>`	替换 HTML 标签内的文本内容	`<p>Dynamic Description</p>`
th:utext	支持 HTML 的文本替换	`<p th:utext="${htmlcontent}">content</p>`	替换 HTML 标签内的文本内容（支持 HTML 标签，不转义）	`<p><strong>Dynamic</strong> Content</p>`
th:object	替换对象	`<div th:object="${session.user}">`	绑定对象到 HTML 标签，用于子标签访问对象属性	`<div><p th:text="${user.name}">Username</p></div>`
th:value	属性赋值	`<input th:value="${user.name}" />`	替换 HTML 标签的 `value` 属性值	`<input type="text" value="John Doe" />`
th:onclick	点击事件	`<button th:onclick="'getCollect()'" >Click</button>`	设置 HTML 标签的 `onclick` 事件属性	`<button onclick="getCollect()">Click</button>`
th:each	循环渲染	`<tr th:each="user,userStat:${users}">`	循环渲染 HTML 标签，动态生成多个相似的 HTML 元素	`<tr><td>John</td></tr><tr><td>Jane</td></tr>`
th:if	判断条件	`<a th:if="${userId == collect.userId}">Link</a>`	根据条件动态决定是否渲染某个 HTML 标签	`<a href="/link">Link</a>`（条件为真时）
th:unless	和 `th:if` 判断相反	`<a th:href="@{/login}" th:unless="${session.user != null}">Login</a>`	根据条件动态决定是否渲染某个 HTML 标签（与 `th:if` 相反）	`<a href="/login">Login</a>`（条件为假时）
th:href	链接地址	`<a th:href="@{/login}">Login</a>`	替换 HTML 标签的 `href` 属性值	`<a href="/login">Login</a>`
th:switch	多路选择，配合 `th:case` 使用	`<div th:switch="${user.role}">`	多路选择逻辑，类似于编程语言中的 `switch-case` 结构	`<div>...</div>`（根据条件动态渲染分支内容）
th:case	`th:switch` 的一个分支	`<p th:case="'admin'">User is an administrator</p>`	`th:switch` 的分支，类似于 `case` 分支	`<p>User is an administrator</p>`（当角色为 `admin` 时）
th:fragment	布局标签，定义代码片段	`<div th:fragment="alert">`	定义可复用的 HTML 模板片段	`<div id="alert">Alert Content</div>`
th:include	布局标签，替换内容到引入的文件	`<head th:include="layout :: htmlhead" th:with="title='xx'"></head>`	将指定的 HTML 片段内容插入到当前标签中	`<head><title>xx</title>...</head>`
th:replace	布局标签，替换整个标签到引入的文件	`<div th:replace="fragments/header :: title"></div>`	将当前标签替换为指定的 HTML 片段内容	`<div>Header Title</div>`
th:selected	选择框选中状态	`<option th:selected="(${xxx.id} == ${configObj.dd})">Option</option>`	设置 HTML `<option>` 标签的 `selected` 属性，用于表单选择框	`<option selected="selected">Option</option>`
th:src	图片或资源地址引入	`<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />`	替换 HTML 标签的 `src` 属性值，用于图片或其他资源	`<img src="/img/logo.png" alt="App Logo" />`
th:action	表单提交的地址	`<form action="subscribe.html" th:action="@{/subscribe}">`	替换 HTML `<form>` 标签的 `action` 属性值，用于表单提交地址	`<form action="/subscribe" method="post">...</form>`
th:for	表单字段绑定（与 Spring 表单绑定）	`<label th:for="${user.name}">Name</label>`	设置 HTML `<label>` 标签的 `for` 属性值，用于表单字段绑定	`<label for="name">Name</label>`
th:style	动态样式	`<div th:style="'color: ' + ${user.color}">Text</div>`	动态设置 HTML 标签的 `style` 属性值	`<div style="color: red;">Text</div>`
th:attr	动态设置其他属性	`<input th:attr="placeholder=${placeholderText}">`	动态设置 HTML 标签的其他属性值（如 `placeholder`）	`<input type="text" placeholder="Enter text here">`
th:with	定义局部变量	`<div th:with="total=${user.count + 1}">Total: <span th:text="${total}"></span></div>`	在模板中定义局部变量，用于简化表达式	`<div>Total: <span>5</span></div>`（假设 `user.count` 为 4）
th:remove	移除标签或内容	`<div th:remove="tag">This tag will be removed</div>`	移除整个 HTML 标签或标签内的内容，用于模板开发时隐藏某些部分	（最终不会渲染该标签）
th:inline	定义内联脚本可使用变量	`<script th:inline="javascript">...</script>`	允许在内联 JavaScript 中使用 Thymeleaf 表达式	`<script>var name = /[[${user.name}]]/;</script>`