Spring Boot 与 Thymeleaf 模板：构建动态 Web 页面！

举报
bug菌 发表于 2025/07/16 15:49:54 2025/07/16
【摘要】 🏆本文收录于「滚雪球学SpringBoot」专栏(全网一个名)，手把手带你零基础入门Spring Boot，从入门到就业，助你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8 🚀 前言 🌐在现代Web开发中，动态内容的渲染和前后端的数据交互是...

🏆本文收录于「滚雪球学SpringBoot」专栏(全网一个名)，手把手带你零基础入门Spring Boot，从入门到就业，助你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8

🚀 前言 🌐

在现代Web开发中，动态内容的渲染和前后端的数据交互是必不可少的。Spring Boot与Thymeleaf模板引擎的结合为我们提供了一个强大的解决方案。Thymeleaf作为一种非常流行的Java模板引擎，不仅支持HTML的标准语法，还能够方便地与Spring Boot集成，帮助我们渲染动态Web页面。无论是在构建用户注册表单、展示数据、还是动态生成页面内容，Thymeleaf都能轻松胜任。

在本文中，我们将深入探讨如何在Spring Boot项目中使用Thymeleaf来构建动态Web页面。具体内容包括：Thymeleaf模板的集成、表单数据处理与验证、数据绑定、自定义功能等。通过详细的代码示例与解析，你将能够熟练地在Spring Boot中使用Thymeleaf模板，引导你构建更加高效、可维护的Web应用。

🧑‍💻 使用Spring Boot与Thymeleaf模板引擎构建动态Web页面 🔧

Thymeleaf是一个现代的、功能强大的模板引擎，它能够处理复杂的动态内容渲染，并且和Spring Boot的集成非常紧密。借助Thymeleaf，开发者可以轻松创建动态Web页面，实现数据与前端的无缝连接。

1. 引入Thymeleaf依赖 ⚙️

要在Spring Boot项目中使用Thymeleaf模板引擎，首先需要添加相关依赖。Spring Boot提供了spring-boot-starter-thymeleaf，它会自动集成Thymeleaf及其相关配置。

实际代码案例（pom.xml）：

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

代码解析：

  • spring-boot-starter-thymeleaf依赖包为我们提供了Thymeleaf的所有功能，包括自动配置和视图解析。引入该依赖后，Spring Boot会自动将Thymeleaf与应用程序集成，无需进行额外的配置。

2. 创建Thymeleaf模板文件📝

Thymeleaf模板文件通常放在src/main/resources/templates目录下，文件扩展名为.html。这些模板文件由HTML标签和Thymeleaf表达式组成。后端数据会被绑定到模板中，动态渲染并生成最终的HTML。

实际代码案例（index.html）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome, <span th:text="${name}">User</span>!</h1>
    <p th:text="'Today is: ' + ${date}"></p>
</body>
</html>

代码解析：

  • xmlns:th="http://www.thymeleaf.org"：这是Thymeleaf命名空间声明，告诉模板引擎该文件使用Thymeleaf的语法。
  • th:text="${name}"：这是Thymeleaf的表达式，它会将后端Model中的name数据动态渲染到<span>标签内。
  • th:text="'Today is: ' + ${date}"：该表达式通过将Today is:与date值拼接，动态渲染当前日期。

3. Spring Boot控制器与Thymeleaf集成 🌍

Spring Boot使用控制器类来处理HTTP请求，并返回对应的视图（即Thymeleaf模板）。我们将后端的数据通过Model传递给Thymeleaf模板，模板引擎会在页面中渲染这些数据。

实际代码案例（HomeController.java）：

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

import java.time.LocalDate;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("name", "John Doe");
        model.addAttribute("date", LocalDate.now());
        return "index";  // 返回index.html视图
    }
}

代码解析：

  • @Controller：标记该类为控制器，负责处理HTTP请求。
  • @GetMapping("/")：处理GET请求，当用户访问/路径时，返回index.html视图。
  • model.addAttribute("name", "John Doe")：将name数据传递给模板，Thymeleaf会在页面中渲染。
  • model.addAttribute("date", LocalDate.now())：将当前日期传递给模板，Thymeleaf会在页面中显示当前日期。

当用户访问/路径时，Spring Boot会渲染index.html页面，并将name和date数据传递给模板，最终生成带有动态内容的HTML响应。

🌐 基于Spring Boot的Thymeleaf模板与表单处理 📝

Thymeleaf不仅支持静态页面的渲染，还能够与表单数据进行绑定，自动填充用户输入的表单字段，并支持表单验证。通过Thymeleaf模板引擎，开发者可以轻松实现动态表单渲染、提交和数据验证。

1. 创建表单模板 🧑‍💻

Thymeleaf模板引擎通过th:field属性与后端模型对象进行数据绑定。开发者只需要在表单中使用th:field即可自动绑定表单字段与后端对象的属性。

实际代码案例（form.html）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
</head>
<body>
    <h1>User Registration</h1>
    <form th:action="@{/register}" th:object="${user}" method="post">
        <label for="username">Username:</label>
        <input type="text" th:field="*{username}" id="username" required>
        <br>
        
        <label for="email">Email:</label>
        <input type="email" th:field="*{email}" id="email" required>
        <br>
        
        <button type="submit">Register</button>
    </form>
</body>
</html>

代码解析：

  • th:action="@{/register}"：表单提交的URL路径，Spring Boot会解析这个路径。
  • th:object="${user}"：将后端的user对象与表单进行绑定。所有表单字段将自动与user对象的属性（如username、email）绑定。
  • th:field="*{username}"：将表单的username字段与后端user对象的username属性进行绑定，提交时数据会自动填充到user.username。

2. 控制器处理表单提交 🔄

控制器方法通过@ModelAttribute注解接收表单数据，并将数据自动绑定到后端模型对象。处理完数据后，控制器可以返回一个新的视图或重定向到其他页面。

实际代码案例（UserController.java）：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;

@Controller
public class UserController {

    @GetMapping("/register")
    public String showForm(Model model) {
        model.addAttribute("user", new User());
        return "form";  // 返回form.html视图
    }

    @PostMapping("/register")
    public String registerUser(@ModelAttribute User user) {
        // 处理用户注册逻辑
        System.out.println("User Registered: " + user);
        return "redirect:/success";  // 重定向到成功页面
    }
}

代码解析：

  • @GetMapping("/register")：处理GET请求，显示注册表单。控制器创建一个新的User对象并将其传递到Thymeleaf模板中。
  • @PostMapping("/register")：处理表单提交的POST请求，@ModelAttribute User user会将表单数据绑定到User对象。
  • return "redirect:/success"：处理完表单数据后，重定向到成功页面。

3. 表单验证 ✔️

Spring Boot与Thymeleaf结合时，可以使用JSR-303/JSR-380（Bean Validation）进行表单字段验证。通过@NotBlank、@Email等注解，开发者可以对表单字段进行验证，确保数据的合法性。

实际代码案例（User.java）：

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Email;

public class User {

    @NotBlank(message = "Username is required")
    private String username;

    @Email(message = "Invalid email address")
    @NotBlank(message = "Email is required")
    private String email;

    // getters and setters
}

代码解析：

  • @NotBlank：确保username和email不能为空。
  • @Email：确保email字段的值为有效的电子邮件地址。

在Thymeleaf模板中，我们可以通过th:errors标签来显示验证错误消息。

实际代码案例（form.html）：

<form th:action="@{/register}" th:object="${user}" method="post">
    <label for="username">Username:</label>
    <input type="text" th:field="*{username}" id="username" required>
    <div th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Username Error</div>
    <br>
    
    <label for="email">Email:</label>
    <input type="email" th:field="*{email}" id="email" required>
    <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</div>
    <br>
    
    <button type="submit">Register</button>
</form>

代码解析：

  • th:errors="*{username}"：当username字段验证失败时，显示错误消息。
  • th:if="${#fields.hasErrors('username')}"：检查字段是否有错误，如果有，则显示错误信息。

🌐 Spring Boot与Thymeleaf的集成与自定义功能 🛠️

Thymeleaf不仅提供了标准的HTML渲染功能，还支持更多的扩展功能，如自定义方言、函数和过滤器等。这使得我们可以根据业务需求自定义模板的功能。

1. 自定义Thymeleaf方言 🧑‍💻

Thymeleaf允许开发者创建自定义方言（Dialect），以扩展模板引擎的功能。通过定义自定义标签和属性，可以实现特定的业务需求。

实际代码案例（自定义Thymeleaf方言）：

import org.thymeleaf.dialect.AbstractDialect;
import org.thymeleaf.processor.element.AbstractElementTagProcessor;

public class CustomDialect extends AbstractDialect {

    @Override
    public String getPrefix() {
        return "custom";  // 自定义的前缀
    }

    @Override
    public Set<AbstractElementTagProcessor> getProcessors(String dialectPrefix) {
        Set<AbstractElementTagProcessor> processors = new HashSet<>();
        processors.add(new CustomTagProcessor(dialectPrefix));
        return processors;
    }
}

代码解析：

  • getPrefix()：定义自定义标签的前缀（如custom），然后可以通过custom:tag的方式在Thymeleaf模板中调用。
  • getProcessors()：返回处理自定义标签的处理器，开发者可以在处理器中实现自定义的业务逻辑。

2. 自定义Thymeleaf函数 🧑‍💻

Thymeleaf支持自定义函数，通过扩展ExpressionObjectFactory类，可以将复杂的逻辑封装成函数，并在模板中使用。

实际代码案例（自定义函数）：

import org.thymeleaf.context.IContext;
import org.thymeleaf.processor.Processor;

public class CustomFunction extends AbstractExpressionObjectFactory {

    @Override
    public Set<Processor> getProcessors(IContext context) {
        Set<Processor> processors = new HashSet<>();
        processors.add(new CustomFunctionProcessor());
        return processors;
    }

    public String reverse(String input) {
        return new StringBuilder(input).reverse().toString();
    }
}

代码解析：

  • reverse(String input)：定义了一个字符串反转的自定义函数，在Thymeleaf模板中可以通过${#custom.reverse(input)}来调用该函数。

通过这些自定义功能，开发者可以灵活地扩展Thymeleaf的功能，满足更复杂的业务需求。

🏁 小结与总结：Spring Boot与Thymeleaf的高效集成 🧩

小结

  1. 动态页面渲染：Spring Boot与Thymeleaf的结合使得开发者能够方便地渲染动态页面，将后端数据传递到前端模板中。
  2. 表单处理与验证：通过Thymeleaf的表单绑定功能，开发者能够轻松处理表单数据，并进行验证，确保数据的合法性。
  3. 自定义功能扩展：Thymeleaf支持自定义方言、函数等功能，帮助开发者根据业务需求扩展模板引擎的功能，提升灵活性。

总结

  • 简化开发流程：Spring Boot与Thymeleaf的集成使得开发过程更加简洁高效，开发者可以专注于业务逻辑，而不是繁琐的前后端数据传递和页面渲染。
  • 灵活性与扩展性：Thymeleaf提供了灵活的扩展机制，支持自定义方言和函数，满足开发者个性化需求。
  • 提升开发效率：通过Spring Boot的自动配置和Thymeleaf的易用性，开发者能够迅速构建高效的动态Web应用，提升开发效率。

希望这篇文章能够帮助你深入理解如何在Spring Boot中与Thymeleaf结合使用，构建灵活且高效的动态Web页面。如果你对其他技术或功能有兴趣，随时告诉我！🌟

🧧福利赠与你🧧

  无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏「滚雪球学SpringBoot」专栏(全网一个名)，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门SpringBoot，就像滚雪球一样，越滚越大， 无边无际，指数级提升。

  最后，如果这篇文章对你有所帮助，帮忙给作者来个一键三连，关注、点赞、收藏，您的支持就是我坚持写作最大的动力。

  同时欢迎大家关注公众号:「猿圈奇妙屋」 ，以便学习更多同类型的技术文章，免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板、技术文章Markdown文档等海量资料。

✨️ Who am I?

我是bug菌(全网一个名)，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云多年度十佳博主/价值贡献奖，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击这里；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

-End-

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入