1、框架介绍

spring boot 是内嵌web容器的，推荐打成jar包不是war包，你如果想使用jsp也可以，自建WEB-INF/web.xml，然后像往常一样使用jsp，打成war包使用外部容器即可，这就相当于失去了一些spring boot的特性了，因此，spring boot并不推荐使用jsp，而是使用Thymeleaf来进行数据渲染。Thymeleaf是用来开发web和独立环境项目的服务器端的Java模版引擎。Thymeleaf与SpringMVC的视图技术及SpringBoot的自动化配置集成非常完美，几乎没有任何成本，你只用关注Thymeleaf的语法即可。因此，我们可以像以前操作jsp一样来操作Thymeleaf，代码几乎没有任何区别，就是在模板语法上有区别。

2、引入依赖

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

3、名称空间

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
...
</body>
</html>

4、表达式

表达式名字	语法	用途
变量取值	${…}	获取request域、session域、对象等值
选择变量	*{…}	获取上下文对象值
消息	#{…}	获取国际化等值
链接	@{…}	生成链接
片段表达式	~{…}	引入公共页面片段

5、字面量

文本值：‘Hello World’
数字值：123、3.14
布尔值：true、false
空值：null
变量：student、user、person

6、文本操作

字符串拼接：+

<span th:text="'欢迎您:' + ${user.name} + '!'"></span>

变量的替换：|The name is ${name}|

<span th:text="|欢迎您:${user.name}|"></span>

7、算术运算

加：+
减：-
乘：*
除：/
取余：%

8、比较运算

大于：gt（>）
小于：lt（<）
大于等于：ge（>=）
小于等于：le（<=）
等于：eq（==）
不等于：ne（!=）

9、布尔运算

与：and
或：or
非：not

10、条件判断

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

<span th:if="${user.age} > 24">青年</span>

如果表达式的值为true，则标签会渲染到页面，否则不进行渲染。

以下情况被认定为true：

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

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

11、分支操作

这里要使用两个指令：th:switch 和 th:case

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

12、迭代操作

循环也是非常频繁使用的需求，我们使用th:each指令来完成：假如有用户的集合：users在Context中。

<tr th:each="user : ${users}">
    <td th:text="${user.name}">Onions</td>
    <td th:text="${user.age}">2.41</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值

13、脚本模板

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

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

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

14、设置属性值

设置单个值： th:attr

<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>

其替代写法： th:xxxx

<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>

设置多个值：

<img src="../../images/gtvglogo.png"  th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

15、片段的抽取

抽取公共片段：

footer.html

<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

main.html

<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

插入模板使用：

th:insert（将公共片段整个插入到声明引入的元素中）
th:replace（将声明引入的元素替换为公共片段）
th:include（将被引入的片段的内容包含进这个标签中）

抽取片段
<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

渲染效果
<div>
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

16、自定义变量

看下面的案例：

<h2>
    <p>Name: <span th:text="${user.name}">Jack</span>.</p>
    <p>Age: <span th:text="${user.age}">21</span>.</p>
    <p>friend: <span th:text="${user.friend.name}">Rose</span>.</p>
</h2>

我们获取用户的所有信息，分别展示。

当数据量比较多的时候，频繁的写user.就会非常麻烦。

因此，Thymeleaf提供了自定义变量来解决：

首先在 h2上用 th:object="${user}"获取user的值并且保存。

然后在 h2 内部的任意元素上，可以通过 *{属性名}的方式，来获取user中的属性，这样就省去了大量的user.前缀了

<h2 th:object="${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>

整合篇：零基础学习与使用Thymeleaf

目录