JavaWeb - thymeleaf

介绍

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>