导图社区 Thymeleaf

Thymeleaf

页面静态化技术Thymeleaf。模版引擎就是将数据和动态模版页面转成html静态页面。模板：将重复的内容写好，其中某些可能变化的内容，采用占位符的方式动态加载。springboot支持的模版引擎有：FreeMarker、Thymeleaf、jsp、veocity，其中对Freemarker和Thymeleaf支持最友好。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。

编辑于2022-04-14 13:32:09

Web前端
java后端开…
页面静态…
全栈工程师
模板引擎

wry

他的近期作品查看更多>>

Thymeleaf

社区模板帮助中心，点此进入>>

wry

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 30.1k
- 2.2k
- 348
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 13.6k
- 176
- 15
Kacyun
域控上线
- 1.4k
- 10
- 5
jackrao
python思维导图
- 5.0k
- 230
- 8
(*^▽^*)
css
- 1.2k
- 41
- 5
A张舫
CSS
- 3.1k
- 187
- 33
journey
计算机操作系统思维导图
- 3.9k
- 196
- 21
journey
计算机组成原理
- 1.4k
- 70
- 10
journey
IMX6UL(A7)
- 469
- 5
- 1
Handler XU
考试学情分析系统
- 605
- 10
- 1
蒋龙

Thymeleaf

开头

页面1

详细

页面2

远程仓库

https://gitee.com/wang-rongyue-666/thymeleaf

Project version: 3.0.11.RELEASE

1.Thymeleaf介绍

thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。

Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。

它的特点便是：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

XML

有效的XML

XHTML

有效的XHTML

HTML5

旧版HTML5

所有这些模式都指的是格式良好的XML文件，但*Legacy HTML5*模式除外，它允许您处理HTML5文件，其中包含独立（非关闭）标记，没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件，Thymeleaf将首先执行转换，将您的文件转换为格式良好的XML文件，这些文件仍然是完全有效的HTML5（实际上是创建HTML5代码的推荐方法）1。

另请注意，验证仅适用于XML和XHTML模板。

然而，这些并不是Thymeleaf可以处理的唯一模板类型，并且用户始终能够通过指定在此模式下*解析*模板的方法和*编写*结果的方式来定义他/她自己的模式。这样，任何可以建模为DOM树（无论是否为XML）的东西都可以被Thymeleaf有效地作为模板处理。

2.Springboot整合thymeleaf

使用springboot 来集成使用Thymeleaf可以大大减少单纯使用thymleaf的代码量，所以我们接下来使用springboot集成使用thymeleaf.

实现的步骤为：

创建一个sprinboot项目

添加thymeleaf的起步依赖

添加spring web的起步依赖

编写html 使用thymleaf的语法获取变量对应后台传递的值

编写controller 设置变量的值到model中

(1)创建工程

创建一个独立的工程springboot-thymeleaf,该工程为案例工程

pom.xml依赖

(2)创建html

在resources中创建templates目录，在templates目录创建 demo1.html

解释：

<html xmlns:th="http://www.thymeleaf.org">:这句声明使用thymeleaf标签

<p th:text="${hello}"></p>:这句使用 th:text=“${变量名}” 表示使用thymeleaf获取文本数据，类似于EL表达式。

创建启动类com.wry.ThymeleafApplication

(3)修改application.yml配置

resource资源热更新

创建application.yml,并设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试。

在这里，其实还有一些默认配置，比如视图前缀：classpath:/templates/,视图后缀：.html

org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties部分源码如下：

(4)控制层

创建controller用于测试后台设置数据到model中。

创建com.wry.controller.TestController

(5)测试

地址

http://localhost:10091/test/text

3 Thymeleaf基本语法（重点）

th:text

输出文本

例如

Controller

text

(5)测试

地址

http://localhost:10091/test/text

th:action

定义后台控制器路径，类似<form>标签的action属性。

例如

html

<!DOCTYPE html>  <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Thymeleaf模板引擎</title> </head> <body>   <div> <form id="login-form" th:action="@{/test/action}"> <button>提交</button> </form> </div> </body> </html>

Controller

action

th:each

对象遍历，功能类似jstl中的<c:forEach>标签。

例如

Controller

each

list输出

例如

Controller

each

测试

地址

http://localhost:10091/test/each

Map输出

例如

Controller

each

测试

地址

http://localhost:10091/test/each

状态

例如

Controller

each

测试

地址

http://localhost:10091/test/each

数组输出

例如

Controller

each

测试

地址

http://localhost:10091/test/each

Date输出

例如

Controller

date

测试

地址

http://localhost:10091/test/date

th:if条件

条件成立时输出指定语句

例如

Controller

ifif

测试

地址

http://localhost:10091/test/if

th:unless条件

条件不成立时输出指定语句

例如

Controller

unless

测试

地址

http://localhost:10091/test/unless

th:fragment

定义一个公共模块

th:include

引入一个公共模块

例如

Controller

include

测试

地址

http://localhost:10091/test/include

、

th:src

动态绑定图片的src

例如

Controller

src

测试

地址

http://localhost:10091/test/src

使用场景

img

th:utext

识别相关标签并且输出文本内容

例如

Controller

utext

测试

地址

http://localhost:10091/test/utext

th:value

th:value="${brand.name}"，(用对象对name值替换value属性)

例如

Controller

containsKey

测试

地址

http://localhost:10091/test/containsKey

没有关键词

有关键词

th:href

动态绑定超级链接的href

如果是需要从model中取值的话，写法为

th:href="@{${model中的name值}}"

有的时候我们不止需要从model中进行取值，还需写字符串与model中的值进行拼接，写法为

th:href="@{'字符串'+${model中的nam值}}"

例如

多条件拼接

（）里面代表拼接的内容

例如

Controller

href

测试

地址

http://localhost:10091/test/href

使用场景

#maps.containsKey(传入的参数,'key')

#maps.containsKey(searchMap,'keywords') 判断searchMap是否包含keywords

例如

Controller

maps

测试

地址

http://localhost:10091/test/maps

没有关键词

有关键词

strings

#strings.abbreviate(传入的参数,字符数)

设置显示文本的字符数

例如

Controller

strings

测试

地址

http://localhost:10091/test/strings

#strings.startsWith(传入的参数,'字符串')

字符串以xx开头

例如

Controller

strings

测试

地址

http://localhost:10091/test/strings

#strings.replace(传入的参数,'被替换的字符串','替换后的字符串')

字符串替换

例如

Controller

strings

测试

地址

http://localhost:10091/test/strings

#numbers.sequence

生成一个具有整数序列的数组。从xx开始，到xx结束

方法

numbers

测试

地址

http://localhost:10091/test/numbers

三元表达式

操作元有三个，第一个是条件表达式，剩余两个为值，条件表达式为真时运算取第一个值，为假时取第二个值。

方法

numbers

测试

地址

http://localhost:10091/test/numbers

th:class

生成class属性

方法

numbers

测试

地址

http://localhost:10091/test/numbers

判断是否相等

方法

numbers

Thymeleaf

远程仓库

https://gitee.com/wang-rongyue-666/thymeleaf

Project version: 3.0.11.RELEASE

1.Thymeleaf介绍

它的特点便是：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

XML

有效的XML

XHTML

有效的XHTML

HTML5

旧版HTML5

另请注意，验证仅适用于XML和XHTML模板。

2.Springboot整合thymeleaf

使用springboot 来集成使用Thymeleaf可以大大减少单纯使用thymleaf的代码量，所以我们接下来使用springboot集成使用thymeleaf.

实现的步骤为：

创建一个sprinboot项目

添加thymeleaf的起步依赖

添加spring web的起步依赖

编写html 使用thymleaf的语法获取变量对应后台传递的值

编写controller 设置变量的值到model中

(1)创建工程

创建一个独立的工程springboot-thymeleaf,该工程为案例工程

pom.xml依赖

(2)创建html

在resources中创建templates目录，在templates目录创建 demo1.html

解释：

<html xmlns:th="http://www.thymeleaf.org">:这句声明使用thymeleaf标签

<p th:text="${hello}"></p>:这句使用 th:text=“${变量名}” 表示使用thymeleaf获取文本数据，类似于EL表达式。

创建启动类com.wry.ThymeleafApplication

(3)修改application.yml配置

resource资源热更新

创建application.yml,并设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试。

在这里，其实还有一些默认配置，比如视图前缀：classpath:/templates/,视图后缀：.html

org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties部分源码如下：

(4)控制层

创建controller用于测试后台设置数据到model中。

创建com.wry.controller.TestController

(5)测试

地址

http://localhost:10091/test/text

3 Thymeleaf基本语法（重点）

th:text

输出文本

例如

Controller

text

(5)测试

地址

http://localhost:10091/test/text

th:action

定义后台控制器路径，类似<form>标签的action属性。

例如

html

Controller

action

th:each

对象遍历，功能类似jstl中的<c:forEach>标签。

例如

Controller

each

list输出

例如

Controller

each

测试

地址

http://localhost:10091/test/each

Map输出

例如

Controller

each

测试

地址

http://localhost:10091/test/each

状态

例如

Controller

each

测试

地址

http://localhost:10091/test/each

数组输出

例如

Controller

each

测试

地址

http://localhost:10091/test/each

Date输出

例如

Controller

date

测试

地址

http://localhost:10091/test/date

th:if条件

条件成立时输出指定语句

例如

Controller

ifif

测试

地址

http://localhost:10091/test/if

th:unless条件

条件不成立时输出指定语句

例如

Controller

unless

测试

地址

http://localhost:10091/test/unless

th:fragment

定义一个公共模块

th:include

引入一个公共模块

例如

Controller

include

测试

地址

http://localhost:10091/test/include

、

th:src

动态绑定图片的src

例如

Controller

src

测试

地址

http://localhost:10091/test/src

使用场景

img

th:utext

识别相关标签并且输出文本内容

例如

Controller

utext

测试

地址

http://localhost:10091/test/utext

th:value

th:value="${brand.name}"，(用对象对name值替换value属性)

例如

Controller

containsKey

测试

地址

http://localhost:10091/test/containsKey

没有关键词

有关键词

th:href

动态绑定超级链接的href

如果是需要从model中取值的话，写法为

th:href="@{${model中的name值}}"

有的时候我们不止需要从model中进行取值，还需写字符串与model中的值进行拼接，写法为

th:href="@{'字符串'+${model中的nam值}}"

例如

多条件拼接

（）里面代表拼接的内容

例如

Controller

href

测试

地址

http://localhost:10091/test/href

使用场景

#maps.containsKey(传入的参数,'key')

#maps.containsKey(searchMap,'keywords') 判断searchMap是否包含keywords

例如

Controller

maps

测试

地址

http://localhost:10091/test/maps

没有关键词

有关键词

strings

#strings.abbreviate(传入的参数,字符数)

设置显示文本的字符数

例如

Controller

strings

测试

地址

http://localhost:10091/test/strings

#strings.startsWith(传入的参数,'字符串')

字符串以xx开头

例如

Controller

strings

测试

地址

http://localhost:10091/test/strings

#strings.replace(传入的参数,'被替换的字符串','替换后的字符串')

字符串替换

例如

Controller

strings

测试

地址

http://localhost:10091/test/strings

#numbers.sequence

生成一个具有整数序列的数组。从xx开始，到xx结束

方法

numbers

测试

地址

http://localhost:10091/test/numbers

三元表达式

操作元有三个，第一个是条件表达式，剩余两个为值，条件表达式为真时运算取第一个值，为假时取第二个值。

方法

numbers

测试

地址

http://localhost:10091/test/numbers

th:class

生成class属性

方法

numbers

测试

地址

http://localhost:10091/test/numbers

判断是否相等

方法

numbers