全部栏目

首页 操作系统 后端开发 数据库 前端开发 移动端开发
您的当前位置：首页正文

Spring boot使用Thymeleaf模板引擎技术使用详解-注意事项-使用场景

2024-11-29 来源：个人技术集锦

1.简介

​ Thymeleaf是一种现代化的服务器端Java模板引擎，可用于将模板文件转换成HTML、XML、JavaScript、CSS等文本格式。它可以为Java Web开发带来更加友好舒适的编码体验，同时也有很好的可扩展性和高可用性。Thymeleaf 可以轻松集成到Spring Framework 中，为开发人员提供了更加便利的开发体验。相对于其他模板引擎，Thymeleaf 是一款优秀的选择，并且在近年来得到了越来越广泛的使用。

2. 快速开始

Thymeleaf 的使用可以分为以下几个步骤：

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

  1. 创建 Thymeleaf 模板：Thymeleaf 模板可以是 HTML、XML 或者其他文本格式。模板中可以使用 Thymeleaf 提供的标签、属性等功能。

  2. 集成 Thymeleaf：在 Spring Boot 中，可以在 application.properties 文件中配置 Thymeleaf 就可以使用了。在配置文件中添加以下配置：

# 打开 Thymeleaf 的缓存模式
spring.thymeleaf.cache=true
# 模板文件的根目录
spring.thymeleaf.prefix=classpath:/templates/
# 模板文件的后缀
spring.thymeleaf.suffix=.html
# 模板文件的字符编码
spring.thymeleaf.encoding=UTF-8
  1. 在 Java 代码中使用 Thymeleaf：在 Java 代码中，可以使用 Thymeleaf 提供的 API 加载模板，填充数据并生成最终的 HTML 等文本格式。比如可以在 Spring MVC Controller 中使用 Thymeleaf 来渲染模板：
@Controller
public class MyController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("name", "world");
        return "hello";
    }
}
  1. 在 Thymeleaf 模板中使用表达式：在 Thymeleaf 模板中，可以使用 Thymeleaf 提供的表达式来访问数据。表达式可以用来展示变量、控制流、循环等操作。比如，在 hello.html 模板中使用表达式来显示数据：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, [[${name}]]!</h1>
</body>
</html>

其中，[[${name}]] 使用表达式来访问数据，name 是 hello 方法中所添加的模型数据。最终渲染出的页面为：

Hello, world!

3.详细介绍

3.1 Thymeleaf 表达式

hymeleaf 提供了简洁易用的表达式语言，可以用来访问模型中的数据、迭代集合、控制条件等。

Thymeleaf 的表达式语言可以使用 ${} 和 #{} 两种方式来表示。

  1. ${} 表示表达式中的值会被输出到 HTML 中：

    <p>Name: ${user.name}</p>

  2. #{} 表示表达式中的值不会输出到 HTML 中，但是可以用于一些特殊的操作：

    <div th:attr="data-id=#{user.id}">User Info</div>

在表达式中可以访问对象的属性，也可以执行方法，比如：

<p th:text="${user.getName()}">User Name</p>

表达式还支持一些运算符和条件语句，比如：

<p th:text="${user.age gt 18 ? 'Adult' : 'Minor'}">User Age</p>

这个例子中，如果 user.age 大于 18，则输出 “Adult”，否则输出 “Minor”。

表达式还支持使用 null 安全符号 ?，比如：

<p th:text="${user?.name}">User Name</p>

这个例子中，如果 user 对象为 null，则不会出现空指针异常，输出为空。

总之，Thymeleaf 的表达式语言是一种十分强大和灵活的语言，可以用来访问服务器端数据、控制模板的渲染等各种操作。在使用 Thymeleaf 开发 Web 应用程序时，可以充分利用这种语言，提高开发效率。

3.2 Thymeleaf 标签

thymeleaf 提供了一些标签，比如 th:if 和 th:each，可以用来控制模板中的显示和隐藏、迭代集合等操作。

Thymeleaf 中的标签主要分为两类：标准标签和扩展标签。标准标签用于基本的页面渲染和数据绑定，而扩展标签提供了一些额外的功能，比如循环和条件判断等。

  1. 标准标签

    1.1 th:text：用于将表达式的值插入到模板中，替换原来的文本内容。

    <p th:text="${user.name}">User Name</p>

    1.2 th:attr：用于设置 HTML 元素的属性值。

    <div th:attr="data-id=${user.id}"></div>

    1.3 th:each：用于循环遍历集合，重复渲染相同的 HTML 块。

    <ul>
    <li th:each="item : ${items}" th:text="${item.name}"></li>
</ul>

    1.4 th:if 和 th:unless：用于条件判断，控制页面渲染。

    <div th:if="${user.isAdmin()}">Admin</div>
<div th:unless="${user.isAdmin()}">Not Admin</div>

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

  2. 扩展标签

    2.1 th:switch 和 th:case：用于多分支判断，类似于 Java 中的 switch 语句。

    <th:block th:switch="${user.role}">
    <th:block th:case="'ADMIN'">Admin</th:block>
    <th:block th:case="'USER'">User</th:block>
    <th:block th:case="*">Other</th:block>
</th:block>

    2.2 th:with：用于定义变量，可以在后面的表达式中使用。

    <th:block th:with="price=${product.price * 0.9}">
    <p th:text="${price}"></p>
</th:block>

    2.3 th:inline：将表达式的值嵌入到 HTML 中。

    <p th:inline="text">Hello, [[${user.name}]]!</p>

    2.4 th:fragment 和 th:include：用于将模板片段进行重用。

    <th:block th:fragment="header">Page Header</th:block>
<div th:include="fragments/layout :: header"></div>

总之，Thymeleaf 提供了丰富的标签和功能，可以用来实现各种复杂的页面渲染和数据绑定需求。在开发过程中，熟悉和掌握这些标签和功能是非常有帮助的。

3.3 Thymeleaf 可执行的标记

Thymeleaf 中有一些特殊的标记，比如 th:text 和 th:src，可以将数据或者资源文件填充到 HTML 元素中，实现模板渲染。

下面对 Thymeleaf 可执行的标记进行详细讲解：

  1. th:text：用于设置元素的文本内容，可用于输出动态内容。例如：

    <span th:text="${user.name}">Name</span>

    上面的代码会将 user 对象的 name 属性的值输出到 <span> 元素中。

  2. th:utext：用于设置元素的不转义文本内容，可用于输出 HTML 标签。例如：

    <span th:utext="${user.description}">Description</span>

    如果 user 对象的 description 属性的值是含有 HTML 标签的字符串，使用 th:text 会将 HTML 标签转义，而使用 th:utext 则不会进行转义，直接输出 HTML 标签。

  3. th:if：用于控制元素的显示与隐藏，类似于 JavaScript 中的 if 语句。例如：

    <div th:if="${user.age >= 18}">Adult</div>
<div th:if="${user.age < 18}">Minor</div>

    上面的代码会根据 user 对象的 age 属性的值，只显示符合条件的 <div> 元素。

  4. th:switch、th:case、th:default：用于实现 switch 语句的功能，根据不同的条件展示不同的内容。例如：

    <div th:switch="${user.gender}">
    <p th:case="'M'">Male</p>
    <p th:case="'F'">Female</p>
    <p th:default>Unknown</p>
</div>

    上面的代码会根据 user 对象的 gender 属性的值，显示相应的 <p> 元素。

  5. th:each：用于实现循环遍历，类似于 Java 中的 foreach 循环。例如：

    <ul>
    <li th:each="book : ${books}" th:text="${book.title}">Book Title</li>
</ul>

    上面的代码会遍历 books 列表中的每个元素，将每个元素的 title 属性的值输出为一个列表项。

  6. <a th:href="@{/user/{id}/profile(id=${user.id})}">Profile</a>
<img th:src="@{${user.avatarUrl}}"/>
<form th:action="@{/user/save}" method="post"></form>

  7. th:attr：用于设置元素的属性。例如：

    <button th:attr="data-id=${user.id}">Edit</button>

    上面的代码会设置 <button> 元素的 data-id 属性为 user 对象的 id 属性的值。

  8. th:class、th:id、th:style：用于设置元素的 class、id 和样式等属性。例如：

    <div th:class="${user.gender} == 'M' ? 'male' : 'female'"></div>
<form th:id="'form-' + ${user.id}"></form>
<p th:style="'color:' + ${user.color} + ';font-size:' + ${user.fontSize} + 'px;'"></p>

    上面的代码会根据 user 对象的属性设置元素的 class、id 和样式等属性。

  9. th:object：用于设置当前表单对象的属性，可以简化表单对象的访问。例如：

    <form th:object="${user}" method="post">
    <input type="text" th:field="*{name}"/>
    <input type="text" th:field="*{age}"/>
</form>

    上面的代码会将 user 对象作为表单对象，并设置两个文本框分别绑定到 name 和 age 属性。

  10. th:fragment：用于定义页面代码片段，可以在其他页面中进行引用和复用。例如：

    <html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div th:fragment="header">
            <h1>Header</h1>
            <p>Description</p>
        </div>
        <div th:fragment="content">
            ...
        </div>
        <div th:fragment="footer">
            <p>Footer</p>
        </div>
    </body>
</html>

    上面的代码定义了三个页面片段，可以在其他页面中通过 th:replace 或 th:insert 引用和复用。

3.4 Thymeleaf 布局

Thymeleaf 提供了布局功能，可以将一些常用的 HTML 片段抽象成布局，然后在模板中引用。

Thymeleaf 布局使用一般采用模版继承的方式，比较常用的模版继承的方式有两种：th:replace 和 th:insert。

下面就具体讲解一下 Thymeleaf 布局的使用。

  1. 创建模板布局

首先需要创建一个模板布局，定义网页的公共部分，通常包括头部、尾部和主要内容区域。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${title}">Page Title</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
    <header>
        <h1>Header</h1>
        <nav>
            <ul>
                <li><a th:href="@{/}">Home</a></li>
                <li><a th:href="@{/about}">About</a></li>
                <li><a th:href="@{/contact}">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section th:fragment="content">
            <h2>Page Content</h2>
            <p>Page Description</p>
        </section>
    </main>
    <footer>
        <p th:text="${footer}">Footer</p>
    </footer>
</body>
</html>

上面的代码定义了一个模板布局，包括头部、尾部和主要内容区域，其中主要内容区域使用了 Thymeleaf 的片段标记 th:fragment。

  1. 定义页面模版

接下来定义一个页面模版，继承上面的模板布局，并覆盖主要内容区域 th:fragment 的内容。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout :: layout(~{::content}, 'Page Title')">
<head>
    <title>Page Title</title>
</head>
<body>
    <section th:fragment="content">
        <h2>About Us</h2>
        <p>About Us Description</p>
    </section>
</body>
</html>

上面的代码定义了一个页面模版，使用了 th:replace 标记继承上面的模板布局，同时覆盖了主要内容区域 th:fragment 的内容。

  1. 渲染页面

最后，在控制器中通过 Thymeleaf 引擎渲染页面。例如：

@GetMapping("/about")
public String about(Model model) {
    model.addAttribute("title", "About Us");
    model.addAttribute("footer", "Copyright");
    return "about";
}

上面的代码使用了 Model 对象将数据传递到页面模版中，并返回模版名称 "about"。Thymeleaf 引擎会根据模版名称 "about" 查找对应的视图文件，渲染出最终的 HTML 页面。

通过上面的步骤，就可以使用 Thymeleaf 实现网页布局的公共部分复用，并且可以自定义覆盖公共部分的内容。

3.5 Thymeleaf 预处理器

Thymeleaf 支持一些预处理器，比如文本缩减器、XML 命名空间处理器、DTD 处理器等，可以让模板更加简洁易懂。

Thymeleaf 预处理器是用来处理特殊语法的，这些特殊语法不是传统的 HTML 标签，而是以 th: 开头的属性或指令。这些属性或指令会在页面渲染前被 Thymeleaf 引擎解析并执行，最终生成有效的 HTML 代码。

下面对 Thymeleaf 常用的预处理器进行详细讲解。

  1. 变量表达式

Thymeleaf 变量表达式以 ${} 开头，用于在 HTML 标签中输出数据。例如：

<p>Welcome, <span th:text="${user.name}">User</span>!</p>

上面的代码中，${user.name} 表示输出 user 对象的 name 属性值。

  1. 选择表达式

Thymeleaf 选择表达式以 *{} 开头，用于在表单控件中绑定数据。例如：

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

上面的代码中，*{user.username} 表示将 user 对象的 username 属性值绑定到表单控件的 value 属性上。

  1. URL 表达式
<a th:href="@{/user/details(id=${user.id})}">User Details</a>
  1. 消息表达式

Thymeleaf 消息表达式以 #{} 开头，用于国际化处理。例如：

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

上面的代码中，#{welcome.message} 表示输出国际化消息资源文件中的 welcome.message 属性值。

  1. 片段表达式

Thymeleaf 片段表达式以 ~{} 开头，用于引用片段模版。例如：

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

上面的代码中，~{common/fragment :: header} 表示将名为 common/fragment 的片段模版中 header 片段的内容插入到当前位置。

  1. 布尔表达式

Thymeleaf 布尔表达式以 th:if 和 th:unless 开头，用于条件判断。例如：

<div th:if="${user.isAdmin}">Admin</div>
<div th:unless="${user.isAdmin}">Normal User</div>

上面的代码中，th:if 表示条件成立的情况下输出该标签内容，th:unless 表示条件不成立的情况下输出该标签内容。

以上就是 Thymeleaf 常用的预处理器，它们能够极大地简化 HTML 页面的开发工作，提高开发效率。

3.6 Thymeleaf 实用工具

Thymeleaf 提供了一些实用工具，比如日期格式化、字符串处理、国际化等，可以让模板更加灵活和便捷。

Thymeleaf 提供了一些实用工具，可以帮助开发者更方便地操作数据和生成 HTML 页面。下面对这些工具进行详细讲解。

  1. 变量处理工具

Thymeleaf 提供了一个 VariableExpressionUtils 工具类，可以方便地获取变量表达式的值。例如：

Object value = VariableExpressionUtils.evaluate("user.name", model);

上面的代码中，model 是包含 user 对象的模型数据，VariableExpressionUtils.evaluate 方法会返回 user.name 表达式的值。

  1. 集合处理工具

Thymeleaf 提供了一个 IterationUtils 工具类，可以方便地进行集合遍历和分页。例如：

List<User> userList = new ArrayList<>();
/* 添加用户数据 */
int currentPage = 1;
int pageSize = 10;
List<User> pageList = IterationUtils.subList(userList, currentPage, pageSize);

上面的代码中，IterationUtils.subList 方法可以将集合按指定的分页参数进行切分，返回指定页码的数据列表。

  1. URL 处理工具
String url = LinkExpressionUtil.getLink(context, "/user/details", "id", user.getId(), "name", user.getName());
  1. 字符串处理工具

Thymeleaf 提供了一个 StringUtils 工具类，可以方便地进行字符串操作。例如：

String result = StringUtils.substring("hello world", 0, 5);

上面的代码中，StringUtils.substring 方法可以截取字符串的一部分，返回结果为 hello。

  1. 安全处理工具

Thymeleaf 提供了一个 SafeString 类，可以方便地处理 HTML 特殊字符和 XSS 攻击。例如：

String username = "<script>alert('xss');</script>";
SafeString safeUsername = new SafeString(username);
String html = "<p>Welcome, " + safeUsername + "</p>";

上面的代码中，SafeString 类可以将字符串中的 HTML 特殊字符进行转义，防止 XSS 攻击。

以上就是 Thymeleaf 提供的一些实用工具，它们可以帮助开发者更方便地操作数据和生成 HTML 页面。在实际开发中，可以根据需求选择适合的工具进行使用。

4. 注意事项

在使用 Thymeleaf 进行开发时，需要注意以下几点：

  1. Thymeleaf 仅适用于服务器端（后端）渲染，不支持客户端（前端）渲染。

  2. 在使用 Thymeleaf 时，需要引入相应的 Thymeleaf 包和相关依赖，否则会出现找不到相应的类或方法等问题。

  3. Thymeleaf 中的表达式不能跨级访问。例如，<div th:text="${user.address.city}"></div> 这种方式是不支持的，需要分别使用 user 和 address 表达式来获取数据。

  4. Thymeleaf 中的注释需要使用 <!--/* comment */--> 的方式进行注释，不能使用 // 或 /* */ 的方式。

  6. 在使用 Thymeleaf 中的条件表达式时，需要使用 th:if 或 th:unless 标签来判断逻辑条件，而不能使用普通的 if 或者三目运算符等方式。

  7. 在使用 Thymeleaf 的模板布局时，需要注意使用 th:fragment 和 th:insert 标签，以及指定相应的布局文件名称等。详细使用方法可以参考官方文档。

总之，在使用 Thymeleaf 进行开发时，需要仔细阅读相关文档和 API，遵循 Thymeleaf 的规范和约定，以免出现不必要的错误。

5. 使用场景

Thymeleaf 是一种服务器端的 Java 模板引擎，主要用于与 Spring 框架配合使用，生成 HTML、XML、JavaScript、CSS 等动态内容。它的主要使用场景如下：

  1. 服务器端渲染：Thymeleaf 适用于服务器端渲染，通过在后端生成 HTML 内容，再传递到前端进行渲染。这种方式可以有效地减少前后端的交互次数，提高网站性能。

  2. Web 开发：Thymeleaf 可以用来生成 Web 页面，包括表单、列表、分页等常见页面元素。它支持 HTML5、CSS3 和 JavaScript 特性，可以很方便地实现常见的界面效果和交互逻辑。

  3. 邮件模板：Thymeleaf 支持生成邮件模板，可以用来发送带有格式化样式的邮件，同时也可以支持动态数据的插入。

  4. PDF 生成：Thymeleaf 可以与 Apache FOP 等 PDF 生成工具配合使用，生成 PDF 格式的文件。

因此，如果你正在使用 Spring 框架进行 Web 应用程序开发，并且需要使用 Java 模板引擎来生成前端页面，那么 Thymeleaf 是一个非常好的选择。
显示全文