Java-Spring入门指南（十九）thymeleaf基本概念

前言

• 在上一篇博客中，我们掌握了SpringMVC中JSON的解析与项目间数据交互，解决了“后端如何传递数据给前端”的问题，但前端接收数据后，如何优雅地渲染页面仍是关键——传统JSP虽能实现视图渲染，但存在依赖Servlet容器、无法静态预览、语法冗余等局限性，尤其在前后端协作场景中效率较低。
• 而Thymeleaf正是为解决这些问题而生的模板引擎，它是Spring官方推荐的视图层技术（替代JSP），能在无Servlet容器的环境下直接预览HTML页面，还能通过简洁的语法实现数据绑定、逻辑控制等功能，完美适配SpringMVC的视图需求。
• 本文作为Thymeleaf的入门概念篇，将聚焦“是什么、有什么用、核心作用”三大核心问题，为下一篇的代码实战（第二十篇）做好理论铺垫；所有内容仍基于我们熟悉的Maven+IDEA+Tomcat 11环境，确保学习连贯性。

我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的Java-Spring入门指南知识文章专栏
欢迎来阅读指出不足
https://blog.csdn.net/2402_83322742/category_13040333.html?spm=1001.2014.3001.5482

---

thymeleaf官方中文文档地址
https://www.wuzao.com/thymeleaf/documentation.html

一、thymeleaf是什么，有什么用，作用是什么？

Thymeleaf的核心定位是“面向Web和独立环境的现代服务器端Java模板引擎”，它不仅能渲染HTML，还支持XML、TEXT、JavaScript等格式，但在SpringMVC中，我们主要用它来处理HTML视图，解决传统JSP的痛点。

1.1 Thymeleaf是什么？

Thymeleaf本质是一款“能嵌入动态数据的HTML模板引擎”，它通过自定义的标签属性（如th:text）将后端传递的Java数据（如User对象、List列表）嵌入到HTML页面中，最终生成用户看到的动态页面。

它最核心的特性是“天然支持HTML”，这也是它区别于JSP的关键：

• JSP需要在HTML中插入<% %>或${ }（依赖EL表达式），且必须在Servlet容器（如Tomcat）中运行才能解析，直接用浏览器打开会显示乱码；
• Thymeleaf的动态语法是通过HTML标签的th:*属性实现的（如<span th:text="${username}">默认值</span>），即使不启动服务器，用浏览器直接打开HTML文件，也能显示“默认值”，不会出现语法乱码，极大方便前后端协作（前端工程师可直接预览页面，后端工程师专注数据绑定）。

核心特征总结

• 无容器依赖：不依赖Tomcat等Servlet容器，静态HTML即可预览，降低前后端协作成本。
• 语法自然：动态逻辑通过th:*属性嵌入HTML，不破坏HTML原有结构，代码可读性高。
• Spring官方推荐：Spring Boot和Spring MVC均将其作为默认视图引擎，无需复杂配置即可集成。
• 功能全面：支持数据绑定、循环遍历、条件判断、日期格式化、资源引入等所有视图层所需功能。

1.2 Thymeleaf有什么用？

在Thymeleaf出现前，JSP是Java Web项目的主流视图技术，但JSP的局限性在前后端分离和快速迭代场景中越来越明显。Thymeleaf的价值，正是通过解决这些痛点提升开发效率。

对比JSP：Thymeleaf的核心优势

对比维度	传统JSP	Thymeleaf
静态预览	不支持，直接打开显示<% %>乱码	支持，静态HTML显示默认值，动态数据不影响预览
容器依赖	依赖Servlet容器（如Tomcat）才能解析	无依赖，纯HTML文件即可编辑预览
语法简洁性	需混合<% %>、EL表达式，语法繁琐	统一用th:*属性，语法简洁易记
前后端协作	困难（前端需熟悉JSP语法）	简单（前端写纯HTML，后端加th:*属性）
Spring生态适配	需额外配置（如视图解析器）	官方推荐，Spring Boot自动配置

实际开发中的使用场景

• 中小规模项目的服务端渲染：无需前后端分离，后端直接通过Thymeleaf渲染页面（如管理系统、博客网站）。
• 前后端协作原型开发：前端先写出纯HTML原型，后端直接在原型上添加th:*属性绑定数据，无需重构页面结构。
• 多环境兼容：同一模板可在开发环境（静态预览）、测试环境（数据渲染）、生产环境（正式部署）中无缝切换。

1.3 Thymeleaf的核心作用是什么？

Thymeleaf作为SpringMVC的视图引擎，核心作用是“接收后端传递的数据，动态生成HTML页面”，具体可拆解为4个核心功能，这些功能将在第二十篇代码实战中详细演示：

（1）数据绑定：将后端数据嵌入HTML

这是Thymeleaf最基础的作用，通过th:text、th:value等属性，将后端Model中的数据（如model.addAttribute("username", "zhangsan")）显示在HTML页面中。

• 示例逻辑：后端传递username=zhangsan，前端通过<p th:text="${username}">默认用户名</p>渲染，最终页面显示“zhangsan”（静态预览时显示“默认用户名”）。

（2）逻辑控制：实现页面动态逻辑

支持条件判断（th:if/th:unless）、循环遍历（th:each）等逻辑，无需写Java代码，直接在HTML中通过属性实现。

• 循环示例：后端传递List<User> userList，前端通过<tr th:each="user : ${userList}">遍历列表，动态生成表格行。
• 条件示例：通过<div th:if="${user.age > 18}">成年</div>，根据用户年龄动态显示不同内容。

（3）格式转换：统一数据显示格式

内置日期、数字、字符串等格式转换器，无需后端手动处理格式，直接在前端通过th:format或相关属性配置。

• 日期示例：后端传递Date loginTime = new Date()，前端通过<span th:text="${#dates.format(loginTime, 'yyyy-MM-dd HH:mm:ss')}">，将日期格式化为“2024-10-01 16:30:00”。

（4）资源引入：动态加载CSS/JS/图片

通过th:href、th:src等属性，动态引入CSS、JavaScript、图片等静态资源，避免硬编码路径（尤其在项目部署路径变化时，无需修改资源路径）。

• 示例：<link rel="stylesheet" th:href="@{/css/style.css}" href="/css/style.css">，静态预览时用href加载本地CSS，动态渲染时用th:href加载项目部署后的CSS。

下一篇将带来Thymeleaf的代码实战（依赖导入、配置、数据绑定与逻辑控制）

---

我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的Java-Spring入门指南知识文章专栏
欢迎来阅读指出不足
https://blog.csdn.net/2402_83322742/category_13040333.html?spm=1001.2014.3001.5482

非常感谢您的阅读，喜欢的话记得三连哦