参考:https://www.cnblogs.com/msi-chen/p/10974009.html#_label0

thymeleaf是SpringBoot官方支持的渲染模板。

thymeleaf与SpringMVC的视图技术，以及SpringBoot的自动化配置继承非常完美（牛皮）

Themeleaf不需要服务端的支持，就能够以html的方式打开，这样就能够方便前端人员独立设计与调试，jsp就不行了，不启动服务器jsp都没法运行出来结果。

Thymeleaf的常用语法

thymeleaf的主要作用是把model中的数据渲染到html当中去，因此语法主要是如何解析model中的数据。

变量
方法
条件判断
循环
运算

逻辑运算
布尔运算
比较运算
条件运算

其它

1.变量

Thymeleaf通过${}来获取model中变量，称为ognl表达式。

属性名： th:text --- 指令

<h1>
   你好：<span th:text="{user.name}">请跟我来</span>
</h1>

变量_动静结合

thymeleaf希望动静情况下都能够直接运行，所以采用动静结合

Thymeleaf中所有的表达式都需要写在”指令“当中，指令是html5中的自定义属性，

在thymeleaf中，所有的指令都是以th:开头，

如果我们不经过SpringMVC，而是直接用浏览器打开编写的页面：在静态环境下,th指令不会被识别，但是也不会报错，而是显示<span>标签的缺省默认值："请跟我来

向下兼容

如果浏览器不支持H5，那么将th:text改为data-th-text，Thymeleaf也可以兼容

escape

th:text处于安全考虑，会将表达式读取到的数值进行处理，防止html注入。

例如：<p>你好</p>将会被格式化输出为$lt;p$gt;你好$lt;/p$lt;

如果想不进行格式化：th:utext替代

变量_ognl表达式的语法糖

当属性名也是个变量的时候，使用${user.name}自然是不行的

改用类似js的语法：${user['name']}

变量_自定义变量

Thymeleaf提供自定义变量来解决频繁的写相同内容的途径

如：需要重复写user.name user.age user.friend.name,那么可以

<h2 th:object="${user}"> //注意这里，使用th:object="${user}"获取倒了user的值，并且保存

　　<p>Name: <span th:text="*{name}">Jack</span>.</p> //使用*{属性名}的方式，获取属性

　　<p>Age: <span th:text="*{age}">21</span>.</p>

　　<p>friend: <span th:text="*{friend.name}">Rose</span>.</p>

</h2>

2.方法

ognl表达式中的方法调用

ognl表达式本身就支持方法调用

<p  th:text = "*{name.split(' ').[0]}">Jack</p>
//表示使用空格分隔的结果的第一段内容？

能自行获取一些特殊的对象

<p th:text="$m{#dates.format(today,'yyy-MM-dd')}" >2018-04-25</p>
//就会形成这样的格式

方法_字面量

基本类型如：字符串，数值，布尔等，并不希望被thymeleaf解析为变量，此时称为字面量

字符串字面量： th:text = " 'renshujia' " ---- 使用单引号

数字字面量： th:text =“ 1000 ” ---- 数字直接写，因为变量总不可能用数字命名吧

布尔字面值：都是用在th:if = "true" ，如果满足条件，就显示指定的数据？

<div th:if="true">
    你填的是true
</div>

方法_拼接

常常遇到字符串与表达式拼接的情况

thymeleaf对字符串拼接进行了简化,使用一对 |

<span th:text= "|欢迎你:${user.name}|"></span>
等效于
"'欢迎你:'+ ${user.name}"

3.运算

${}内部是通过OGNL表达式引擎解析的，外部的是通过Thymeleaf的引擎解析，因此运算符尽量放在${}外进行

算术运算

+ - * / %

<span th:text="${user.age}"></span>         //21
<span th:text="${user.age}%2 == 0"></span>  //false

比较运算

支持的比较运算：>, <, >= and <= ，但是>, <不能直接使用，因为xml会解析为标签，要使用别名。

注意 == and != 不仅可以比较数值，类似于equals的功能

可以使用的别名：gt (>), lt (<), ge (>=), le (<=), not (!). Also eq (==), neq/ne (!=).

条件运算

三元运算 a? x:y

<span th:text = "${user.sex}? '男':'女'"></span>

默认值 a ?: x (x为默认值）注意 ?: 无空格

<span th:text="${user.name} ?: '二狗'"></span>

4.循环

使用th:each指令来完成，

加入有用户的集合：users在Context当中

<tr th:each="user : ${users}">
  <td th:text = "${user.name}"> renshujia</td>
  <td th:text = "${user.age}"> 22</td>
</tr>

${users} 是要遍历的集合，可以是以下类型：

Iterable，实现了Iterable接口的类
Enumeration，枚举
Interator，迭代器
Map，遍历得到的是Map.Entry
Array，数组及其它一切符合数组结果的对象

在迭代的同时，我们可以获取迭代的状态对象

<tr th:each="user,stat : ${users}">
    <td th:text="${user.name}">Onions</td>
    <td th:text="${user.age}">2.41</td>
</tr>

stat的属性包含：

index，从0开始的角标
count，元素的个数，从1开始
size，总元素个数
current，当前遍历到的元素
even/odd，返回是否为奇偶，boolean值
first/last，返回是否为第一或最后，boolean值

5.逻辑判断

有了if+else，我们能够实现一切功能

Thymeleaf中使用th:if 或者 th:unless ，两者的意思恰好相反。

<span th:if="${user.age} > 24">老油条</span>

如果表达式的值为true，则标签会渲染到页面（注意是决定标签渲染与否，如果为假标签都不渲染了），否则不进行渲染。

以下情况被认定为true：

表达式值为true
表达式值为非0数值
表达式值为非0字符
表达式值为字符串，但不是"false","no","off"
表达式不是布尔、字符串、数字、字符中的任何一种

其他情况，包括null都被认定为false

分支控制switch

使用th:switch & th:case

<div th:switch="${user.role}">
  <p th:case="'admin'">用户是管理员</p>
  <p th:case="'manager'">用户是经理</p>
  <p th:case="*">用户是别的玩意</p>
</div>

一旦有case成立，则不会在判断了。与java中的switch是一样的；

另外th:case="*"表示默认，放最后。

6.JS模板

模板不仅可以渲染html，也可以对JS中的进行预处理，而且为了在纯静态环境下可以运行，其thymeleaf代码可以被注释起来。

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

在script标签中通过th:inline="javascript"来声明这是要特殊处理的js脚本

语法结构：

const user = /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";

因为Thymeleaf被注释起来，因此即便是静态环境下， js代码也不会报错，而是采用表达式后面跟着的默认值。且User对象会被直接处理为json格式。

与Springboot完美结合的Thymeleaf