Spring Boot(四)：Thymeleaf 模板引擎使用详解以及Thymeleaf相比freemarker和velocity对比

Myth丶恋晨 2022-04-25 07:08 789阅读 0赞

SpringBoot 推荐使用Thymeleaf 来代替JSP,那么Spring为什么会推荐使用Thymeleaf呢？

Thymeleaf使用了自然的模板技术，意味着Thymeleaf的模板语法并不会破坏文档结构，模板依旧是有效的XML文档，

***Thymeleaf相比freemarker和velocity:***

Thymeleaf会在运行期替换掉静态值，freemaker和velocity则是连续的文本处理器；

三者格式相比： velocity  :   <p> $message <p>

FreeMarker  :  <p>  $\{message\}  <p>

Thymeleaf  :   <p th:text = "$\{message\}">Hello！！<p>

由于Thymeleaf使用了XML DOM 解析器，因此它并不适合处理大规模的xml文件。

***Thymeleaf --URL : ***

<a  th:href = "@{url}">text</a>

***Thymeleaf --条件求值*** ***:***

<a  th : href = “@{url}“ th:unless = ${session.user} != null}>login</a>

***Thymeleaf --for循环******:***

***官方讲解Thymeleaf的特点***

*  **1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。**
 *  **2.Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。**
 *  **3.Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。**

*** ***

## 标准表达式语法 ##

它们分为四类：

*  1.变量表达式
 *  2.选择或星号表达式
 *  3.文字国际化表达式
 *  4.URL 表达式

### 变量表达式 ###

变量表达式即 OGNL 表达式或 Spring EL 表达式(在 Spring 术语中也叫 model attributes)。如下所示：  
`${session.user.name}`

它们将以HTML标签的一个属性来表示：

### 选择(星号)表达式 ###

选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如下：  
`*{customer.name}`

被指定的 object 由 th:object 属性定义：

### 文字国际化表达式 ###

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用 Key 索引 Value，还可以提供一组参数(可选).

#{main.title}  
    #{message.entrycreated(${entryId})}

可以在模板文件中找到这样的表达式代码：

### URL 表达式 ###

URL 表达式指的是把一个有用的上下文或回话信息添加到 URL，这个过程经常被叫做 URL 重写。  
`@{/order/list}`

URL还可以设置参数：  
`@{/order/details(id=${orderId})}`

相对路径：  
`@{../documents/report}`

让我们看这些表达式：

### 变量表达式和星号表达有什么区别吗？ ###

如果不考虑上下文的情况下，两者没有区别；星号语法评估在选定对象上表达，而不是整个上下文  
什么是选定对象？就是父标签的值，如下：

<div th:object="${session.user}">
      <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
      <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
    </div>

这是完全等价于：

<div th:object="${session.user}">
      <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
      <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
    </div>

当然，美元符号和星号语法可以混合使用：

<div th:object="${session.user}">
          <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
          <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
          <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
      </div>

### 表达式支持的语法 ###

字面（Literals）

*  文本文字（Text literals）: `'one text', 'Another one!',…`
 *  数字文本（Number literals）: `0, 34, 3.0, 12.3,…`
 *  布尔文本（Boolean literals）:`true, false`
 *  空（Null literal）:`null`
 *  文字标记（Literal tokens）:`one, sometext, main,…`

文本操作（Text operations）

*  字符串连接(String concatenation):`+`
 *  文本替换（Literal substitutions）:`|The name is ${name}|`

算术运算（Arithmetic operations）

*  二元运算符（Binary operators）:`+, -, *, /, %`
 *  减号（单目运算符）Minus sign (unary operator):`-`

布尔操作（Boolean operations）

*  二元运算符（Binary operators）:`and, or`
 *  布尔否定（一元运算符）Boolean negation (unary operator):`!, not`

比较和等价(Comparisons and equality)

*  比较（Comparators）:`>, <, >=, <= (gt, lt, ge, le)`
 *  等值运算符（Equality operators）:`==, != (eq, ne)`

条件运算符（Conditional operators）

*  If-then:`(if) ? (then)`
 *  If-then-else:`(if) ? (then) : (else)`
 *  Default: (value) ?:`(defaultvalue)`

所有这些特征可以被组合并嵌套：

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

## 几种常用的使用方法 ##

### 1、赋值、字符串拼接 ###

<p  th:text="${collect.description}">description</p>
    <span th:text="'Welcome to our application, ' + ${user.name} + '!'">

字符串拼接还有另外一种简洁的写法

### 2、条件判断 If/Unless ###

Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，`<a>`标签只有在`th:if`中条件成立时才显示：

<a th:if="${myself=='yes'}" > </i> </a>
    <a th:unless=${session.user != null} th:href="@{/login}" >Login</a>

`th:unless` 于 `th:if` 恰好相反，只有表达式中的条件不成立，才会显示其内容。

也可以使用 `(if) ? (then) : (else)`这种语法来判断显示的内容

### 3、for 循环 ###

<tr  th:each="collect,iterStat : ${collects}"> 
       <th scope="row" th:text="${collect.id}">1</th>
       <td >
          <img th:src="${collect.webLogo}"/>
       </td>
       <td th:text="${collect.url}">Mark</td>
       <td th:text="${collect.title}">Otto</td>
       <td th:text="${collect.description}">@mdo</td>
       <td th:text="${terStat.index}">index</td>
    </tr>

iterStat称作状态变量，属性有：

*  index:当前迭代对象的 index（从0开始计算）
 *  count: 当前迭代对象的 index(从1开始计算)
 *  size:被迭代对象的大小
 *  current:当前迭代变量
 *  even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
 *  first:布尔值，当前循环是否是第一个
 *  last:布尔值，当前循环是否是最后一个

### 4、URL ###

URL 在 Web 应用模板中占据着十分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 `@{...}`来处理的。  
如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用 `th:href`，`th:src` 等属性，下面是一个例子

<a  th:href="@{/standard/{type}(type=${type})}">view</a>
    
    
    <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

设置背景

根据属性值改变背景

几点说明：

*  上例中 URL 最后的`(orderId=${o.id})`表示将括号内的内容作为 URL 参数处理，该语法避免使用字符串拼接，大大提高了可读性
 *  `@{...}`表达式中可以通过`{orderId}`访问 Context 中的 orderId 变量
 *  `@{/order}`是 Context 相关的相对路径，在渲染时会自动添加上当前 Web 应用的 Context 名字，假设 context 名字为 app，那么结果应该是 `/app/order`

### 5、内联 js ###

内联文本：\[\[...\]\] 内联文本的表示方式，使用时，必须先用`th:inline="text/javascript/none"`激活，`th:inline`可以在父级标签内使用，甚至作为 body 的标签。内联文本尽管比`th:text`的代码少，不利于原型显示。

js 附加代码：

/*[+
    var msg = 'This is a working application';
    +]*/

js 移除代码：

/*[- */
    var msg = 'This is a non-working template';
    /* -]*/

### 6、内嵌变量 ###

为了模板更加易用，Thymeleaf 还提供了一系列 Utility 对象（内置于 Context 中），可以通过 \# 直接访问：

*  dates ： *java.util.Date的功能方法类。*
 *  calendars : *类似\#dates，面向java.util.Calendar*
 *  numbers : *格式化数字的功能方法类*
 *  strings : *字符串对象的功能类，contains,startWiths,prepending/appending等等。*
 *  objects: *对objects的功能类操作。*
 *  bools: *对布尔值求值的功能方法。*
 *  arrays：*对数组的功能类方法。*
 *  lists: *对lists功能类方法*
 *  sets
 *  maps  
    ...

下面用一段代码来举例一些常用的方法：

dates

/*
     * Format date with the specified pattern
     * Also works with arrays, lists or sets
     */
    ${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
    ${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
    ${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
    ${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
    
    /*
     * Create a date (java.util.Date) object for the current date and time
     */
    ${#dates.createNow()}
    
    /*
     * Create a date (java.util.Date) object for the current date (time set to 00:00)
     */
    ${#dates.createToday()}

strings

/*
     * Check whether a String is empty (or null). Performs a trim() operation before check
     * Also works with arrays, lists or sets
     */
    ${#strings.isEmpty(name)}
    ${#strings.arrayIsEmpty(nameArr)}
    ${#strings.listIsEmpty(nameList)}
    ${#strings.setIsEmpty(nameSet)}
    
    /*
     * Check whether a String starts or ends with a fragment
     * Also works with arrays, lists or sets
     */
    ${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
    ${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*
    
    /*
     * Compute length
     * Also works with arrays, lists or sets
     */
    ${#strings.length(str)}
    
    /*
     * Null-safe comparison and concatenation
     */
    ${#strings.equals(str)}
    ${#strings.equalsIgnoreCase(str)}
    ${#strings.concat(str)}
    ${#strings.concatReplaceNulls(str)}
    
    /*
     * Random
     */
    ${#strings.randomAlphanumeric(count)}

## 使用 Thymeleaf 布局 ##

Spring Boot 2.0 将布局单独提取了出来，需要单独引入依赖：thymeleaf-layout-dialect。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
    </dependency>

定义代码片段

在页面任何地方引入：

th:insert 和 th:replace 区别，insert 只是加载，replace 是替换。Thymeleaf 3.0 推荐使用 th:insert 替换 2.0 的 th:replace。

返回的 HTML 如下：

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变 content 区域的页面

<body class="layout-fixed">
      <div th:fragment="navbar"  class="wrapper"  role="navigation">
        <div th:replace="fragments/header :: header">Header</div>
        <div th:replace="fragments/left :: left">left</div>
        <div th:replace="fragments/sidebar :: sidebar">sidebar</div>
        <div layout:fragment="content" id="content" ></div>
        <div th:replace="fragments/footer :: footer">footer</div>
      </div>
    </body>

任何页面想使用这样的布局值只需要替换中见的 content 模块即可

<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
     <body>
        <section layout:fragment="content">
      ...

也可以在引用模版的时候传参

layout 是文件地址，如果有文件夹可以这样写`fileName/layout:htmlhead`，htmlhead 是指定义的代码片段 如`th:fragment="copy"`