SpringBoot整合Thymeleaf快速入门

九转成圣

已于 2024-06-01 18:07:51 修改

阅读量1.5k

点赞数 2

文章标签： spring boot 后端 java

于 2024-03-16 08:59:44 首次发布

本文链接：https://blog.csdn.net/weixin_41883161/article/details/136504911

版权

构建现代Web应用程序时，选择一个强大且灵活的模板引擎至关重要。Thymeleaf 是一个流行的Java模板引擎，提供了丰富的功能和简洁的语法，使开发者能够轻松地创建动态Web页面。本文将详细介绍如何在Spring Boot应用程序中整合Thymeleaf，并展示其基本用法及一些高级功能。

1. 添加Thymeleaf依赖

首先，您需要在项目的构建配置文件中添加Thymeleaf的依赖项。对于Maven项目，您可以在pom.xml文件中添加以下依赖：

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

对于Gradle项目，您可以在build.gradle文件中添加相应的依赖：

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2. 配置Thymeleaf

在Spring Boot中，Thymeleaf的配置通常是自动化的，Spring Boot Starter会自动配置大部分设置。不过，您也可以在application.properties或application.yml文件中进行自定义配置。例如，您可以指定模板位置、启用或禁用缓存等：

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

3. 创建Thymeleaf控制器

接下来，您需要创建一个Spring MVC控制器，用于处理Web请求并返回Thymeleaf模板。在控制器中，您可以使用Model对象来向模板传递数据。

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloThymeleafController {

    // 假设的文章内容，实际应用中可能会从数据库或外部API获取
    private static final String ARTICLE_CONTENT = "这里是您的文章内容，可以包含多个段落和格式化的文本。";

    @RequestMapping("/hello")
    public String hello(Model model){
        model.addAttribute("hello", "欢迎来到Thymeleaf入门页面");
        model.addAttribute("articleContent", ARTICLE_CONTENT); // 添加文章内容到模型
        // 找classpath:/templates/hello.html
        return "hello";
    }
}

在上面的示例中，我们创建了一个名为HelloThymeleafController的控制器，并定义了一个处理/hello请求的hello方法。该方法将“欢迎来到Thymeleaf入门页面”和文章内容添加到模型中，并返回名为hello的Thymeleaf模板。

4. 创建Thymeleaf模板

接下来，您需要创建一个Thymeleaf模板来展示数据。在Spring Boot中，模板文件通常位于src/main/resources/templates目录下。以下是一个简单的Thymeleaf模板示例：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf的入门</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!-- 输出hello数据 -->
    <h1 th:text="${hello}"></h1>

    <!-- 输出文章内容 -->
    <h2>文章内容</h2>
    <p th:utext="${articleContent}"></p> <!-- 使用th:utext来避免HTML实体转义 -->

    <!-- 这里可以添加更多的HTML结构和内容，比如相关链接、图片等 -->
</body>
</html>

在上面的示例中，我们创建了一个名为hello.html的Thymeleaf模板。该模板使用Thymeleaf的表达式语法来访问和展示从控制器传递过来的数据。通过${hello}和${articleContent}表达式，我们可以将模型中的数据插入到HTML模板中。

5. 深入Thymeleaf的功能

Thymeleaf不仅仅支持简单的数据绑定，它还提供了许多强大的功能，使得开发更为高效和灵活。

5.1 条件渲染

使用Thymeleaf，可以根据条件来显示或隐藏HTML元素。例如：

<p th:if="${user != null}" th:text="${user.name}">用户名称</p>
<p th:unless="${user != null}">用户未登录</p>

5.2 循环遍历

Thymeleaf支持遍历集合，以便动态生成列表或表格。例如：

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

5.3 URL构建

可以使用Thymeleaf语法来动态生成URL：

<a th:href="@{/path/{id}(id=${item.id})}">链接</a>

5.4 引入片段

Thymeleaf允许将常用的HTML片段抽取成单独的模板，以便在多个页面中复用。例如，将导航栏抽取到一个单独的模板文件中，然后在其他模板中引入：

navbar.html:

<nav>
    <ul>
        <li><a th:href="@{/}">首页</a></li>
        <li><a th:href="@{/about}">关于</a></li>
    </ul>
</nav>

main.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!-- 引入导航栏片段 -->
    <div th:replace="::navbar"></div>

    <!-- 主要内容 -->
    <div>
        <h1>欢迎来到我们的页面</h1>
        <p>这里是主要内容区域。</p>
    </div>
</body>
</html>

6. 表单处理

Thymeleaf与Spring MVC无缝集成，能够轻松处理表单数据。例如，创建一个简单的表单提交页面：

form.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>表单示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <form th:action="@{/submit}" th:object="${user}" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" th:field="*{name}" />
        <label for="age">年龄:</label>
        <input type="number" id="age" th:field="*{age}" />
        <button type="submit">提交</button>
    </form>
</body>
</html>

控制器处理提交的表单：

package com.example.demo.controller;

import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class FormController {

    @RequestMapping("/form")
    public String showForm(Model model) {
        model.addAttribute("user", new User());
        return "form";
    }

    @PostMapping("/submit")
    public String submitForm(@ModelAttribute User user, Model model) {
        model.addAttribute("user", user);
        return "result";
    }
}

result.html展示提交结果：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>结果页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <h1>提交结果</h1>
    <p>姓名: <span th:text="${user.name}"></span></p>
    <p>年龄: <span th:text="${user.age}"></span></p>
</body>
</html>

7. 集成更多功能

7.1 国际化支持

Thymeleaf支持国际化，可以根据用户的语言环境展示不同的文本。创建消息资源文件：

messages.properties:

hello=欢迎来到Thymeleaf入门页面

messages_en.properties:

hello=Welcome to the Thymeleaf Introduction Page

在模板中使用：

<h1 th:text="#{hello}">欢迎</h1>

7.2 安全性标签

Thymeleaf与Spring Security集成后，可以在模板中使用安全性标签来控制内容的显示。例如：

<div sec:authorize="isAuthenticated()">
    <p>欢迎，<span sec:authentication="name"></span></p>
</div>

7.3 处理HTML属性

Thymeleaf不仅可以处理标签的内容，还可以处理标签的属性。例如，动态设置图像的src属性：

<img th:src="@{${imagePath}}" alt="动态图像"/>

动态设置CSS类名：

<div th:class="${isActive} ? 'active' : 'inactive'">内容</div>

8. Thymelaf的语法细节

8.1 文本插入

Thymeleaf提供多种方式插入文本内容：

th:text：会对内容进行HTML转义，防止XSS攻击。
th:utext：不会对内容进行HTML转义，适用于需要展示HTML内容的场景。

例如：

<p th:text="${message}">默认文本</p>
<p th:utext="${htmlContent}">默认HTML内容</p>

8.2 迭代标签

Thymeleaf支持使用th:each进行集合的迭代：

<ul>
    <li th:each="item, iterStat : ${items}" th:text="${item}">
        [#${iterStat.count}] Item
    </li>
</ul>

其中，iterStat对象包含以下属性：

count：当前迭代的计数（从1开始）。
index：当前迭代的索引（从0开始）。
size：集合的大小。
current：当前迭代的对象。
even：布尔值，表示当前迭代是否为偶数次。
odd：布尔值，表示当前迭代是否为奇数次。

8.3 URL参数

Thymeleaf可以构建带参数的URL：

<a th:href="@{/order/details(id=${orderId}, type='full')}">订单详情</a>

8.4 内联JavaScript和CSS

Thymeleaf支持在模板中内联JavaScript和CSS代码。例如，在JavaScript代码中插入动态数据：

<script th:inline="javascript">
    var username = /*[[${user.name}]]*/ '匿名';
</script>

CSS内联同样适用：

<style th:inline="css">
    .welcome {
        color: /*[[${user.color}]]*/ black;
    }
</style>

9. Thymeleaf的优缺点

优点

自然模板：Thymeleaf模板即使不经过服务器处理，也能作为静态页面展示。这使得前后端开发协作更加顺畅。
强大的功能：Thymeleaf支持条件渲染、循环遍历、URL构建、表单处理、国际化、安全标签等，功能非常丰富。
与Spring的无缝集成：Thymeleaf与Spring MVC和Spring Security无缝集成，简化了Web开发过程。
安全性：默认情况下，Thymeleaf会对所有文本进行HTML转义，有效防止XSS攻击。

缺点

学习曲线：对于完全没有使用过模板引擎的开发者，Thymeleaf的语法和特性可能需要一些时间来掌握。
性能问题：在高并发场景下，Thymeleaf的性能可能不如某些专为性能优化的模板引擎。
静态分析工具的支持：相比某些模板引擎，Thymeleaf在静态分析工具的支持上可能不够完备。

10. Thymeleaf与其他模板引擎的对比

Thymeleaf vs. JSP

自然模板：Thymeleaf模板可以直接作为静态页面预览，而JSP则需要服务器处理后才能查看。
功能：Thymeleaf提供更现代和丰富的功能，而JSP相对较为传统。
性能：JSP在处理简单页面时性能较好，但Thymeleaf在复杂应用中表现更佳。

Thymeleaf vs. FreeMarker

语法：Thymeleaf语法更加自然和直观，适合HTML的直接嵌入，而FreeMarker更像一种脚本语言。
集成：Thymeleaf与Spring的集成更加紧密，而FreeMarker更为独立。
社区支持：Thymeleaf在Spring社区中更受欢迎，文档和示例也更为丰富。

Thymeleaf vs. Velocity

现代性：Velocity较为过时，已经逐渐被其他模板引擎取代。Thymeleaf提供了更现代和全面的功能。
使用：Thymeleaf使用起来更加方便，模板更加直观，而Velocity需要更多的配置和理解。

11. 总结

通过整合Thymeleaf，Spring Boot开发者可以轻松地创建动态和交互性强的Web页面。本文从基本配置开始，逐步介绍了Thymeleaf的核心功能和高级特性，如条件渲染、集合迭代、URL构建、表单处理、国际化支持和安全性标签。Thymeleaf的丰富语法和强大的功能，使得它在现代Web开发中占据了一席之地，特别是在需要生成动态HTML内容的场景下。

通过掌握Thymeleaf，开发者可以更高效地构建复杂的Web应用，同时保证代码的简洁和可维护性。如果您还没有尝试过Thymeleaf，建议在您的下一个Spring Boot项目中尝试使用它，感受其强大和灵活。