扩展 Thymeleaf 模板标签
上一篇我们写到
SpringBoot 依赖之 Thymeleaf
模版引擎的使用，当时只列举了简单文本标签，下面针对多标签进行分析和分享。
Thymeleaf 的模板标签，包括文本显示、属性设置、条件判断、循环迭代、表单处理、片段引用、国际化支持等常用功能。我们尽可能的罗列出平时可能用到的模板标签。
1. 文本和变量
th:text
用于显示变量内容。
<p th:text="${name}">默认文本</p>
th:utext
用于显示未经转义的HTML内容。
<p th:utext="${htmlContent}">默认文本</p>
2. 属性设置
th:href
用于设置链接地址。
<a th:href="@{/home}">首页</a>
th:src
用于设置图片来源。
<img th:src="@{/images/ahauedu.png}" alt="logo">
th:attr
用于设置多个属性。
<a th:attr="href=@{/home}, title=#{home.title}">主页</a>
th:class / th:classappend / th:classprepend
用于设置或追加类名。
<div th:class="${condition} ? 'active' : 'inactive'"></div>
<div th:classappend="${condition} ? 'additional-class' : ''"></div>
<div th:classprepend="${condition} ? 'additional-class' : ''"></div>
3. 条件判断
th:if
用于条件渲染。
<p th:if="${user != null}">Welcome, <span th:text="${user.name}">User</span></p>
th:unless
用于条件渲染（取反）。
<p th:unless="${user != null}">请登录</p>
4. 循环迭代
th:each
用于迭代集合。
<ul>
<li th:each="item : ${items}" th:text="${item.name}">Item Name</li>
</ul>
索引和状态变量
<ul>
<li th:each="item, iterStat : ${items}" th:text="${iterStat.index} + ' - ' + ${item.name}"></li>
</ul>
5. 表单处理
th:action 和 th:object
用于表单的提交和绑定。
<form th:action="@{/submit}" th:object="${user}" method="post">
<input type="text" th:field="*{name}" />
<input type="password" th:field="*{password}" />
<button type="submit">提交</button>
</form>
th:field
用于绑定表单字段。
<input type="text" th:field="*{name}" />
6. 片段引用
th:insert 和 th:replace
用于插入或替换片段。
<div th:insert="~{fragments/header :: header}"></div>
<div th:replace="~{fragments/header :: header}"></div>
th:include
用于包含片段。
<div th:include="~{fragments/header :: header}"></div>
7. URL 参数
th:href
用于设置带有参数的 URL。
<a th:href="@{/user/view(id=${user.id})}">View User</a>
8. 列表选择
th:each 与 th:value 和 th:text 结合使用
<select th:field="*{country}">
<option th:each="country : ${countries}"
th:value="${country.code}"
th:text="${country.name}">
</option>
</select>
9. 属性替换
th:attr
用于替换任意属性。
<img th:attr="src=@{/images/cover.png}, alt=#{cover.alt}"/>
10. 切换属性
th:switch 和 th:case
用于切换显示内容。
<div th:switch="${user.role}">
<p th:case="'admin'">Admin Content</p>
<p th:case="'user'">User Content</p>
<p th:case="*">Default Content</p>
</div>
11. 日期和数字格式化
#dates.format 和 #numbers.formatDecimal
用于格式化日期和数字。
<p th:text="${#dates.format(user.birthDate, 'dd-MM-yyyy')}"></p>
<p th:text="${#numbers.formatDecimal(user.salary, 2, 'POINT', 2, 'COMMA')}"></p>
12. 布尔属性
th:attr
用于设置布尔属性。
<input type="checkbox" th:attr="checked=${item.checked}"/>
示例项目结构
假设我们有一个简单的 Spring Boot 项目，其目录结构如下：
HomeController.java
package com.dependencies.thymeleaf.conroller;
import com.dependencies.thymeleaf.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
/**
* @author zhizhou 2024/7/26 22:33
*/
@Controller
public class HelloController {
@GetMapping("/hello")
public String index(Model model) {
model.addAttribute("name", "Thymeleaf User");
model.addAttribute("home", "http://www.thymeleaf.org");
//<!--#### `th:unless`-->
//<!--用于条件渲染（取反）。-->
model.addAttribute("userinfo", null);
//<!--### 3. 条件判断-->
//<!--#### `th:if`-->
//<!--用于条件渲染。-->
User user = new User();
user.setName("zhizhou");
model.addAttribute("user", user);
//<!--### 4. 循环迭代-->
//<!--`th:each`-->
//<!--用于迭代集合。-->
model.addAttribute("users", Arrays.asList("zhizhou", "zhangsan", "lisi"));
//<!-- 索引和状态变量-->
model.addAttribute("userList", Arrays.asList(user, user, user));
return "hello";
}
}
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf模版引擎示例</title>
</head>
<body>
<!--#### `th:src`-->
<!--用于设置图片来源。-->
<h3>th:src 用于设置图片来源</h3>
<img th:src="@{/images/ahauedu.jpg}" alt="Logo">
<p>-------------------------------------------------</p>
<!--### 1. 文本替换-->
<h3>th:text 文本替换</h3>
<h1 th:text="'Hello, ' + ${name} + '!'">Hello, World!</h1>
<p>-------------------------------------------------</p>
<h3>th:insert 片段引入</h3>
<div th:insert="~{frame :: header}"></div>
<p>-------------------------------------------------</p>
<!--<p th:text="${name}">Default Text</p>-->
<!--### 2. 属性设置-->
<!--#### `th:href`-->
<!--用于设置链接地址。-->
<h3>th:href 用于设置链接地址</h3>
<a th:href="@{/home}">Home</a>
<p>-------------------------------------------------</p>
<!--### 3. 条件判断-->
<!--#### `th:if`-->
<!--用于条件渲染。-->
<h3>th:if 条件判断</h3>
<p th:if="${user != null}">Welcome, <span th:text="${user.name}">用户名</span></p>
<p>-------------------------------------------------</p>
<!--#### `th:unless`-->
<!--用于条件渲染（取反）。-->
<h3>th:unless 用于条件渲染（取反）</h3>
<p th:unless="${userinfo != null}">请登录</p>
<p>-------------------------------------------------</p>
<!--### 4. 循环迭代-->
<!--`th:each`-->
<!--用于迭代集合。-->
<h3>th:each 循环迭代</h3>
<ul>
<li th:each="user : ${users}" th:text="${user}">用户名</li>
</ul>
<p>-------------------------------------------------</p>
<!-- 索引和状态变量-->
<h3>索引和状态变量</h3>
<ul>
<li th:each="user, iterStat : ${userList}" th:text="${iterStat.index} + ' - ' + ${user.name}"></li>
</ul>
<p>-------------------------------------------------</p>
<p th:text="#{welcome.message}">Welcome!</p>
</body>
</html>
frame.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="header">
<h1>外部碎片信息</h1>
</div>
</body>
</html>
通过以上配置和示例，我们可以快速上手并使用 Thymeleaf 模板引擎来构建动态 Web 应用程序。Thymeleaf 提供的丰富标签和功能可以帮助你轻松实现复杂的视图逻辑。如果对你有点点用，请点点你的大拇指
标签：SpringBoot,-------------------------------------------------,Thymeleaf,用于,User,t From： https://blog.csdn.net/ahauedu/article/details/140726576