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

清疚 2023-01-06 05:51 202阅读 0赞

### 目录 ###

*  1、框架介绍
 *  2、引入依赖
 *  3、名称空间
 *  4、表达式
 *  5、字面量
 *  6、文本操作
 *  7、算术运算
 *  8、比较运算
 *  9、布尔运算
 *  10、条件判断
 *  11、分支操作
 *  12、迭代操作
 *  13、脚本模板
 *  14、设置属性值
 *  15、片段的抽取
 *  16、自定义变量
 *  17、属性优先级

--------------------

**配套资料，免费下载**  
链接：https://pan.baidu.com/s/1jA217UgqXpONi\_fV-aOzqw  
提取码：bm2g  
复制这段内容后打开百度网盘手机App，操作更方便哦

# 1、框架介绍 #

![img][]

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、表达式 #

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

# 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` ，两者的意思恰好相反。

如果表达式的值为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代码可以被注释起来：

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

# 14、设置属性值 #

设置单个值： th:attr

其替代写法： th:xxxx

设置多个值：

# 15、片段的抽取 #

抽取公共片段：

footer.html

main.html

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

插入模板使用：

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

抽取片段
    <footer th:fragment="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>
        © 2011 The Good Thymes Virtual Grocery
        </footer>
    </div>
    
    <footer>
    © 2011 The Good Thymes Virtual Grocery
    </footer>
    
    <div>
    © 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>

# 17、属性优先级 #

![image-20210104212338109][]

[img]: /images/20221119/721d54be488f41e58540bfb38da286e5.png
[image-20210104212338109]: /images/20221119/bfd31f9c53264d19a1bffdb4888a6d49.png