thymeleaf入门

最新推荐文章于 2025-11-14 21:32:59 发布

原创最新推荐文章于 2025-11-14 21:32:59 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

thymeleaf 同时被 2 个专栏收录

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍了Thymeleaf模版引擎的基本概念和在SpringBoot中的使用，包括Thymeleaf的特点、安装配置、常用表达式如th:if、th:each、th:switch等的使用示例，以及碎片（组件）、注释类型和组件参数传递等高级功能。

thymeleaf

简介

Thymeleaf模版引擎使用

Thymeleaf开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。

SpringBoot支持如下页面模板语言:

Thymeleaf
FreeMarker
Velocity
Groovy
JSP

其中Thymeleaf是SpringBoot官方所推荐使用的，Thymeleaf是动静分离的，页面中的动态标签是需要传递有数据的时候才会渲染，不然就是原本默认的静态的样子。

模板引擎的作用就是取得数据并加以处理，最后显示出数据。

Thymeleaf与JSP的区别在于，不运行项目之前，Thymeleaf也是纯HTML（不需要服务端的支持）而JSP需要进行一定的转换，这样就方便前端人员进行独立的设计、调试。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。 ---- 作者：我没有三颗心脏

使用教程

官方教程

在使用thymele之前先导入依赖

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

在【resources】下的【templates】下新建一个【hello.html】文件，使用这个目录的原因是当你使用模板引擎时Spring Boot会默认在src/main/resources/templates下去找，当然你也可以修改这个默认路径。

HTML页面中，还需要引用th名字空间。

<html xmlns:th="http://www.thymeleaf.org">

在yaml配置文件中可以设置开发时关闭thymeleaf缓存

spring.thymeleaf.cache=false

开发运行时，可以开启idea的资源更新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAnYB0Mh-1616982388410)(springboot.assets/image-20210329091348190.png)]

thymeleaf常用表达式

简单表达式：
    变量表达式： ${...}  
    选择变量表达式： *{...}
    消息表达： #{...}
    链接URL表达式： @{...}
    片段表达式： ~{...}
文字
    文本文字：'one text'，'Another one!'，...
    号码文字：0，34，3.0，12.3，...
    布尔文字：true，false
    空文字： null
    文字标记：one，sometext，main，...
文字操作：
    字符串串联： +
    文字替换： |The name is ${name}|
    算术运算：
    二元运算符：+，-，*，/，%
    减号（一元运算符）： -
布尔运算：
    二元运算符：and，or
    布尔否定（一元运算符）： !，not
比较和平等：
    比较：>，<，>=，<=（gt，lt，ge，le）
    等号运算符：==，!=（eq，ne）
条件运算符：
    如果-则： (if) ? (then)
    如果-则-否则： (if) ? (then) : (else)
    默认： (value) ?: (defaultvalue)
特殊令牌：
    无操作： _

表达式使用案例

${x}将返回x存储在Thymeleaf上下文中或作为请求属性的变量。

[[${abc+'123'}]] ==[[${}]]== 是将控制器中abc的值在页面显示
model.addAttribute("abc","这是我的第一个thymeleaf页面");

渲染User对象的信息我们可以这样

<div>
    <h2 th:text="${user.getUsername()}"></h2> 
    <p th:text="${user.getAge()}"></p> 
</div>

也可以将User定义为临时变量，接着使用 *{xxx} 就能取到值了

<div th:object="${user}"> 
    <h2 th:text="*{username}"></h2>
    <p th:text="*{age}"></p> 
</div>

还可以不使用get的方式，直接使用属性名

<h2 th:text="${user.username}" ></h2>

th:if

th:if 通过布尔值决定这个元素是否渲染

比如：

<p th:if="${user.isVip}">会员</p>

th:each

th:each 可以迭代循环出数据，前面我们User对象里面的tags是一个数组，我们来渲染一下

<ul>
    <li th:each="tag:${user.getTags()}" th:text="${tag}"></li>
</ul>

状态变量在 th:each 属性中定义，并且包含以下数据：

当前的迭代索引，从0开始。这是 index 属性。
从1开始的当前迭代索引。这是 count 属性。
迭代变量中元素的总数。这是 size 财产。
每次迭代的iter变量。这是 current 财产。
当前迭代是偶数还是奇数。这些是 even/odd 布尔属性。
当前迭代是否是第一个。这是 first 布尔属性。
当前迭代是否为最后一次。这是 last 布尔属性。

th:switch

th:switch 选择语句

<div th:switch="${user.getSex()}">
    <p th:case="'1'">男</p> 
    <p th:case="'2'">女</p>
    <p th:case="*">默认</p> 
</div>

url

如果在springboot中需要引入static目录下的静态资源可以使用 @{xxx} 的方式

<link th:href="@{/app.css}" rel="stylesheet">

JavaScript动态渲染

<script th:inline="javascript">
    const user = /*[[${customer}]]*/ {};
    console.log(user); 
</script>

同理css也是可以的

<style th:inline="css"> 
    .isSelect {
        color: /*[[${selectColor}]]*/red ; 
    } 
</style>

碎片（组件）

日常开发中呢我们经常将有些可以复用的部分抽离出来新建一个fragment.html ,一个文件里面可以写多个碎片，使用 th:fragment来定义

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 
    
    <footer th:fragment="com1"> this is com1 
    </footer> 
    
    <footer th:fragment="com2"> this is com2 
    </footer>

在其它页面中引用

<!--replace fragment表示fragment.html文件--> 
<div th:replace="~{fragment::com1}"></div> 

<!--insert fragment表示fragment.html文件->
<div th:insert="~{fragment::com2}"></div>

这两种方式的区别就是，replace会将新标签完全替换原本的标签，也就是说原本写 th:replace 属性的标签就不会渲染出来， insert 是往这个地方插入标签。

直接通过选择器使用

对于碎片，甚至可以不定义，我们再次添加一个碎片

<footer id="com2">
    this is com2
</footer>

然后使用它

<div th:insert="~{fragment::#com2}"></div>

注释类型

在碎片里面，我们是可以使用控制传递的数据的，比如上面的User对象，但是开发工具在 component.html 页面中可能不能识别到User对象，我们可以打一个注释

<footer th:fragment="com1"> 
    this is com1 <!--/*@thymesVar id="customer" type="com.igeekhom.cloud.customer.pojo.Customer"*/--> 
    <p th:text="${customer.name}">p</p> </footer>

组件传递参数

组件也是可以传递数据的

<div th:fragment="com3(message)"> 
	<p th:text="${message}"></p> 
</div>

使用的时候

<div th:insert="~{ fragment::com3('传递数据')}"></div>

基本对象

#ctx：上下文对象

- ${#ctx.request} 
- ${#ctx.response} 
- ${#ctx.session} 
- ${#ctx.servletContext}

请求/会话属性

${session.xxx} 
${application.xxx} 
${#request.getAttribute('xxx')}

工具类

在thymeleaf里面是可以直接使用一些Java的函数的，并且你可以通过传递参数的方式把一些自己写的方法传递给页面，在里面调用也是可以的一些可以直接的使用函数

#dates
#calendars
#strings
#numbers
#objects
#bools
#arrays
#lists
#sets
#maps
#aggregates

以日期格式化来举例

<!--日期格式化--> 
<p th:text="${#dates.format(user.createTime,'yyyy\-MM\-dd HH:mm')}"></p>