介绍
Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理 HTML,XML,JavaScript,CSS 甚至纯文本。
thymeleaf 的主要目标是提供一种优雅且高度可维护的模板创建方式。为此,它以“自然模板”的概念为基础,以不影响模板用作设计原型的方式将其逻辑注入模板文件。这样可以改善设计沟通,并缩小设计团队与开发团队之间的差距。
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的html文档。从字面上理解模板引擎
,最重要的就是模板二字,这个意思就是做好一个模板后套入对应位置的数据,最终以html的格式展示出来,这就是模板引擎的作用。
开箱即用的 Thymeleaf 允许处理六种模板,每种模板都称为 Template Mode :
-
HTML
-
XML
-
TEXT
-
JAVASCRIPT
-
CSS
-
RAW
有两种标记模板模式(HTML
和XML
),三种文本模板模式(TEXT
,JAVASCRIPT
和CSS
)和无操作模板模式(RAW
)。
HTML
模板模式将允许任何类型的 HTMLImporting,包括 HTML5,HTML 4 和 XHTML。将不执行任何验证或格式正确性检查,并且模板代码/结构将在输出中得到最大程度的尊重。
在pom.xml中添加以下依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
语法
th:block
th:block是一个属性容器,允许模板开发人员指定他们想要的属性。Thymeleaf 将执行这些属性,然后简单地使块消失,而不留下痕迹。
因此,在有些情况它可能有用。比如,当创建迭代表时,每个元素需要多个<tr>
。使用th:block和 table配合,可以批量获取到数据并组装成对应的前端页面显示,好处是如果没有获取到数据,则不会显示任何内容
th:fragment
th:fragment 属性来定义被包含的模版⽚段,以供其他模版包含。
th:with
th:with 进行指定局部变量,局部变量是指定义在模版⽚段中的变量,并且该变量的作⽤域为所在的模版⽚段。
<tr th:each="user : ${userList}"> ... </tr>
如上所示 th:each 迭代中的 user 其实就是局部变量,仅在 <tr> 标签范围内可⽤,包括所有子元素,可⽤于在该标签中执⾏优先级低于 th:each 的任何其他 th:* 属性。
th:text与th:utext
用th:text不会解析html,用th:utext会解析html,在页面中显示相应的样式
#strings
#strings
是一个内置的对象,它提供了一系列字符串处理的方法。
unescapeJava
Java风格的转义字符串意味着字符串中的特殊字符(如双引号、反斜杠等)被替换为它们的转义序列.\"
转换为 "
escapeJava
用于将一个字符串转换成Java风格的转义字符串。这意味着字符串中的特殊字符(如引号、反斜杠等)会被替换成它们的转义序列,这样字符串就可以安全地嵌入到Java代码中,而不会引起语法错误或安全问题。"
(双引号) 转换为 \"
th:classappend
已有class属性值追加
th:each
th:each="user, userStat : ${userList}" 中的 ${userList} 是后台传过来的集合,遍历集合userList并执行循环体内的代码,user代表集合中的当前元素。
userStat 是循环体的信息,通过该变量可以获取如下信息
index: 当前迭代对象的 index (从 0 开始计算)
count: 当前迭代对象的个数(从 1 开始计算) 这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值,当前循环是否是偶数/奇数(从 0 开始计算)
first: 布尔值,当前循环是否是第一个
last: 布尔值,当前循环是否是最后一个
th:src
一个用于绑定图像源(source)的语法
th:alt
alt
属性用于定义图像的替代文本,当图像无法显示时,它会在浏览器中显示替代文本的内容。
th:title
th:title="${info.storeName}"
:这是Thymeleaf的一个表达式,用于绑定 info.storeName
作为图片的替代文本。
th:alt
th:alt="${info.storeName}"
:这是Thymeleaf的一个表达式,用于绑定 info.storeName
作为图片的替代文本。
th:data-*自定义属性
自定义属性。
th:object
用于指定一个JavaBean作为模板的上下文对象。这个对象的所有属性都可以在模板中直接访问,而不需要使用 ${}
表达式。
请注意,th:object
指令必须位于模板的开始部分,并且只能使用一次。此外,如果对象属性包含空格或其他特殊字符,可以使用 #{...}
语法来访问属性,例如 #{user.name}
。
链接表达式: @{…}
在Thymeleaf 中,如果想引入链接比如link,href,src,需要使用@{资源地址}
引入资源。其中资源地址可以static目录下的静态资源,也可以是互联网中的绝对资源。
引入css
<link rel="stylesheet" th:href="@{index.css}">
引入JavaScript:
<script type="text/javascript" th:src="@{index.js}"></script>
超链接:
<a th:href="@{index.html}">超链接</a>
变量表达式: ${...}
在Thymeleaf中可以通过${…}进行取值,这点和ONGL表达式语法一致。
取普通字符串:
如果在controller中的Model直接存储某字符串,我们可以直接${对象名}
进行取值。完整代码如下:
<h2>普通字符串</h2>
<table border="0">
<tr>
<td th:text="'我的名字是:'+${name}"></td>
</tr>
</table>
取JavaBean对象:
取JavaBean对象也很容易,因为JavaBean自身有一些其他属性,所以咱们就可以使用${对象名.对象属性}
或者${对象名['对象属性']}
来取值,这和JavaScript语法是不是很相似呢!除此之外,如果该JavaBean如果写了get方法,咱们也可以通过get方法取值例如${对象.get方法名}
完整代码如下:
<h2>JavaBean对象</h2>
<table bgcolor="#ffe4c4" border="1">
<tr>
<td>介绍</td>
<td th:text="${user.name}"></td>
</tr>
<tr>
<td>年龄</td>
<td th:text="${user['age']}"></td>
</tr>
<tr>
<td>介绍</td>
<td th:text="${user.getDetail()}"></td>
</tr>
</table>
取List集合(each):
因为List集合是个有序列表,里面内容可能不止一个,你需要遍历List对其中对象取值,而遍历需要用到标签:th:each
,具体使用为 <tr th:each="item:${userlist}">
,其中item就相当于遍历每一次的对象名,在下面的作用域可以直接使用,而userlist就是你在Model中储存的List的名称。
直接取Map:
很多时候我们不存JavaBean而是将一些值放入Map中,再将Map存在Model中,我们就需要对Map取值,对于Map取值你可以${Map名['key']}
来进行取值。也可以通过${Map名.key}
取值,当然你也可以使用${map.get('key')}
(java语法)来取值。
遍历Map:
如果说你想遍历Map获取它的key和value那也是可以的,这里就要使用和List相似的遍历方法,使用th:each="item:${Map名}"
进行遍历,在下面只需使用item.key
和item.value
即可获得值。完整代码如下:
<h2>Map遍历</h2>
<table bgcolor="#ffe4c4" border="1">
<tr th:each="item:${map}">
<td th:text="${item.key}"></td>
<td th:text="${item.value}"></td>
</tr>
</table>
选择变量表达式: *{...}
变量表达式不仅可以写成${...},而且还可以写成*{...}。
但是,有一个重要的区别:星号语法对选定对象而不是整个上下文评估表达式。也就是说,只要没有选定的对象,美元(${…}
)和星号(*{...}
)的语法就完全一样。
什么是选定对象?使用th:object
属性的表达式的结果。就可以选定对象,具体实例如下:
<div th:object="${user}">
<p>Name: <span th:text="*{name}">赛</span>.</p>
<p>Age: <span th:text="*{age}">18</span>.</p>
<p>Detail: <span th:text="*{detail}">好好学习</span>.</p>
</div>
当然*{…}
也可和${…}
混用。上面的代码如果不使用选定对象,完全等价于:
<div >
<p>Name: <span th:text="*{user.name}">赛</span>.</p>
<p>Age: <span th:text="${user.age}">18</span>.</p>
<p>Detail: <span th:text="${user.detail}">好好学习</span>.</p>
</div>
消息表达: #{...}
文本外部化是从模板文件中提取模板代码的片段,以便可以将它们保存在单独的文件(通常是.properties文件)中,文本的外部化片段通常称为“消息”。通俗易懂的来说#{…}
语法就是用来读取配置文件中数据的。在Thymeleaf你可以使用#{...}
语法获取消息,
首先在templates目录下建立home.properties
中写入以下内容:
bigsai.nane=bigsai
bigsai.age=22
province=Jiang Su
在application.properties
中加入以下内容:
spring.messages.basename=templates/home
这样我们就可以在Thymeleaf中读取配置的文件了,完整代码如下:
<h2>消息表达</h2>
<table bgcolor="#ffe4c4" border="1">
<tr>
<td>name</td>
<td th:text="#{bigsai.name}"></td>
</tr>
<tr>
<td>年龄</td>
<td th:text="#{bigsai.age}"></td>
</tr>
<tr>
<td>province</td>
<td th:text="#{province}"></td>
</tr>
</table>