网站建设页头的设计广州网站建设方案维护
目录
引入thymeleaf
thymeleaf常用标签
1. 文本替换
2. 属性替换
3. 条件判断
4. 循环
5. 国际化
6. 片段引用
7. 对象绑定
补充详细版本
在传统的 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> |