Java-Spring入门指南（十九）thymeleaf基本概念
- 前言
- 一、thymeleaf是什么，有什么用，作用是什么？
- 什么？就是1.1 Thymeleaf
- 核心特征总结
- 1.2 Thymeleaf有什么用？
- 对比JSP：Thymeleaf的核心优势
- 实际开发中的使用场景
- 1.3 Thymeleaf的核心作用是什么？
- （1）数据绑定：将后端数据嵌入HTML
- （2）逻辑控制：实现页面动态逻辑
- （3）格式转换：统一素材显示格式
- （4）资源引入：动态加载CSS/JS/图片
前言
- 在上一篇博客中，我们掌握了SpringMVC中JSON的解析与项目间数据交互，解决了“后端如何传递数据给前端”的障碍，但前端接收数据后，如何优雅地渲染页面仍是关键——传统JSP虽能实现视图渲染，但存在依赖Servlet容器、无法静态预览、语法冗余等局限性，尤其在前后端协作场景中效率较低。
- 而Thymeleaf正是为解决这些问题而生的模板引擎，它是Spring官方推荐的视图层技术（替代JSP），能在无Servlet容器的环境下直接预览HTML页面，还能利用简洁的语法实现内容绑定、逻辑控制等能力，完美适配SpringMVC的视图需求。
- 本文作为Thymeleaf的入门概念篇，将聚焦“是什么、有什么用、核心作用”三大核心问题，为下一篇的代码实战（第二十篇）做好理论铺垫；所有内容仍基于我们熟悉的
Maven+IDEA+Tomcat 11环境，确保学习连贯性。
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的代码实战（依赖导入、配置、数据绑定与逻辑控制）
| 非常感谢您的阅读，喜欢的话记得三连哦 |
