SpringBoot Thymeleaf 模板标签

ahauedu

已于 2024-07-26 23:27:52 修改

阅读量206

点赞数 2

分类专栏：微服务架构设计文章标签： spring boot java linux

于 2024-07-26 23:24:41 首次发布

本文链接：https://blog.csdn.net/ahauedu/article/details/140726576

版权

微服务架构设计专栏收录该内容

7 篇文章 0 订阅

订阅专栏

扩展 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 提供的丰富标签和功能可以帮助你轻松实现复杂的视图逻辑。如果对你有点点用，请点点你的大拇指👍🏻，是对我最大的鼓励和认可，非常感谢。

ahauedu

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot Thymeleaf 模板标签

Thymeleaf 提供的丰富标签和功能可以帮助你轻松实现复杂的视图逻辑。Thymeleaf 的模板标签，包括文本显示、属性设置、条件判断、循环迭代、表单处理、片段引用、国际化支持等常用功能。我们尽可能的罗列出平时可能用到的模板标签。
复制链接

扫一扫