SpringBoot2.x 集成 Thymeleaf的詳細教程

更新時間：2021年07月10日 09:55:06 作者：RtxTitanV

本文主要對SpringBoot2.x集成Thymeleaf及其常用語法進行簡單總結(jié)，其中SpringBoot使用的2.4.5版本。對SpringBoot2.x 集成 Thymeleaf知識感興趣的朋友跟隨小編一起看看吧

一、Thymeleaf簡介

Thymeleaf是面向Web和獨立環(huán)境的現(xiàn)代服務(wù)器Java模板引擎，能夠處理HTML，XML，JavaScript，CSS甚至純文本。

Thymeleaf旨在提供一個優(yōu)雅的、高度可維護的創(chuàng)建模板的方式。為了實現(xiàn)這一目標(biāo)，Thymeleaf建立在自然模板的概念上，將其邏輯注入到模板文件中，不會影響模板設(shè)計原型。這改善了設(shè)計的溝通，彌合了設(shè)計和開發(fā)團隊之間的差距。

Thymeleaf從設(shè)計之初就遵循Web標(biāo)準(zhǔn)——特別是HTML5標(biāo)準(zhǔn)，如果需要，Thymeleaf允許創(chuàng)建完全符合HTML5驗證標(biāo)準(zhǔn)的模板。

二、集成Thymeleaf

通過Maven新建一個名為springboot-thymeleaf的項目。

1.引入依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf 起步依賴 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- lombok插件 -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.8</version>
</dependency>

2.編寫配置文件

spring:
  thymeleaf:
    # 在構(gòu)建URL時用于查看名稱的前綴，默認為classpath:/templates/
    prefix: classpath:/templates/
    # 在構(gòu)建URL時附加到視圖名稱的后綴，默認為.html
    suffix: .html
    # 模板模式，默認為HTML
    mode: HTML
    # 模板文件編碼，默認為UTF-8
    encoding: UTF-8
    # 是否啟用模板緩存，默認為true，表示啟用，false不啟用
    cache: false
    # 在呈現(xiàn)模板之前是否檢查模板存在與否，默認為true
    check-template: true
    # 是否檢查模板位置存在與否，默認為true
    check-template-location: true

更多的配置可以查看ThymeleafProperties類：

3.準(zhǔn)備模板

首先按照配置文件中配置的模板前綴在resources下創(chuàng)建一個templates目錄，用于存放模板。然后創(chuàng)建如下名為hello.html的模板：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello Thymeleaf</title>
</head>
<body>
    <div>
        <span th:text="${hello}">th:text文本替換會轉(zhuǎn)義html標(biāo)簽，不解析html</span>
    </div>
    <hr/>
    <div>
        <span th:utext="${hello}">th:utext文本替換不會轉(zhuǎn)義html標(biāo)簽，會解析html</span>
    </div>
</body>
</html>

<html>標(biāo)簽中的xmlns:th="http://www.thymeleaf.org聲明使用Thymeleaf標(biāo)簽。th:text屬性會計算表達式的值將結(jié)果設(shè)置為標(biāo)簽的標(biāo)簽體。但它會轉(zhuǎn)義HTML標(biāo)簽，HTML標(biāo)簽會直接顯示在瀏覽器上。th:utext屬性不會轉(zhuǎn)義HTML標(biāo)簽，HTML標(biāo)簽會被瀏覽器解析。${hello}是一個變量表達式，它包含一個OGNL（Object-Graph Navigation Language）的表達式，它會從上下文中獲取名為hello的變量，然后在模板上進行渲染。

4.Controller層

創(chuàng)建Controller并將模板中要獲取的變量設(shè)置到Model對象中，如果Controller類上使用的是@Controller注解，則可以返回跟模板名稱相同的字符串（不包括前綴和后綴），視圖解析器會解析出視圖具體地址并生成視圖，然后返回給前端控制器進行渲染：

package com.rtxtitanv.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @author rtxtitanv
 * @version 1.0.0
 * @name com.rtxtitanv.controller.ThymeleafController
 * @description ThymeleafController
 * @date 2021/7/3 19:23
 */
@Controller
public class ThymeleafController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("hello", "<h1>Hello Thymeleaf</h1>");
        return "hello";
    }
}

運行項目，瀏覽器訪問http://localhost:8080/hello，發(fā)現(xiàn)數(shù)據(jù)成功渲染到模板：

如果Controller類上使用的是@RestController注解，則需要將視圖添加到ModelAndView對象中并返回：

package com.rtxtitanv.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author rtxtitanv
 * @version 1.0.0
 * @name com.rtxtitanv.controller.TestController
 * @description TestController
 * @date 2021/7/3 19:43
 */
@RequestMapping("/test")
@RestController
public class TestController {

    @GetMapping("/hello")
    public ModelAndView hello() {
        ModelAndView modelAndView = new ModelAndView("hello");
        modelAndView.addObject("hello", "<h1>hello thymeleaf</h1>");
        return modelAndView;
    }
}

運行項目，瀏覽器訪問http://localhost:8080/test/hello，發(fā)現(xiàn)數(shù)據(jù)成功渲染到模板：

三、Thymeleaf常用語法

1.標(biāo)準(zhǔn)表達式

（1）變量表達式

${}表達式實際上是在上下⽂中包含的變量的映射上執(zhí)行的OGNL（Object-Graph Navigation Language）對象。例如：${session.user.name}。

在Spring MVC啟用的應(yīng)用程序中，OGNL將被替換為SpringEL，但其語法與OGNL相似（實際上，在大多數(shù)常見情況下完全相同）。

模板variable.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>變量表達式</title>
</head>
<body>
    <p>變量表達式：${}</p>
    <div>
        <p>id: <span th:text="${user.id}"></span></p>
        <p>username: <span th:text="${user.username}"></span></p>
        <p>password: <span th:text="${user.password}"></span></p>
    </div>
</body>
</html>

User實體類：

package com.rtxtitanv.model;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author rtxtitanv
 * @version 1.0.0
 * @name com.rtxtitanv.model.User
 * @description User
 * @date 2021/7/3 19:37
 */
@AllArgsConstructor
@NoArgsConstructor
@Data
public class User {
    private Long id;
    private String username;
    private String password;
}

ThymeleafController中新增以下方法：

@GetMapping("/variable")
public String variable(Model model) {
    model.addAttribute("user", new User(1L, "趙云", "qwe123"));
    return "variable";
}

效果：

在${}表達式中還可以使用基本對象和工具類對象。這些對象都以#開頭?；緦ο螅?/p>

#ctx：上下文對象。
#vars：上下文變量。
#locale：上下文區(qū)域設(shè)置。
#request：（僅在Web Contexts中）HttpServletRequest對象。
#response：（僅在Web上下⽂中）HttpServletResponse對象。
#session：（僅在Web上下⽂中）HttpSession對象。
#servletContext：（僅在Web上下⽂中）ServletContext對象。

工具類對象：

#execInfo：有關(guān)正在處理的模板的信息。
#messages：用于在變量表達式中獲取外部化消息的方法，與使用#{}語法獲取的方式相同。
#uris：轉(zhuǎn)義URL/URI部分的方法。
#conversions：執(zhí)行配置的轉(zhuǎn)換服務(wù)的方法。
#dates：java.util.Date對象的方法。
#calendars：類似于#dates，但對應(yīng)java.util.Calendar對象。
#numbers：用于格式化數(shù)字對象的方法。
#strings：字符串對象的方法。
#objects：一般對象的方法。
#bools：布爾相關(guān)方法。
#arrays：Array的方法。
#lists：List的方法。
#sets：Set的方法。
#maps：Map的方法。
#aggregates：在數(shù)組或集合上創(chuàng)建聚合的方法。
#ids：處理可能重復(fù)的id屬性的方法。

這些對象的詳細方法可以查看官方文檔：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects。

（2）選擇表達式（星號語法）

星號語法*{}計算所選對象而不是整個上下文的表達式。也就是說，只要沒有選定的對象（選定對象為th:object屬性的表達式結(jié)果），$和*語法就會完全相同。

模板asterisk.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>選擇表達式（星號語法）</title>
</head>
<body>
    <p>*語法</p>
    <div th:object="${user}">
        <p>id: <span th:text="*{id}"></span></p>
        <p>username: <span th:text="*{username}"></span></p>
        <p>password: <span th:text="*{password}"></span></p>
    </div>
    <p>$語法</p>
    <div>
        <p>id: <span th:text="${user.id}"></span></p>
        <p>username: <span th:text="${user.username}"></span></p>
        <p>password: <span th:text="${user.password}"></span></p>
    </div>
    <p>$和*混合使用</p>
    <div th:object="${user}">
        <p>id: <span th:text="*{id}"></span></p>
        <p>username: <span th:text="${user.username}"></span></p>
        <p>password: <span th:text="*{password}"></span></p>
    </div>
    <p>對象選擇到位時所選對象將作為#object表達式變量可⽤于$表達式</p>
    <div th:object="${user}">
        <p>id: <span th:text="${#object.id}"></span></p>
        <p>username: <span th:text="${user.username}"></span></p>
        <p>password: <span th:text="*{password}"></span></p>
    </div>
    <p>沒有執(zhí)⾏對象選擇時$和*語法等效</p>
    <div>
        <p>id: <span th:text="*{user.id}"></span></p>
        <p>username: <span th:text="*{user.username}"></span></p>
        <p>password: <span th:text="*{user.password}"></span></p>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/asterisk")
public String star(Model model) {
    model.addAttribute("user", new User(1L, "趙云", "qwe123"));
    return "asterisk";
}

效果：

（3）URL表達式

URL表達式的語法為@{}。使用th:href屬性可以對鏈接進行渲染。

模板url.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>URL表達式</title>
</head>
<body>
    <ol>
        <li><a href="user/one.html" rel="external nofollow"  rel="external nofollow"  th:href="@{/user/one(id=${user.id})}" rel="external nofollow" >設(shè)置單個參數(shù)</a></li>
        <li><a href="user/list.html" rel="external nofollow"  th:href="@{/user/list(username=${user.username},password=${user.password})}" rel="external nofollow" >設(shè)置多個參數(shù)</a></li>
        <li><a href="user/one.html" rel="external nofollow"  rel="external nofollow"  th:href="@{/user/one/{id}(id=${user.id})}" rel="external nofollow" >URL路徑中也允許使⽤變量模板（rest風(fēng)格參數(shù)）</a></li>
        <li><a href="user/update.html" rel="external nofollow"  th:href="@{${url}(id=${user.id})}" rel="external nofollow" >URL基數(shù)也可以是計算另⼀個表達式的結(jié)果</a></li>
        <li><a href="store/user/update.html" rel="external nofollow"  th:href="@{'/store' + ${url}(id=${user.id})}" rel="external nofollow" >url基數(shù)也可以是計算另⼀個表達式的結(jié)果</a></li>
    </ol>
    <hr/>
    <!-- th:action設(shè)置表單提交地址 -->
    <form id="login-form" th:action="@{/hello}">
        <button>提交</button>
    </form>
</body>
</html>

注意：
th:href屬性會計算要使用的URL并將該值設(shè)置為<a>標(biāo)簽的href屬性。URL中允許使用表達式的URL參數(shù)，設(shè)置多個參數(shù)將以,分隔。

URL路徑中也可以使用變量模板，即可以設(shè)置rest風(fēng)格的參數(shù)。/開頭的相對URL將自動以應(yīng)用上下文名稱為前綴。如果cookie未啟用或還未知道，可能會在相對URL中添加;jsessionid=...后綴以便保留會話。這被稱為URL重寫。

th:href屬性允許在模板中有一個靜態(tài)的href屬性，這樣在直接打開原型模板時，模板鏈接可以被導(dǎo)航。

ThymeleafController中新增以下方法：

@GetMapping("/url")
public String url(Model model) {
    model.addAttribute("user", new User(1L, "趙云", "qwe123"));
    model.addAttribute("url", "/user/update");
    return "url";
}

效果：

從上到下依次點擊5個鏈接和提交表單的結(jié)果：

（4）字面量

字面量（Literals）分為：

文本文字（Text literals）：包含在單引號之間的字符串，可以包含任何字符，其中的單引號需要\'轉(zhuǎn)義。
數(shù)字字面量（Number literals）：數(shù)字。
布爾字面量（Boolean literals）：包含true和false。
null字面量（The null literal）：null。
文本符號（Literal tokens）：數(shù)字，布爾和null字面量實際是文本符號的特殊情況，文本符號不需要引號包圍，只允許使用字母（A-Z和a-z）、數(shù)字（0-9）、括號、點（.）、連字符（-）和下劃線（_）。

模板literal.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>字面量</title>
</head>
<body>
    <div>
        <ul>
            <li>
                <p><span>文本文字：</span><span th:text="'Hello World'">⽂本文字只是包含在單引號之間的字符串，可以包含任何字符，其中的單引號需要\'轉(zhuǎn)義</span></p>
            </li>
            <li>
                <p><span>數(shù)字字面量：</span><span th:text="2020 + 1">數(shù)字字面量就是數(shù)字</span></p>
            </li>
            <li>
                <p><span>布爾字面量：</span><span th:if="${flag} == false">布爾字⾯量包含true和false</span></p>
            </li>
            <li>
                <p><span>null字面量：</span><span th:if="${flag} != null">Thymeleaf標(biāo)準(zhǔn)表達式語法中也可以使⽤null字⾯量</span></p>
            </li>
            <li>
                <p><span>文本符號：</span><span th:text="Hello_.-._World">數(shù)字，布爾和null字面量實際上是⽂本符號的特殊情況</span></p>
            </li>
        </ul>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/literal")
public String literal(Model model) {
    model.addAttribute("flag", false);
    return "literal";
}

效果：

（5）文本操作

這里的文本操作包含：

追加文本（Appending texts），即字符串連接：無論是文本常量還是表達式結(jié)果都可以使用+運算符進行拼接。
字面替換（Literal substitutions）：字面替換可以輕松地對包含變量值的字符串進行格式化，而不需要在字面后加+，這些替換必需用|包圍。使用字面替換也可以實現(xiàn)和追加文本相同的效果。

模板text.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文本操作（字符串連接）</title>
</head>
<body>
    <div>
        <ul>
            <li>
                <p><span>方式1（+）：</span><span th:text="'username: ' + ${user.username} + ', password: ' + ${user.password}"></span></p>
            </li>
            <li>
                <p><span>方式2（|）：</span><span th:text="|username: ${user.username}, password: ${user.password}|"></span></p>
            </li>
            <li>
                <!-- 只有變量或消息表達式（${}，*{}，#{}）才允許包含在||中 -->
                <p><span>方式3（+與|混合）：</span><span th:text="'username: ' + ${user.username} + |, password: ${user.password}|"></span></p>
            </li>
            <li>
                <p><span>方式4（#strings.concat）：</span><span th:text="${#strings.concat('username: ', user.username, ', password: ', user.password)}"></span></p>
            </li>
            <li>
                <p><span>方式5（#strings.append）：</span><span th:text="${#strings.append('username: ' + user.username, ', password: ' + user.password)}"></span></p>
            </li>
            <li>
                <p><span>方式6（#strings.prepend）：</span><span th:text="${#strings.prepend(', password: ' + user.password, 'username: ' + user.username)}"></span></p>
            </li>
            <li>
                <p><span>方式7（#strings.arrayJoin）：</span><span th:text="${#strings.arrayJoin(new String[] {'username: ', user.username, ', password: ', user.password}, '')}"></span></p>
            </li>
        </ul>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/text")
public String text(Model model) {
    model.addAttribute("user", new User(1L, "趙云", "qwe123"));
    return "text";
}

效果：

（6）運算符

運算符：

算數(shù)運算符：+、-、*、/（div）、%（mod）。
比較運算符：>（gt）、<（lt）、>=（ge）、<=（le）。
等值運算符：==（eq）、!=（ne）。
布爾運算符：and、or、!（not）。

模板operation.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>運算符</title>
</head>
<body>
    <p th:text="|x=${x}, y=${y}|"></p>
    <p>算術(shù)運算符：+、-、*、/（div）、%（mod）</p>
    <div>
        <ul>
            <li>
                <p><span>(y + x % 3) * (y - x / 2) ：</span><span th:text="(${y} + ${x} % 3) * (${y} - ${x} / 2)"></span></p>
            </li>
            <li>
                <!-- 運算符也可以在OGNL變量表達式本身中應(yīng)⽤（這種情況下由OGNL解析執(zhí)⾏，⽽不是Thymeleaf標(biāo)準(zhǔn)表達式引擎來解析執(zhí)⾏） -->
                <p><span>(x * 5 + 8 div y) mod (x - y) ：</span><span th:text="${(x * 5 + 8 div y) mod (x - y)}"></span></p>
            </li>
        </ul>
    </div>
    <p>比較和等值運算符：>（gt）、<（lt）、>=（ge）、<=（le）、==（eq）、!=（ne）</p>
    <div>
        <ul>
            <li>
                <p><span>x > 5：</span><span th:text="${x} > 5"></span></p>
            </li>
            <li>
                <p><span>y le 2：</span><span th:text="${y le 2}"></span></p>
            </li>
            <li>
                <p><span>(x * y) < 50：</span><span th:text="${(x * y) < 50}"></span></p>
            </li>
            <li>
                <p><span>y ge x：</span><span th:text="${y} ge ${x}"></span></p>
            </li>
            <li>
                <p><span>x == y：</span><span th:text="${x == y}"></span></p>
            </li>
            <li>
                <p><span>x ne y：</span><span th:text="${x} ne ${y}"></span></p>
            </li>
        </ul>
    </div>
    <p>布爾運算符：and、or、!（not）</p>
    <div>
        <ul>
            <li>
                <p><span>y lt x and -x gt -y：</span><span th:text="${y} lt ${x} and ${-x} gt ${-y}"></span></p>
            </li>
            <li>
                <p><span>-x <= -y or y >= x：</span><span th:text="${-x <= -y or y >= x}"></span></p>
            </li>
            <li>
                <p><span>!(x != y)：</span><span th:text="${!(x != y)}"></span></p>
            </li>
            <li>
                <p><span>not (x eq y)：</span><span th:text="${not (x eq y)}"></span></p>
            </li>
        </ul>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/operation")
public String operator(Model model) {
    model.addAttribute("x", 10);
    model.addAttribute("y", 3);
    return "operation";
}

效果：

（7）條件表達式

條件表達式：

If-then：(if) ? (then)。if表達式結(jié)果為true，則條件表達式結(jié)果為then表達式結(jié)果，否則為null。
If-then-else：(if) ? (then) : (else)。if表達式結(jié)果為true，則條件表達式結(jié)果為then表達式結(jié)果，否則為else表達式結(jié)果。
Default（默認表達式）：(value) ?: (defaultvalue)。value不為null，則結(jié)果為value，否則結(jié)果為defaultvalue。

模板conditional-expr.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>條件表達式、默認表達式、_符號</title>
</head>
<body>
    <p th:text="|grade: ${grade}, age: ${age}|"></p>
    <div>
        <ul>
            <li>
                <!-- (if) ? (then) : (else) -->
                <p><span>成績是否及格：</span><span th:text="${grade >= 60} ? '及格' : '不及格'"></span></p>
            </li>
            <li>
                <!-- (if) ? (then)，else表達式可以省略，在這種情況下，如果條件為false，則返回null值 -->
                <p><span>成績是否是正常數(shù)據(jù)：</span><span th:text="${grade >= 0 and grade <= 100} ? '正常數(shù)據(jù)'"></span></p>
            </li>
            <li>
                <!-- 條件表達式可以使⽤括號嵌套 -->
                <p><span>成績對應(yīng)的級別：</span><span th:text="${grade >= 0 and grade <= 100} ? (${grade >= 60} ? (${grade} >= 70 ? (${grade >= 90} ? '優(yōu)' : '良') : '差') : '不及格') : '無效數(shù)據(jù)'"></span></p>
            </li>
            <li>
                <!-- 默認表達式 第一個表達式結(jié)果不為null，則結(jié)果使用第一個表達式的值，結(jié)果為null，則使用第二個表達式 -->
                <p><span>年齡：</span><span th:text="${age} ?: '沒有年齡數(shù)據(jù)'"></span></p>
            </li>
            <li>
                <p><span>默認表達式嵌套示例：</span><span th:text="${age} ?: (${grade} ?: '年齡和成績數(shù)據(jù)都不存在')"></span></p>
            </li>
            <li>
                <!-- _符號指定表達式不處理任何結(jié)果，這允許開發(fā)⼈員使⽤原型⽂本作為默認值 -->
                <p><span>年齡：</span><span th:text="${age} ?: _">沒有年齡數(shù)據(jù)</span></p>
            </li>
        </ul>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/conditional/expr")
public String conditionExpr(Model model) {
    model.addAttribute("grade", 85);
    model.addAttribute("age", null);
    return "conditional-expr";
}

效果：

grade設(shè)置為-1，age設(shè)置為20。效果如下：

2.設(shè)置屬性

使用th:attr屬性可以設(shè)置標(biāo)簽的任何屬性值，th:attr只需要通過一個表達式將值賦給對應(yīng)的屬性，并且還可以通過,分隔的形式設(shè)置多個屬性值。不過使用th:attr設(shè)置屬性不太優(yōu)雅，所以用的不多，一般使用其他th:*屬性的形式設(shè)置指定屬性，例如要設(shè)置value屬性，可以使用th:value，要設(shè)置action屬性，可以使用th:action，要設(shè)置href屬性，可以使用th:href，具體都有哪些屬性可以這樣設(shè)置可以參考官方文檔。

th:attrprepend和th:attrappend可以給屬性設(shè)置前綴和后綴。Thymeleaf標(biāo)準(zhǔn)方言中還有兩個特定的附加屬性th:classappend和th:styleappend，用于將CSS的class或style樣式追加到元素中，而不覆蓋現(xiàn)有屬性。

HTML中有布爾屬性這個概念，布爾屬性沒有值，并且一旦這個布爾屬性存在則意味著屬性值為true。但是在XHTML中，這些屬性只取它本身作為屬性值。例如checked屬性。Thymeleaf標(biāo)準(zhǔn)方言允許通過計算條件表達式的結(jié)果來設(shè)置這些屬性的值，如果條件表達式結(jié)果為true，則該屬性將被設(shè)置為其固定值，如果評估為false，則不會設(shè)置該屬性。

Thymeleaf支持使用HTML5自定義屬性語法data-{prefix}-{name}來處理模板，這不需要使用任何命名空間。Thymeleaf使這種語法自動適用于所有的方言（不僅僅是標(biāo)準(zhǔn)的方法）。

模板attr.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>設(shè)置屬性</title>
</head>
<body>
    <div>
        <p>設(shè)置單個任何屬性：<input type="submit" value="提交" th:attr="value=${success}"></p>
        <!-- th:attr可以以逗號分隔的形式來設(shè)置多個屬性值 -->
        <p>設(shè)置多個任何屬性：<input type="submit" value="提交" th:attr="value=${success},class='btn btn-primary'"></p>
        <p>設(shè)置單個指定屬性：<input type="submit" value="提交" th:value="${success}"></p>
        <p>設(shè)置多個指定屬性：<input type="submit" value="提交" th:value="${success}" th:class="'btn btn-primary'"></p>
        <!-- th:attrappend設(shè)置后綴 -->
        <p>設(shè)置屬性后綴：<input type="submit" value="提交" th:attrappend="value=${' ' + success}"></p>
        <!-- th:attrprepend設(shè)置前綴 -->
        <p>設(shè)置屬性前綴：<input type="submit" value="提交" th:attrprepend="value=${success + ' '}"></p>
        <!-- th:classappend追加class樣式 -->
        <p>追加class樣式：<input type="submit" value="提交" class='btn btn-primary' th:classappend="'btn-warning'"></p>
        <!-- th:styleappend追加style樣式 -->
        <p>追加style樣式：<input type="submit" value="提交" style="text-align: left" th:styleappend="'color: green'"></p>
        <!-- 如果條件表達式結(jié)果為true，則該屬性將被設(shè)置為其固定值，如果結(jié)果為false，則不會設(shè)置該屬性 -->
        <p>設(shè)置布爾屬性checked：<input type="checkbox" name="active" th:checked="${active}"></p>
        <!--
            data-{prefix}-{name}語法是在HTML5中編寫⾃定義屬性的標(biāo)準(zhǔn)⽅式，不需要使⽤任何命名空間
            Thymeleaf使這種語法自動適用于所有的方言（不僅僅是標(biāo)準(zhǔn)的方法）
        -->
        <p>使用HTML5自定義屬性語法來處理模版：<span data-th-text="${success}"></span></p>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/attr")
public String attr(Model model) {
    model.addAttribute("success", "成功");
    model.addAttribute("active", true);
    return "attr";
}

效果：

f12查看源碼可見屬性設(shè)置成功：

active設(shè)置為false。checkbox沒有選中，查看源碼也沒有設(shè)置checked屬性：

3.條件判斷

th:if屬性可以通過判斷一個條件是否滿足，來決定是否將模板片段顯示在結(jié)果中，只有滿足條件才將模板片段顯示在結(jié)果中。而th:unless屬性則正好與th:if屬性相反。通過th:switch和th:case可以在模板中使用一種與Java中的Swicth語句等效的結(jié)構(gòu)有條件地顯示模板內(nèi)容。

模板conditional.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>條件判斷</title>
</head>
<body>
    <p th:text="|age: ${age}, userLevel: ${userLevel}, rank: ${rank}|"></p>
    <div th:if="${age} >= 18 and ${userLevel} eq 6">
        <span>年齡大于18并且用戶等級等于6，則顯示此元素</span>
    </div>
    <div th:unless="!(${age} < 18 or ${userLevel} ne 6)">
        <span>與if條件判斷相反，年齡小于18或用戶等級不等于6，則顯示此元素</span>
    </div>
    <div th:if="'null'">
        <span>表達式的值不為null，th:if判定此表達式的值為true</span>
    </div>
    <div th:if="null">
        <span>表達式的值為null，th:if判定此表達式的值為false</span>
    </div>
    <div th:if="${age}">
        <span>值是數(shù)字并且不為0，判定此表達式的值為true</span>
    </div>
    <div th:if="0">
        <span>值是數(shù)字但為0，判定此表達式的值為false</span>
    </div>
    <div th:if="A">
        <span>值是一個字符并且不為0，判定此表達式的值為true</span>
    </div>
    <div th:if="'string'">
        <span>值是一個字符串，不是false，off或no，判定此表達式的值為true</span>
    </div>
    <div th:if="'false'">
        <span>值是字符串false，判定此表達式的值為false</span>
    </div>
    <div th:if="'off'">
        <span>值是字符串off，判定此表達式的值為false</span>
    </div>
    <div th:if="'no'">
        <span>值是字符串no，判定此表達式的值為false</span>
    </div>
    <hr/>
    <div th:switch="${rank}">
        <span th:case="1">青銅</span>
        <span th:case="2">白銀</span>
        <span th:case="3">黃金</span>
        <span th:case="4">鉑金</span>
        <span th:case="5">鉆石</span>
        <span th:case="6">王者</span>
        <span th:case="*">無段位</span>
    </div>
</body>
</html>

注意：

th:if屬性不僅僅以布爾值作為判斷條件。它將按照以下規(guī)則判定指定的表達式值為true：
如果表達式的值不為null。（如果表達式的值為null，th:if判定此表達式的值為false。）

如果值為布爾值，則為true。如果值是數(shù)字且不為0。

如果值是一個字符且不為0。如果值是一個字符串，不是"false"，“off"或"no”。

如果值不是布爾值，數(shù)字，字符或字符串。
同一個Switch語句中只要第一個th:case的值為true，則其他的th:case屬性將被視為false。Switch語句的default選項指定為th:case=“*”。

ThymeleafController中新增以下方法：

@GetMapping("/conditional")
public String condition(Model model) {
    Map<String, Object> map = new HashMap<>();
    map.put("age", 10);
    map.put("userLevel", 6);
    map.put("rank", 5);
    model.addAllAttributes(map);
    return "conditional";
}

效果：

age設(shè)置為20，userLevel設(shè)置為6，rank設(shè)置為0。效果如下：

4.循環(huán)迭代

使用th:each屬性可以迭代以下對象：

任何實現(xiàn)java.util.Iterable接口的對象。
任何實現(xiàn)java.util.Enumeration接口的對象。
任何實現(xiàn)java.util.Iterator接口的對象。其值將被迭代器返回，不需要在內(nèi)存中緩存所有值。
任何實現(xiàn)java.util.Map接口的對象。迭代map時，迭代變量將是java.util.Map.Entry類型。
任何數(shù)組。
任何其將被視為包含對象本身的單值列表。

（1）迭代List

模板each-list.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循環(huán)迭代List</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>index</th>
                <th>count</th>
                <th>size</th>
                <th>current</th>
                <th>even</th>
                <th>odd</th>
                <th>first</th>
                <th>last</th>
            </tr>
        </thead>
        <tbody>
            <!-- ${users}為迭代表達式或被迭代變量，userStat為狀態(tài)變量，user為迭代變量 -->
            <tr th:each="user,userStat : ${users}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.password}"></td>
                <!-- 當(dāng)前迭代索引，從0開始 -->
                <td th:text="${userStat.index}"></td>
                <!-- 當(dāng)前迭代索引，從1開始 -->
                <td th:text="${userStat.count}"></td>
                <!-- 被迭代變量中元素總數(shù) -->
                <td th:text="${userStat.size}"></td>
                <!-- 每次迭代的迭代變量 -->
                <td th:text="${userStat.current}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是奇數(shù)，從0算起 -->
                <td th:text="${userStat.even}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是偶數(shù)，從0算起 -->
                <td th:text="${userStat.odd}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是第一個 -->
                <td th:text="${userStat.first}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是最后一個 -->
                <td th:text="${userStat.last}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

狀態(tài)變量是在使用th:each時Thymeleaf提供的一種用于跟蹤迭代狀態(tài)的機制。狀態(tài)變量在th:each屬性中通過在迭代變量之后直接寫其名稱來定義，用,分隔。與迭代變量一樣，狀態(tài)變量的作用范圍也是th:each屬性所在標(biāo)簽定義的代碼片段中。如果沒有顯式地設(shè)置狀態(tài)變量，Thymeleaf總是會創(chuàng)建一個名為迭代變量名加上Stat后綴的狀態(tài)變量。

ThymeleafController中新增以下方法：

@GetMapping("/each/list")
public String eachList(ModelMap model) {
    List<User> users = new ArrayList<>();
    users.add(new User(1L, "劉備", "123132"));
    users.add(new User(2L, "關(guān)羽", "321231"));
    users.add(new User(3L, "張飛", "213312"));
    model.addAttribute("users", users);
    return "each-list";
}

效果：

（2）迭代Map

模板each-map.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循環(huán)迭代Map</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>key</th>
                <th>index</th>
                <th>count</th>
                <th>size</th>
                <th>current</th>
                <th>even</th>
                <th>odd</th>
                <th>first</th>
                <th>last</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="map,mapStat : ${userMap}">
                <td th:text="${mapStat.current.value.id}"></td>
                <td th:text="${mapStat.current.value.username}"></td>
                <td th:text="${mapStat.current.value.password}"></td>
                <td th:text="${mapStat.current.key}"></td>
                <td th:text="${mapStat.index}"></td>
                <td th:text="${mapStat.count}"></td>
                <td th:text="${mapStat.size}"></td>
                <td th:text="${mapStat.current}"></td>
                <td th:text="${mapStat.even}"></td>
                <td th:text="${mapStat.odd}"></td>
                <td th:text="${mapStat.first}"></td>
                <td th:text="${mapStat.last}"></td>
            </tr>
        </tbody>
    </table>
    <hr/>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>key</th>
                <th>index</th>
                <th>count</th>
                <th>size</th>
                <th>current</th>
                <th>even</th>
                <th>odd</th>
                <th>first</th>
                <th>last</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="map,mapStat : ${userMap}">
                <td th:text="${map.value.id}"></td>
                <td th:text="${map.value.username}"></td>
                <td th:text="${map.value.password}"></td>
                <td th:text="${map.key}"></td>
                <td th:text="${mapStat.index}"></td>
                <td th:text="${mapStat.count}"></td>
                <td th:text="${mapStat.size}"></td>
                <td th:text="${mapStat.current}"></td>
                <td th:text="${mapStat.even}"></td>
                <td th:text="${mapStat.odd}"></td>
                <td th:text="${mapStat.first}"></td>
                <td th:text="${mapStat.last}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/each/map")
public String eachMap(Model model) {
    Map<String, Object> map = new HashMap<>(16);
    map.put("user1", new User(1L, "劉備", "123132"));
    map.put("user2", new User(2L, "關(guān)羽", "321231"));
    map.put("user3", new User(3L, "張飛", "213312"));
    model.addAttribute("userMap", map);
    return "each-map";
}

效果：

（3）迭代Array

模板each-array.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循環(huán)迭代Array</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>index</th>
                <th>count</th>
                <th>size</th>
                <th>current</th>
                <th>even</th>
                <th>odd</th>
                <th>first</th>
                <th>last</th>
            </tr>
        </thead>
        <tbody>
            <!-- ${users}為迭代表達式或被迭代變量，userStat為狀態(tài)變量，user為迭代變量 -->
            <tr th:each="user,userStat : ${users}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.password}"></td>
                <!-- 當(dāng)前迭代索引，從0開始 -->
                <td th:text="${userStat.index}"></td>
                <!-- 當(dāng)前迭代索引，從1開始 -->
                <td th:text="${userStat.count}"></td>
                <!-- 被迭代變量中元素總數(shù) -->
                <td th:text="${userStat.size}"></td>
                <!-- 每次迭代的迭代變量 -->
                <td th:text="${userStat.current}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是奇數(shù)，從0算起 -->
                <td th:text="${userStat.even}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是偶數(shù)，從0算起 -->
                <td th:text="${userStat.odd}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是第一個 -->
                <td th:text="${userStat.first}"></td>
                <!-- 布爾值，當(dāng)前迭代是否是最后一個 -->
                <td th:text="${userStat.last}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/each/array")
public String eachArray(Model model) {
    User[] users = {new User(1L, "劉備", "123132"), new User(2L, "關(guān)羽", "321231"), new User(3L, "張飛", "213312")};
    model.addAttribute("users", users);
    return "each-array";
}

效果：

5.模板布局

（1）引用模板片段

th:fragment屬性可以用來定義模板片段，th:insert、th:replace和th:include（Thymeleaf3.0不再推薦使用）屬性可以引用模板片段。

首先創(chuàng)建一個名為footer.html的模板文件用來包含模板片段，然后定義一個名為copy1的片段：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
    <div th:fragment="copy1">
        &copy; 2021
    </div>
</body>
</html>

然后在名為layout.html的模板中引用該片段：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>引用模板片段</title>
</head>
<body>
    <div th:insert="~{footer :: copy1}"></div>
    <div th:replace="~{footer :: copy1}"></div>
    <div th:include="~{footer :: copy1}"></div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/layout")
public String layout(Model model) {
    return "layout";
}

效果：

引用模板片段語法中的~{}是可選的，以下代碼與之前的等價：

<div th:insert="footer :: copy1"></div>
<div th:replace="footer :: copy1"></div>
<div th:include="footer :: copy1"></div>

效果：

th:insert、th:replace和th:include都能引用模板片段，直接在頁面中還看不出三者的區(qū)別。為了更明顯地看出區(qū)別，在footer.html模板中新增以下片段：

<footer th:fragment="copy2" >
    &copy; 2020-2023
</footer>

然后在layout.html模板中分別使用th:insert、th:replace和th:include進行引用：

<div th:insert="footer :: copy2">th:insert將指定片段插⼊到指定宿主標(biāo)簽的標(biāo)簽體中</div>
<div th:replace="footer :: copy2">th:replace實際上⽤指定的⽚段替換其宿主標(biāo)簽</div>
<div th:include="footer :: copy2">th:include只插⼊此⽚段的內(nèi)容到指定宿主標(biāo)簽的標(biāo)簽體中</div>

效果：

按F12查看源碼可以看出區(qū)別：

所以三者區(qū)別為：

th:insert將指定片段插入到指定宿主標(biāo)簽的標(biāo)簽體中。
th:replace實際上用指定的片段替換其宿主標(biāo)簽。
th:include只插入此片段的內(nèi)容到指定宿主標(biāo)簽的標(biāo)簽體中。

引用模板片段的規(guī)范語法有以下三種格式：

~{templatename::selector}：包含在名為templatename的模板上通過指定的selector匹配的片段。selector可以只是一個片段名稱。
~{templatename}：包含名為templatename的整個模板。
~{::selector}或~{this::selector}：包含在同一模板中與指定selector匹配的片段。如果在表達式出現(xiàn)的模板上沒有找到，模板調(diào)用（插入）的堆棧會向最初處理的模板（root）遍歷，直到selector在某個層次上匹配。

templatename和selector都可以是表達式。模板片段中可以包含任何th:*屬性，一旦在目標(biāo)模板中引用了片段，這些屬性將被計算并且它們能夠引用目標(biāo)模板中定義的任何上下文變量。

通過th:replace="~{footer}"可以引用整個footer.html：

<div th:replace="~{footer}">引用名為footer的整個模板</div>

效果：

在layout.html模板中新增以下幾個片段：

<div th:fragment="frag">
    <p>~{:: selector}或~{this :: selector}包含在同⼀模板中的匹配指定選擇器的⽚段</p>
</div>
<div>
    <p>文本輸入框：<input type="text" value="輸入內(nèi)容"></p>
</div>
<input type="submit" value="提交">

在layout.html模板中引用frag和input片段：

<div th:insert="~{:: frag}">引用當(dāng)前模板中的片段</div>
<div th:insert="~{this :: input}">引用當(dāng)前模板中的片段</div>

效果：

selector寫成一個條件表達式，可以通過條件來決定引用的片段：

<div th:insert="~{footer :: (${flag} ? copy1 : copy2)}">模板名和選擇器都可以是表達式</div>

將變量flag設(shè)置到Model中：

model.addAttribute("flag", true);

效果：

flag設(shè)置為fasle時的效果：

由于標(biāo)簽選擇器的強大功能，沒有使用th:fragment屬性的片段可以通過id屬性來引用。在footer.html模板中新增以下片段：

<div id="copy-section">
    <p>沒有使用th:fragment屬性的片段可以通過id屬性來引用</p>
</div>

在layout.html模板中引用該片段：

<div th:insert="~{footer :: #copy-section}">可以通過id屬性來引⽤沒有th:fragment屬性的⽚段</div>

效果：

（2）參數(shù)化的模板片段

th:fragment定義的片段可以指定一組參數(shù)。在footer.html模板中新增以下片段：

<div th:fragment="frag (var1,var2)">
    <p th:text="${var1} + ' - ' + ${var2}">th:fragment定義的⽚段可以指定⼀組參數(shù)</p>
</div>

在layout.html模板中分別用以下兩種語法引用該片段：

<!-- 引用定義了參數(shù)的模板片段的兩種語法 -->
<div th:insert="footer :: frag (${var1},${var2})">引用定義了參數(shù)的模板片段語法1</div>
<div th:insert="footer :: frag (var1=${var1},var2=${var2})">引用定義了參數(shù)的模板片段語法2，可以改變參數(shù)順序</div>

將變量var1和var2設(shè)置到Model中：

model.addAttribute("var1", "參數(shù)1");
model.addAttribute("var2", "參數(shù)2");

效果：

即使片段沒有定義參數(shù)，也可以調(diào)用片段中的局部變量。在footer.html模板中新增以下片段：

<div th:fragment="frag2">
    <p th:text="${var1} + ' * ' + ${var2}">沒有定義參數(shù)的模板片段</p>
</div>

在layout.html模板中分別通過以下語法調(diào)用片段中的局部變量：

<!-- 沒有定義參數(shù)的模板片段中的局部變量，可以使用以下語法調(diào)用，以下兩種寫法等價 -->
<div th:insert="footer :: frag2 (var1=${var1},var2=${var2})">沒有定義參數(shù)的模板片段中的局部變量的調(diào)用語法1</div>
<div th:insert="footer :: frag2" th:with="var1=${var1},var2=${var2}">沒有定義參數(shù)的模板片段中的局部變量的調(diào)用語法2</div>

引用定義參數(shù)的模板片段的兩種語法中，第一種語法不能調(diào)用沒有定義參數(shù)的片段中的局部變量，只有第二種語法能調(diào)用。

注意：片段的局部變量規(guī)范 - 無論是否具有參數(shù)簽名 - 都不會導(dǎo)致上下文在執(zhí)行前被清空。片段仍然能訪問調(diào)用模板中正在使用的每個上下文變量。

效果：

使用th:assert可以進行模板內(nèi)部斷言，它可以指定逗號分隔的表達式列表，如果每個表達式的結(jié)果都為true，則正確執(zhí)行，否則引發(fā)異常。在footer.html模板中新增以下片段：

<div th:fragment="assert-test (user)" th:assert="${user.id != null},${!#strings.isEmpty(user.username)},${!#strings.isEmpty(user.password)}">
    <p th:text="${#strings.toString(user)}">⽤th:assert進⾏模版內(nèi)部斷⾔ </p>
</div>

在layout.html模板中引用該片段：

<!-- 引用帶有斷言的模板片段 -->
<div th:insert="footer :: assert-test (${user})"></div>

將變量user設(shè)置到Model中：

model.addAttribute("user", new User(1L, "趙云", "qwe123"));

效果：

只將id設(shè)置為null，訪問模板出現(xiàn)以下異常：

只將username設(shè)置為空，訪問模板出現(xiàn)以下異常：

只將password設(shè)置為空，訪問模板出現(xiàn)以下異常：

（3）靈活布局

通過片段表達式不僅可以指定文本類型、數(shù)字類型、對象類型的參數(shù)，還可以指定標(biāo)記片段作為參數(shù)。這種方式可以使模板布局變得非常靈活。

下面進行一個頁面布局的簡單模擬測試，首先在templates下新建一個layout目錄，用于存放一些組件模板。

layout/footer.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
    <footer th:fragment="footer">
        <h1>模板布局頁面頁腳</h1>
    </footer>
</body>
</html>

layout/header.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>
<body>
    <header th:fragment="header">
        <h1>模板布局頁面頭部</h1>
    </header>
</body>
</html>

layout/left.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>left</title>
</head>
<body>
    <div th:fragment="left">
        <h1>模板布局頁面左側(cè)菜單</h1>
    </div>
</body>
</html>

在templates下新建一個基礎(chǔ)模板base.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header (title)">
    <meta charset="UTF-8">
    <title th:replace="${title}">common title</title>
</head>
<body>
    <div th:fragment="common_div (header,left,footer)">
        <div th:replace="${header}"><h1>common header</h1></div>
        <div th:replace="${left}"><h1>common left</h1></div>
        <p>common content</p>
        <div th:replace="${footer}"><h1>common footer</h1></div>
    </div>
</body>
</html>

然后在名為layout-home.html的模板中引用base.html中的片段：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{:: title})">
    <title>模板布局主頁</title>
</head>
<body>
    <div th:replace="base :: common_div (~{layout/header :: header},~{layout/left :: left},~{layout/footer :: footer})"></div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/layout/home")
public String layoutHome(Model model) {
    return "layout-home";
}

效果：

使用特殊片段表達式~{}可以指定沒有標(biāo)記。在layout-home.html中通過以下代碼引用base.html中的片段：

<div th:replace="base :: common_div (~{layout/header :: header},~{layout/left :: left},~{})"></div>

效果：

_符號也可以用作片段參數(shù)。在layout-home.html中通過以下代碼引用base.html中的片段：

<div th:replace="base :: common_div (~{layout/header :: header},~{layout/left :: left},_)"></div>

_符號導(dǎo)致common_div片段中的th:replace="${footer}"不被執(zhí)行，從而該div標(biāo)簽使用原型文本。

效果：

~{}和_符號可以通過簡單優(yōu)雅的方式實現(xiàn)執(zhí)行片段的條件插入。在layout-home.html中通過以下代碼引用base.html中的片段：

<div th:replace="base :: common_div (${condition} ? ~{layout/header :: header} : ~{},${condition} ? ~{layout/left :: left} : ~{},${condition} ? ~{layout/footer :: footer} : ~{})"></div>

參數(shù)中的每一個condition條件可以根據(jù)實際業(yè)務(wù)需求靈活控制。這里為了測試方便，都使用的相同條件。

將變量condition設(shè)置到Model中：

model.addAttribute("condition", false);

效果：

在layout-home.html中通過以下代碼引用base.html中的片段：

<div th:replace="base :: common_div (${condition} ? ~{layout/header :: header} : _,${condition} ? ~{layout/left :: left} : _,${condition} ? ~{layout/footer :: footer} : _)"></div>

效果：

條件也可以不在參數(shù)中進行判斷，還在common_div片段的th:replace屬性中進行判斷。在layout-home.html中通過以下代碼引用base.html中的片段：

<div th:replace="base :: common_div (~{layout/header :: header},~{layout/left :: left},~{layout/footer :: footer},${condition})"></div>

base.html中的common_div片段：

<div th:fragment="common_div (header,left,footer,condition)">
    <div th:replace="${condition} ? ${header} : _"><h1>Common header</h1></div>
    <div th:replace="${condition} ? ${left}: _"><h1>Common left</h1></div>
    <p>Common content</p>
    <div th:replace="${condition} ? ${footer}: _"><h1>Common footer</h1></div>
</div>

效果：

6.局部變量

Thymeleaf的局部變量是指定義在模板片段中的變量，該變量的作用域為所在模板片段。th:each中的迭代變量就是一個局部變量，作用域為th:each所在的標(biāo)簽范圍，可用于該標(biāo)簽內(nèi)優(yōu)先級低于th:each的任何其他th:*屬性，可用于該標(biāo)簽的任何子元素。使用th:with屬性可以聲明局部變量。

在local.html模板中使⽤th:with屬性聲明局部變量：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>局部變量</title>
</head>
<body>
    <!-- 使⽤th:with屬性聲明局部變量 -->
    <div th:with="user1=${users[0]}">
        <span>user1的姓名：</span><span th:text="${user1.username}"></span>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/local")
public String local(Model model) {
    User[] users = {new User(1L, "劉備", "123132"), new User(2L, "關(guān)羽", "321231"), new User(3L, "張飛", "213312")};
    model.addAttribute("users", users);
    return "local";
}

效果：

局部變量只能在聲明的標(biāo)簽內(nèi)使用。在local.html模板中新增以下內(nèi)容：

<!-- 局部變量不能在聲明的標(biāo)簽外使用 -->
<div>
    <span>user1的姓名：</span><span th:text="${user1.username}">張三</span>
</div>

訪問模板會報錯：

可以同時定義多個局部變量。在local.html模板中新增以下內(nèi)容：

<!-- 使⽤通常的多重賦值語法同時定義多個變量 -->
<div th:with="user1=${users[0]},user2=${users[1]}">
    <span>user1的姓名：</span><span th:text="${user1.username}"></span>
    <br/>
    <span>user2的姓名：</span><span th:text="${user2.username}"></span>
</div>

效果：

th:with屬性允許重⽤在同⼀屬性中定義的變量。在local.html模板中新增以下內(nèi)容：

<!-- th:with屬性允許重⽤在同⼀屬性中定義的變量 -->
<div>
    <!-- th:with的優(yōu)先級高于th:text -->
    <span>當(dāng)前時間：</span><span th:with="now=${#calendars.createNow()}" th:text="${#calendars.format(now, 'yyyy/MM/dd hh:mm:ss')}"></span>
</div>

效果：

7.屬性優(yōu)先級

多個th:*屬性在同一個標(biāo)簽中的執(zhí)行順序由優(yōu)先級決定。所有Thymeleaf屬性都定義了一個數(shù)字優(yōu)先級，以確定了它們在標(biāo)簽中執(zhí)行的順序，數(shù)字越小優(yōu)先級越高：

Order	Feature	Attributes
1	Fragment inclusion	`th:insert` `th:replace`
2	Fragment iteration	`th:each`
3	Conditional evaluation	`th:if` `th:unless` `th:switch` `th:case`
4	Local variable definition	`th:object` `th:with`
5	General attribute modification	`th:attr` `th:attrprepend` `th:attrappend`
6	Specific attribute modification	`th:value` `th:href` `th:src` `...`
7	Text (tag body modification)	`th:text` `th:utext`
8	Fragment specification	`th:fragment`
9	Fragment removal	`th:remove`

優(yōu)先級意味著屬性位置發(fā)生變化，也會得出相同的結(jié)果。

8.注釋和塊

（1）標(biāo)準(zhǔn)HTML/XML注釋

標(biāo)準(zhǔn)HTML/XML注釋可以在Thymeleaf模板中的任何地方使用。這些注釋中的任何內(nèi)容都不會被Thymeleaf處理，并將逐字復(fù)制到結(jié)果中。

這里直接運行項目訪問local.html模板，查看模板源碼可見HTML注釋沒有被處理，保持原樣：

（2）ThymeLeaf解析器級注釋

解析器級注釋塊在Thymeleaf解析時會將之間的所有內(nèi)容從模板中刪除。當(dāng)此模板靜態(tài)打開時，這些注釋塊可用于顯示代碼。

修改local.html模板的其中一個注釋為如下內(nèi)容：

<!--/*    <div>
        <span>user1的姓名：</span><span th:text="${user1.username}">張三</span>
    </div>*/-->

查看源碼可見注釋已從模板中刪除：

（3）Thymeleaf專有注釋

Thymeleaf允許定義特殊注釋塊，在Thymeleaf解析時會將標(biāo)記刪除，但不刪除標(biāo)記之間的內(nèi)容。當(dāng)此模板靜態(tài)打開時，會顯示注釋標(biāo)記。

修改local.html模板的其中一個注釋為如下內(nèi)容：

<!--/*/    <div th:with="user1=${users[0]}">
        <span>user1的姓名：</span><span th:text="${user1.username}"></span>
    </div>/*/-->

查看源碼發(fā)現(xiàn)只刪除了標(biāo)記部分，中間的內(nèi)容保留：

（4）th:block標(biāo)簽

th:block標(biāo)簽是Thymeleaf標(biāo)準(zhǔn)方言中唯一的元素處理器。th:block是一個允許模板開發(fā)者指定想要的任何屬性的屬性容器，Thymeleaf會執(zhí)行這些屬性并讓這個塊消失，但它的內(nèi)容保留。

模板block.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>th:block</title>
</head>
<body>
    <table>
        <th:block th:each="user : ${users}">
            <tr>
                <td th:text="${user.id}">1</td>
                <td th:text="${user.username}">root</td>
            </tr>
            <tr>
                <td colspan="2" th:text="${user.password}">root</td>
            </tr>
        </th:block> 
    </table>
</body>
</html>

使用th:block可以輕松地迭代同級標(biāo)簽，例如在<table>中為每個迭代元素創(chuàng)建多個<tr>時使用th:block就很簡單。

ThymeleafController中新增以下方法：

@GetMapping("/block")
public String block(Model model) {
    List<User> users = new ArrayList<>();
    users.add(new User(1L, "劉備", "123132"));
    users.add(new User(2L, "關(guān)羽", "321231"));
    users.add(new User(3L, "張飛", "213312"));
    model.addAttribute("users", users);
    return "block";
}

效果：

查看源碼：

在和原型注釋塊結(jié)合時很有用：

<table>
    <!--/*/ <th:block th:each="user : ${users}"> /*/-->
    <tr>
        <td th:text="${user.id}">1</td>
        <td th:text="${user.username}">root</td>
    </tr>
    <tr>
        <td colspan="2" th:text="${user.password}">root</td>
    </tr>
    <!--/*/ </th:block> /*/-->
</table>

效果：

9.內(nèi)聯(lián) （1）內(nèi)聯(lián)表達式

[[]]或[()]中的表達式為內(nèi)聯(lián)表達式，可以直接將表達式寫入HTML文本。任何在th:text或th:utext屬性中使用的表達式都可以出現(xiàn)在[[]]或[()]中。[[]]等價于th:text，會轉(zhuǎn)義html標(biāo)簽；[()]等價于th:utext，不會轉(zhuǎn)義html標(biāo)簽。

模板inline.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>內(nèi)聯(lián)</title>
</head>
<body>
    <h1>th:text和th:utext</h1>
    <p>Hello <span th:text="${user.username}">World</span> !</p>
    <p>Hello <span th:utext="${user.username}">World</span> !</p>
    <h1>內(nèi)聯(lián)表達式</h1>
    <!-- 會轉(zhuǎn)義html標(biāo)簽，等價于th:text -->
    <p>Hello [[${user.username}]] !</p>
    <!-- 不會轉(zhuǎn)義html標(biāo)簽，等價于th:utext -->
    <p>Hello [(${user.username})] !</p>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/inline")
public String inline(Model model) {
    model.addAttribute("user", new User(1L, "<b>趙云</b>", "this is \"pass\" word"));
    return "inline";
}

效果：

注意，靜態(tài)打開模板文件時，內(nèi)聯(lián)表達式會顯示出來，這樣就無法將其作為原型設(shè)計了。靜態(tài)打開inline.html模板的效果如下：

在有些情況下可能需要禁用內(nèi)聯(lián)，比如需要輸出[[]]序列時。通過th:inline="none"可以禁用內(nèi)聯(lián)。在模板inline.html中新增以下內(nèi)容：

<p>這是一個二維數(shù)組：[[1, 2, 3], [4, 5]]</p>

訪問模板時會報如下錯誤：

在剛才的代碼中增加禁用內(nèi)聯(lián)：

<h2>禁用內(nèi)聯(lián)</h2>
<p th:inline="none">這是一個二維數(shù)組：[[1, 2, 3], [4, 5]]</p>

效果：

（2）內(nèi)聯(lián)JavaScript

使用th:inline="javascript"啟用內(nèi)聯(lián)JavaScript。

在模板inline.html中新增以下內(nèi)容：

<h1>內(nèi)聯(lián)JavaScript</h1>
<div>
    <span><button onclick="showPassword()">按鈕</button></span>
</div>

<script type="text/javascript" th:inline="javascript">
    let password = [[${user.password}]];
    console.log("password:", password);
    function showPassword() {
        alert(password);
    }
</script>

效果：

查看源碼，可見輸出的字符串進行了轉(zhuǎn)義，是格式正確的JavaScript字符串，因為使用[[]]在輸出${user.password}表達式的時候進行了轉(zhuǎn)義：

查看Console中打印的日志：

注釋掉let password = [[${user.password}]];，新增let password = [(${user.password})];。查看源碼，由于[()]不會進行轉(zhuǎn)義，可見輸出的字符串沒有轉(zhuǎn)義，是格式錯誤的JavaScript代碼：

查看Console，發(fā)現(xiàn)有語法錯誤：

如果通過附加內(nèi)聯(lián)表達式的方式來構(gòu)建腳本的一部分，可能會需要輸出未轉(zhuǎn)義的字符串，所以這個功能也很有用。

內(nèi)聯(lián)JavaScript可以通過在注釋中包含內(nèi)聯(lián)表達式作為JavaScript自然模板。下面注釋掉let password = [(${user.password})];，新增如下代碼：

// 在JavaScript注釋中包含（轉(zhuǎn)義）內(nèi)聯(lián)表達式，Thymeleaf將忽略在注釋之后和分號之前的所有內(nèi)容
let password = /*[[${user.password}]]*/ "default password";

查看源碼：

查看Console中打印的日志：

發(fā)現(xiàn)"default password"確實被忽略了。以靜態(tài)方式打開模板時變量password的值就為"default password"了：

JavaScript內(nèi)聯(lián)表達式結(jié)果不限于字符串，還會自動地將Strings、Numbers、Booleans、Arrays、Collections、Maps、Beans（有g(shù)etter和setter方法）這些對象序列化為JavaScript對象。下面在Controller中新增以下代碼：

Map<String, Object> map = new HashMap<>(16);
map.put("user1", new User(1L, "劉備", "123132"));
map.put("user2", new User(2L, "關(guān)羽", "321231"));
map.put("user3", new User(3L, "張飛", "213312"));
model.addAttribute("userMap", map);

script標(biāo)簽內(nèi)新增以下代碼，Thymeleaf會將userMap對象轉(zhuǎn)換為JavaScript對象：

// userMap為一個Map對象，Thymeleaf會將其轉(zhuǎn)換為JavaScript對象
let userMap = /*[[${userMap}]]*/ null;
console.log("userMap:", userMap);
// 遍歷userMap
for (let key in userMap) {
    console.log(key + ": " + "{id: " + userMap[key].id
        + ", username: " + userMap[key].username + ", password: " + userMap[key].password + "}");
}

查看源碼發(fā)現(xiàn)Thymeleaf已經(jīng)將其轉(zhuǎn)換為JavaScript對象：

查看Console中打印的日志：

（3）內(nèi)聯(lián)CSS

使用th:inline="css"啟用內(nèi)聯(lián)CSS。

在模板inline.html中新增以下內(nèi)容：

<style type="text/css" th:inline="css">
    [[${element}]] {
        text-align: [[${align}]];
        color: [[${color}]];
    }
</style>

將變量element、align和color設(shè)置到Model中：

model.addAttribute("element", "h1");
model.addAttribute("align", "center");
model.addAttribute("color", "#2876A7");

訪問模板，對齊生效，顏色未生效：

查看源碼，發(fā)現(xiàn)color的值多了一個\：

這是由于[[]]會進行轉(zhuǎn)義，所以多了一個\。這里不需要對其轉(zhuǎn)義，所以需要使用[()]。將代碼修改為color: [(${color})];。訪問模板，發(fā)現(xiàn)樣式都生效了：

查看源碼，沒有多出\了：

內(nèi)聯(lián)CSS也允許通過在注釋中包含內(nèi)聯(lián)表達式作為CSS自然模板，使CSS可以靜態(tài)和動態(tài)的工作。將<style>的代碼修改為如下內(nèi)容：

<style type="text/css" th:inline="css">
    h1 {
        text-align: /*[[${align}]]*/ left;
        color: /*[(${color})]*/ #B60d16;
    }
</style>

模板動態(tài)打開時的效果：

查看源碼：

以靜態(tài)方式打開的效果：

查看源碼：

10.國際化

這里簡單模擬一下國際化功能，通過語言切換應(yīng)用對應(yīng)語言的國際化配置文件。

（1）創(chuàng)建國際化配置文件

在resources/i18n目錄下創(chuàng)建如下配置文件。

index.properties：

user.register=注冊
user.login=登錄
index.language=語言
index.language.chinese=中文
index.language.english=英文

index_en_US.properties：

user.register=Register
user.login=Login
index.language=Language
index.language.chinese=Chinese
index.language.english=English

index_zh_CN.properties：

user.register=注冊
user.login=登錄
index.language=語言
index.language.chinese=中文
index.language.english=英文

（2）新增配置

在application.yml中新增以下配置：

spring:
  messages:
    # 配置消息源的基本名稱，默認為messages，這里配置為國際化配置文件的前綴
    basename: i18n.index

（3）創(chuàng)建模板

模板i18n.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>國際化</title>
</head>
<body>
    <div>
        <span><button th:text="#{user.register}">注冊</button></span>
        <span><button th:text="#{user.login}">登錄</button></span>
        <span th:text="#{index.language}">語言</span>
        <a th:href="@{/index(lang='zn_CN')}" th:text="#{index.language.chinese}">中文</a>
        <a th:href="@{/index(lang='en_US')}" th:text="#{index.language.english}">英文</a>
    </div>
</body>
</html>

#{}為消息表達式，用于引用消息字符串。而消息字符串通常保存在外部化文本中，消息字符串形式為key=value，通過#{key}可以引用特定的消息。而根據(jù)不同的語言從與其對應(yīng)的外部化文本中獲取同一個key的消息，可以實現(xiàn)國際化。

（4）配置國際化解析器

package com.rtxtitanv.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * @author rtxtitanv
 * @version 1.0.0
 * @name com.rtxtitanv.config.WebConfig
 * @description 配置自定義國際化解析器
 * @date 2021/7/6 16:25
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public LocaleResolver localeResolver() {
        return new MyLocaleResolver();
    }

    /**
     * 自定義LocaleResolver
     */
    public static class MyLocaleResolver implements LocaleResolver {
        @Override
        public Locale resolveLocale(HttpServletRequest request) {
            // 接收語言參數(shù)
            String lang = request.getParameter("lang");
            // 使用默認語言
            Locale locale = Locale.getDefault();
            // 語言參數(shù)不為空就設(shè)置為該語言
            if (!StringUtils.isEmptyOrWhitespace(lang)) {
                String[] s = lang.split("_");
                locale = new Locale(s[0], s[1]);
            }
            return locale;
        }

        @Override
        public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {}

    }
}

（5）Controller

@GetMapping(value = {"/index", "/"})
public String index() {
    return "i18n";
}

（5）測試

訪問模板，默認語言為中文：

點擊英文鏈接切換語言為英文：

點擊中文鏈接切換語言為中文：

11.常用工具類對象

之前在文中已經(jīng)簡單地總結(jié)了Thymeleaf中的工具類對象和它的作用。這里結(jié)合實例來總結(jié)一下常用工具類對象具體方法的使用，由于工具類對象較多，這里就總結(jié)Dates、Numbers和Strings的具體使用方法。至于其他對象的方法，可以參考官方文檔。

（1）Dates

模板date.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工具類對象Dates</title>
</head>
<body>
    <div>
        <span>格式化日期格式1（format）：</span>
        <span th:text="${#dates.format(date)}"></span>
        <br/>
        <span>格式化日期格式2（format）：</span>
        <span th:text="${#dates.format(date, 'yyyy/MM/dd hh:mm:ss')}"></span>
        <br/>
        <span>獲取年（year）：</span>
        <span th:text="${#dates.year(date)}"></span>
        <br/>
        <span>獲取月（month）：</span>
        <span th:text="${#dates.month(date)}"></span>
        <br/>
        <span>獲取日（day）：</span>
        <span th:text="${#dates.day(date)}"></span>
        <br/>
        <span>獲取時（hour）：</span>
        <span th:text="${#dates.hour(date)}"></span>
        <br/>
        <span>獲取分（minute）：</span>
        <span th:text="${#dates.minute(date)}"></span>
        <br/>
        <span>獲取秒（second）：</span>
        <span th:text="${#dates.second(date)}"></span>
        <br/>
        <span>獲取毫秒（millisecond）：</span>
        <span th:text="${#dates.millisecond(date)}"></span>
        <br/>
        <span>獲取月份名稱（monthName）：</span>
        <span th:text="${#dates.monthName(date)}"></span>
        <br/>
        <span>獲取星期索引，1為星期日，2為星期1，···，7為星期六（dayOfWeek）：</span>
        <span th:text="${#dates.dayOfWeek(date)}"></span>
        <br/>
        <span>獲取星期名稱（dayOfWeekName）：</span>
        <span th:text="${#dates.dayOfWeekName(date)}"></span>
        <br/>
        <span>創(chuàng)建當(dāng)前date和time（createNow）：</span>
        <span th:text="${#dates.createNow()}"></span>
        <br/>
        <span>創(chuàng)建當(dāng)前date，time設(shè)置為00:00（createToday）：</span>
        <span th:text="${#dates.createToday()}"></span>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/dates")
public String dates(Model model) {
    model.addAttribute("date", new Date());
    return "dates";
}

效果：

（2）Numbers

模板number.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工具類對象Numbers</title>
</head>
<body>
    <div>
        <span>整數(shù)格式化 - 設(shè)置最小整數(shù)位數(shù)為3（formatInteger）：</span>
        <span th:text="${#numbers.formatInteger(num, 3)}"></span>
        <br/>
        <span>整數(shù)格式化 - 設(shè)置最小整數(shù)位數(shù)為6（formatInteger）：</span>
        <span th:text="${#numbers.formatInteger(num, 6)}"></span>
        <br/>
        <span>整數(shù)格式化 - 設(shè)置千位分隔符為.（formatInteger）：</span>
        <span th:text="${#numbers.formatInteger(num, 6, 'POINT')}"></span>
        <br/>
        <span>整數(shù)格式化 - 設(shè)置千位分隔符為,（formatInteger）：</span>
        <span th:text="${#numbers.formatInteger(num, 6, 'COMMA')}"></span>
        <br/>
        <span>整數(shù)數(shù)組格式化（arrayFormatInteger）：</span>
        <span th:each="element:${#numbers.arrayFormatInteger(nums, 6)}">[[${element}]] </span>
        <br/>
        <span>小數(shù)格式化 - 設(shè)置最小整數(shù)位數(shù)為5且精確保留3位小數(shù)位數(shù)（formatDecimal）</span>
        <span th:text="${#numbers.formatDecimal(num2, 5, 3)}"></span>
        <br/>
        <span>小數(shù)格式化 - 設(shè)置千位分隔符為.且小數(shù)點分隔符為,（formatDecimal）</span>
        <span th:text="${#numbers.formatDecimal(num2, 5, 'POINT', 3, 'COMMA')}"></span>
        <br/>
        <span>貨幣格式化（formatCurrency）：</span>
        <span th:text="${#numbers.formatCurrency(num)}"></span>
        <br/>
        <span>百分比格式化 - 設(shè)置最小整數(shù)位數(shù)為2且精確保留3位小數(shù)（formatPercent）：</span>
        <span th:text="${#numbers.formatPercent(0.25831694, 2, 3)}"></span>
        <br/>
        <span>創(chuàng)建整數(shù)數(shù)字序列 - 序列從1到10步長為3（sequence）：</span>
        <span th:each="n:${#numbers.sequence(1, 10, 3)}">[[${n}]] </span>
        <br/>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/numbers")
public String numbers(Model model) {
    Integer[] numArray = {1000, 666, 88888};
    model.addAttribute("num", 99999);
    model.addAttribute("num2", 66.6658932);
    model.addAttribute("nums", numArray);
    return "numbers";
}

效果：

（3）Strings

模板strings.html如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工具類對象Strings</title>
</head>
<body>
    <div>
        <span>字符串轉(zhuǎn)換（toString）：</span>
        <span th:text="${#strings.toString(user)}"></span>
        <br/>
        <span>檢查字符串是否為空（isEmpty）：</span>
        <span th:text="${#strings.isEmpty(user.username)}"></span>
        <br/>
        <span>字符串為空時使用默認值（defaultString）：</span>
        <span th:text="${#strings.defaultString(user.password, 'admin')}"></span>
        <br/>
        <span>檢查字符串是否以指定片段開頭（startsWith）：</span>
        <span th:text="${#strings.startsWith(user.username, 'Spring')}"></span>
        <br/>
        <span>檢查字符串是否以指定片段結(jié)尾（endsWith）：</span>
        <span th:text="${#strings.endsWith(user.username, 'test')}"></span>
        <br/>
        <span>檢查字符串是否包含指定片段（contains）：</span>
        <span th:text="${#strings.contains(user.username, 'Thymeleaf')}"></span>
        <br/>
        <span>判斷兩個字符串是否相等（equals）：</span>
        <span th:text="${#strings.equals(user.username, str)}"></span>
        <br/>
        <span>判斷兩個字符串是否相等，忽略大小寫（equalsIgnoreCase）：</span>
        <span th:text="${#strings.equalsIgnoreCase(user.username, 'springboot-thymeleaf-strings-test')}"></span>
        <br/>
        <span>獲取字符串長度（length）：</span>
        <span th:text="${#strings.length(user.username)}"></span>
        <br/>
        <span>字符串轉(zhuǎn)換為大寫字母（toUpperCase）：</span>
        <span th:text="${#strings.toUpperCase(user.username)}"></span>
        <br/>
        <span>字符串轉(zhuǎn)換為小寫字母（toLowerCase）：</span>
        <span th:text="${#strings.toLowerCase(user.username)}"></span>
        <br/>
        <span>片段在字符串中的索引（indexOf）：</span>
        <span th:text="${#strings.indexOf(user.username, 'Boot')}"></span>
        <br/>
        <span>字符串去除空格（trim）：</span>
        <span th:text="${#strings.trim(str)}"></span>
        <br/>
        <span>字符串省略（abbreviate）：</span>
        <span th:text="${#strings.abbreviate(user.username, 23)}"></span>
        <br/>
        <span>字符串截取，從指定索引開始截取到末尾（substring）：</span>
        <span th:text="${#strings.substring(user.username, 11)}"></span>
        <br/>
        <span>字符串截取指定開始索引到結(jié)束索引之間的部分，不包含結(jié)束索引字符（substring）：</span>
        <span th:text="${#strings.substring(user.username, 11, 20)}"></span>
        <br/>
        <span>截取指定字符串第一次出現(xiàn)前的字符串（substringBefore）：</span>
        <span th:text="${#strings.substringBefore(user.username, '-')}"></span>
        <br/>
        <span>截取指定字符串第一次出現(xiàn)后的字符串（substringAfter）：</span>
        <span th:text="${#strings.substringAfter(user.username, '-')}"></span>
        <br/>
        <span>字符串替換（replace）：</span>
        <span th:text="${#strings.replace(user.username, '-', '_')}"></span>
        <br/>
        <span>從字符串頭部向前追加（prepend）：</span>
        <span th:text="${#strings.prepend(user.username, '用戶名是')}"></span>
        <br/>
        <span>從字符串尾部向后追加（append）：</span>
        <span th:text="${#strings.append(user.username, '是用戶名')}"></span>
        <br/>
        <span>字符串連接（concat）：</span>
        <span th:text="${#strings.concat(user.username, '-concat')}"></span>
        <br/>
        <span>字符串連接（concatReplaceNulls）：</span>
        <span th:text="${#strings.concatReplaceNulls(user.username, '用戶名是', null, '-concatReplaceNulls')}"></span>
        <br/>
        <span>字符串拆分（arraySplit）：</span>
        <span th:each="element:${#strings.arraySplit(user.username, '-')}">[[${element}]] </span>
        <br/>
        <span>字符串組合（arrayJoin）：</span>
        <span th:text="${#strings.arrayJoin(strs, '-')}"></span>
        <br/>
        <span>隨機字符串（randomAlphanumeric）：</span>
        <span th:text="${#strings.randomAlphanumeric(16)}"></span>
    </div>
</body>
</html>

ThymeleafController中新增以下方法：

@GetMapping("/strings")
public String strings(Model model) {
    model.addAttribute("user", new User(1L, "SpringBoot-Thymeleaf-Strings-Test", ""));
    model.addAttribute("str", "SpringBoot Thymeleaf Strings Test");
    model.addAttribute("strs", new String[] {"SpringBoot", "Thymeleaf", "Strings", "Test"});
    return "strings";
}

效果：