Java-Spring入门指南(十九)thymeleaf基本概念

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:textth: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:hrefth: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

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

相关推荐
九皇叔叔20 小时前
Java循环结构全解析:从基础用法到性能优化
java·开发语言·性能优化
流星52112220 小时前
GC 如何判断对象该回收?从可达性分析到回收时机的关键逻辑
java·jvm·笔记·学习·算法
csdn_aspnet20 小时前
Java 圆台体积和表面积计算程序(Program for Volume and Surface area of Frustum of Cone)
java
杯莫停丶20 小时前
设计模式之:外观模式
java·设计模式·外观模式
乐之者v20 小时前
Mac常用软件
java·1024程序员节
TDengine (老段)21 小时前
TDengine 数据函数 ROUND 用户手册
java·大数据·数据库·物联网·时序数据库·tdengine·1024程序员节
TDengine (老段)21 小时前
TDengine 数学函数 RAND 用户手册
java·大数据·数据库·物联网·时序数据库·tdengine·涛思数据
從南走到北21 小时前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
JH307321 小时前
jvm,tomcat,spring的bean容器,三者的关系
jvm·spring·tomcat
野犬寒鸦21 小时前
从零起步学习MySQL || 第十章:深入了解B+树及B+树的性能优势(结合底层数据结构与数据库设计深度解析)
java·数据库·后端·mysql·1024程序员节