异常教程

springboot thymeleaf（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发领域，Spring Boot 和 Thymeleaf 的组合成为了一种高效且优雅的解决方案。Spring Boot 以其开箱即用的特性简化了 Java 项目的搭建与配置，而 Thymeleaf 则通过直观的模板语法和强大的功能，让 HTML 页面的动态渲染变得简单直观。对于编程初学者和中级开发者来说，掌握这对技术组合不仅能提升开发效率，还能深入理解 MVC（Model-View-Controller）架构的核心思想。本文将从基础到进阶，通过实际案例和代码示例，逐步讲解如何利用 Spring Boot 和 Thymeleaf 构建动态 Web 应用。

一、环境搭建与项目初始化

1.1 项目创建

使用 Spring Boot 初次接触 Thymeleaf 时，首先需要创建一个基础项目。通过 Spring Initializr（https://start.spring.io/）选择以下依赖：

  • Spring Web：提供 Web 开发的核心功能
  • Thymeleaf：用于模板引擎的集成

创建完成后，项目结构应包含 src/main/resources/templates 目录，这是 Thymeleaf 模板文件的默认存放位置。

1.2 第一个 Hello World 示例

在控制器中编写一个简单的接口，返回 Thymeleaf 模板：

@Controller  
public class HomeController {  
    @GetMapping("/")  
    public String index() {  
        return "index"; // 对应 templates/index.html  
    }  
}

在 templates/index.html 中，使用 Thymeleaf 的基本语法输出动态内容：

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title th:text="${'欢迎来到 Spring Boot Thymeleaf 世界！'}">标题</title>  
</head>  
<body>  
    <h1 th:text="${'Hello, Thymeleaf!'}">静态文本</h1>  
</body>  
</html>

知识点比喻：Thymeleaf 的 th:text 属性就像一个“翻译器”，它将后端传来的动态数据“翻译”成前端页面的文本内容。

二、Thymeleaf 基础语法详解

2.1 变量表达式与条件判断

Thymeleaf 的核心是通过 #{}、${}、*{} 等语法访问数据。例如：

<!-- 从模型中获取变量 -->  
<p th:text="${user.name}">默认值</p>

条件渲染：使用 th:if 或 th:unless 控制元素的显示：

<div th:if="${user.isAdmin}">  
    <p>您是管理员，可访问高级功能</p>  
</div>

2.2 循环与列表渲染

通过 th:each 遍历集合数据，例如展示用户列表：

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

比喻：th:each 就像一个“自动填充器”，它会根据列表长度自动生成对应的 HTML 元素，省去手动拼接字符串的麻烦。

三、模板继承与布局管理

3.1 基础模板与继承

Thymeleaf 支持通过 <template> 标签定义基础模板，子页面可继承其结构。例如：
基础模板 base.html：

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title th:text="${title}">默认标题</title>  
</head>  
<body>  
    <header>通用头部</header>  
    <div th:replace="~{ :: content }"></div> <!-- 占位符 -->  
</body>  
</html>

子页面 home.html：

<!DOCTYPE html>  
<html th:extends="base">  
<body>  
    <div th:fragment="content">  
        <h1>首页内容</h1>  
    </div>  
</body>  
</html>

比喻：模板继承就像“乐高积木”，基础模板提供公共结构，子页面只需填充“个性化模块”。

3.2 片段复用与静态资源引用

通过 <th:block> 定义可复用的代码片段，或通过 th:src、th:href 引入静态资源：

<!-- 引用 CSS 文件 -->  
<link th:href="@{/css/style.css}" rel="stylesheet">

四、表单处理与数据绑定

4.1 基本表单提交

创建一个用户注册表单，并通过 Thymeleaf 绑定模型对象：
HTML 表单：

<form th:action="@{/register}" method="post">  
    <input type="text" th:field="*{username}" placeholder="用户名">  
    <input type="password" th:field="*{password}" placeholder="密码">  
    <button type="submit">注册</button>  
</form>

控制器处理：

@PostMapping("/register")  
public String register(@ModelAttribute User user) {  
    // 处理注册逻辑  
    return "redirect:/success";  
}

知识点比喻：th:field 是表单字段与后端对象的“双向翻译器”，它自动完成数据的填充和提交。

4.2 表单验证与错误提示

通过 @Valid 注解和 BindingResult 实现验证逻辑：

@PostMapping("/login")  
public String login(@Valid @ModelAttribute User user, BindingResult result) {  
    if (result.hasErrors()) {  
        return "login"; // 重新渲染表单并显示错误  
    }  
    // 登录成功逻辑  
    return "redirect:/home";  
}

错误提示渲染：

<div th:if="${#fields.hasErrors('username')}">  
    <span class="error" th:text="${#fields.errors('username')}">错误信息</span>  
</div>

五、高级功能与性能优化

5.1 URL 路径处理与国际化

Thymeleaf 提供了灵活的 URL 生成方式：

<!-- 生成带参数的 URL -->  
<a th:href="@{/profile(id=${user.id})}">查看个人资料</a>

通过 messages 文件实现多语言支持：

<p th:text="#{common.welcome}">欢迎信息</p>

5.2 缓存与静态资源优化

配置 Thymeleaf 缓存以提升性能：

spring.thymeleaf.cache=true  
spring.thymeleaf.mode=HTML5

比喻：缓存就像“记忆库”，它让 Thymeleaf 记住已解析的模板，减少重复计算的时间。

六、实战案例：构建简易博客系统

6.1 需求分析

实现一个包含文章列表、详情页和分类筛选的博客系统。

6.2 核心代码示例

模型类：

@Data  
public class Article {  
    private Long id;  
    private String title;  
    private String content;  
    private LocalDateTime createTime;  
}

控制器：

@Controller  
public class BlogController {  
    @GetMapping("/articles")  
    public String listArticles(Model model) {  
        List<Article> articles = articleService.findAll();  
        model.addAttribute("articles", articles);  
        return "article/list";  
    }  
}

模板文件 list.html：

<table>  
    <tr th:each="article : ${articles}">  
        <td th:text="${article.title}">标题</td>  
        <td th:text="${#dates.format(article.createTime, 'yyyy-MM-dd')}">日期</td>  
    </tr>  
</table>

结论

通过本文的讲解，读者可以掌握 Spring Boot Thymeleaf 的核心功能与实战技巧。从环境搭建到模板继承，再到表单验证与高级功能，这一技术组合不仅简化了 Web 开发的复杂度，还通过清晰的 MVC 分层设计提升了代码的可维护性。对于开发者而言，Thymeleaf 的直观语法和 Spring Boot 的快速启动能力，使其成为构建中小型 Web 应用的首选方案。未来，随着对 REST API 集成、安全框架（如 Spring Security）的深入学习，这一技术栈的潜力将得到进一步释放。

延伸思考：尝试将本文案例与前后端分离架构对比，理解传统模板引擎与现代前端框架（如 React）的适用场景差异。

最新发布

查看更多文章