全网最通俗易懂的Thymeleaf模板引擎（没有之一）

迷南。 2024-04-19 08:10 73阅读 0赞

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

#### 1、变量 ####

##### 1.1、普通变量 #####

*  实体类

public class User { 
        String name;
        int age;
        User friend;// 对象类型属性
    }

*  controller

@GetMapping("show2")
    public String show2(Model model){ 
        User user = new User();
        user.setAge(21);
        user.setName("Jack Chen");
        user.setFriend(new User("李小龙", 30));
        model.addAttribute("user", user);
        return "show2";
    }

*  语法说明：  
    Thymeleaf通过`${}`来获取model中的变量，注意这不是el表达式，而是ognl表达式，但是语法非常像。

前端show2.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70]

*  在Thymeleaf中所有指令都是以`th:`开头。因为表达式`${user.name}`是写在自定义属性中，因此在静态环境下，表达式的内容会被当做是普通字符串，浏览器会自动忽略这些指令，在静态环境下会显示请登录，在动态环境下会显示后端的java的值。
 *  向下兼容写法：如果不支持这种`th:`的命名空间写法，那么可以把`th:text`换成 `data-th-text`，Thymeleaf也可以兼容。
 *  th:text\`指令出于安全考虑，会把表达式读取到的值进行处理，防止html的注入。
 *  ognl表达式的语法糖，刚才获取变量值，我们使用的是经典的`对象.属性名`方式。但有些情况下，我们的属性名可能本身也是变量，怎么办？ognl提供了类似js的语法方式：  
    例如：`${user.name}` 可以写作`${user['name']}`

##### 1.2、自定义变量 #####

<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}">
        <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>

*  首先在 `h2`上 用 `th:object="${user}"`获取user的值，并且保存
 *  然后，在`h2`内部的任意元素上，可以通过 `*{属性名}`的方式，来获取user中的属性，这样就省去了大量的`user.`前缀了

#### 2、方法 ####

*  ognl表达式中的方法调用，ognl表达式本身就支持方法调用，例如：

<h2 th:object="${user}">
        <p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
        <p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
    </h2>

*  这里我们调用了name（是一个字符串）的split方法。

##### Thymeleaf内置对象 #####

*  Thymeleaf中提供了一些内置对象，并且在这些对象中提供了一些方法，方便我们来调用。获取这些对象，需要使用`#对象名`来引用。
 *  一些环境相关对象

<table> 
 <thead> 
  <tr> 
   <th>对象</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>#ctx</td> 
   <td>获取Thymeleaf自己的Context对象</td> 
  </tr> 
  <tr> 
   <td>#requset</td> 
   <td>如果是web程序，可以获取HttpServletRequest对象</td> 
  </tr> 
  <tr> 
   <td>#response</td> 
   <td>如果是web程序，可以获取HttpServletReponse对象</td> 
  </tr> 
  <tr> 
   <td>#session</td> 
   <td>如果是web程序，可以获取HttpSession对象</td> 
  </tr> 
  <tr> 
   <td>#servletContext</td> 
   <td>如果是web程序，可以获取HttpServletContext对象</td> 
  </tr> 
 </tbody> 
</table>

*  Thymeleaf提供的全局对象：

<table> 
 <thead> 
  <tr> 
   <th>对象</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>#dates</td> 
   <td>处理java.util.date的工具对象</td> 
  </tr> 
  <tr> 
   <td>#calendars</td> 
   <td>处理java.util.calendar的工具对象</td> 
  </tr> 
  <tr> 
   <td>#numbers</td> 
   <td>用来对数字格式化的方法</td> 
  </tr> 
  <tr> 
   <td>#strings</td> 
   <td>用来处理字符串的方法</td> 
  </tr> 
  <tr> 
   <td>#bools</td> 
   <td>用来判断布尔值的方法</td> 
  </tr> 
  <tr> 
   <td>#arrays</td> 
   <td>用来护理数组的方法</td> 
  </tr> 
  <tr> 
   <td>#lists</td> 
   <td>用来处理List集合的方法</td> 
  </tr> 
  <tr> 
   <td>#sets</td> 
   <td>用来处理set集合的方法</td> 
  </tr> 
  <tr> 
   <td>#maps</td> 
   <td>`用来处理map集合的方法</td> 
  </tr> 
 </tbody> 
</table>

*  举例  
    我们在环境变量中添加日期类型对象

@GetMapping("show3")
    public String show3(Model model){ 
        model.addAttribute("today", new Date());
        return "show3";
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 1]

#### 3、字面值 ####

有的时候，我们需要在指令中填写基本类型如：字符串、数值、布尔等，并不希望被Thymeleaf解析为变量，这个时候称为字面值。

*  字符串字面值  
    使用一对`'`引用的内容就是字符串字面值了：th:text\`中的thymeleaf并不会被认为是变量，而是一个字符串。

<p>
      你正在观看 <span th:text="'thymeleaf'">template</span> 的字符串常量值.
    </p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 2]

*  数字字面值  
    数字不需要任何特殊语法， 写的什么就是什么，而且可以直接进行算术运算

<p>今年是 <span th:text="2018">1900</span>.</p>
    <p>两年后将会是 <span th:text="2018 + 2">1902</span>.</p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 3]

*  布尔字面值  
    布尔类型的字面值是true或false：

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

这里引用了一个`th:if`指令，跟vue中的`v-if`类似

#### 4、拼接 ####

我们经常会用到普通字符串与表达式拼接的情况：

字符串字面值需要用`''`，拼接起来非常麻烦，Thymeleaf对此进行了简化，使用一对`|`即可：

与上面是完全等效的，这样就省去了字符串字面值的书写。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 4]

#### 5、运算 ####

需要注意：`${}`内部的是通过OGNL表达式引擎解析的，外部的才是通过Thymeleaf的引擎解析，因此运算符尽量放在`${}`外进行。

*  算术运算  
    支持的算术运算符：\`+ - \* / %

![在这里插入图片描述][20190915184204295.png]

*  比较运算  
    支持的比较运算：`>`, `<`, `>=` and `<=` ，但是`>`, `<`不能直接使用，因为xml会解析为标签，要使用别名。  
    注意 `==` and `!=`不仅可以比较数值，类似于equals的功能。  
    可以使用的别名：`gt (>), lt (<), ge (>=), le (<=), not (!). Also eq (==), neq/ne (!=).`
 *  三元运算

*  三元运算符的三个部分：conditon ? then : else  
    condition：条件  
    then：条件成立的结果  
    else：不成立的结果  
    其中的每一个部分都可以是Thymeleaf中的任意表达式。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 5]
 *  默认值  
    有的时候，我们取一个值可能为空，这个时候需要做非空判断，可以使用 `表达式 ?: 默认值`简写：

*  当前面的表达式值为null时，就会使用后面的默认值。  
    注意：`?:`之间没有空格。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 6]

#### 6、循环 ####

循环也是非常频繁使用的需求，我们使用`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值

#### 7、逻辑判断 ####

有了`if和else`，我们能实现一切功能。  
Thymeleaf中使用`th:if` 或者 `th:unless` ，两者的意思恰好相反。

如果表达式的值为true，则标签会渲染到页面，否则不进行渲染。  
以下情况被认定为true：

*  表达式值为true
 *  表达式值为非0数值
 *  表达式值为非0字符
 *  表达式值为字符串，但不是`"false"`,`"no"`,`"off"`
 *  表达式不是布尔、字符串、数字、字符中的任何一种  
    其它情况包括null都被认定为false  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 7]

#### 8、分支控制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>

需要注意的是，一旦有一个th:case成立，其它的则不再判断。与java中的switch是一样的。  
另外`th:case="*"`表示默认，放最后。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 8]  
页面：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 9]

#### 9、JS模板 ####

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

*  在script标签中通过th:inline="javascript"来声明这是要特殊处理的js脚本
 *  语法结构：  
    const user = /*\[\[Thymeleaf表达式\]\]*/ “静态环境下的默认值”;  
    因为Thymeleaf被注释起来，因此即便是静态环境下， js代码也不会报错，而是采用表达式后面跟着的默认值。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 10]  
    我们的User对象被直接处理为json格式了，非常方便。  
    控制台输出：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 11]

#### 10、url ####

链接表达式在构建URL并向其添加有用的上下文和会话信息(通常称为URL重写的过程)。  
绝对路径

form链接：这里访问controller为message/message的路径

带参数：

访问资源：默认访问static下面的静态资源

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/39ad49145133464b9cb477465bb463aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb4e2bc04dd0488db8c52e619991526c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6aa7485263784201b5ec57e05590a895.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dcae28bbb5ac440692d3fb7209e062ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/28bdc61f04d04d9999d0d7e8b8036113.png
[20190915184204295.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/29b37da728a349d7a996e5c7459eb668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d3881e2ccc2145388902742186942a94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/00e7095cbba24fbbb86984ab2b35ce76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/118c752157be47a599470f646fda470b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6dcf9e175f034312aeb552c3d5f9dab4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ddcebff086ee4b749f70db765040ce24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fbb0167f5c984824a959e96fb4f34f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4ODQ5NQ_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/09b14f40d2ba4c3b896eb853195b8396.png