Spring Boot 模板引擎Thymeleaf整合

阿新 • • 發佈：2018-11-03

Spring Boot 模板引擎Thymeleaf整合

一、Thymeleaf介紹

Thymeleaf是一種Java XML / XHTML / HTML5模板引擎，可以在Web和非Web環境中使用。它更適合在基於MVC的Web應用程式的檢視層提供XHTML / HTML5，但即使在離線環境中，它也可以處理任何XML檔案。它提供了完整的Spring Framework整合。

二、Thymeleaf基礎使用

Thymeleaf的使用是由兩部分組成的：標籤 + 表示式，標籤是Thymeleaf的語法結構，而表示式就是語法裡的內容實現。

通過標籤 + 表示式，讓資料和模板結合，最終轉換成html程式碼，返回給使用者。

Thymeleaf基礎使用分為2部分：

標籤使用
表示式使用

1.標籤使用

1.1 th:text 基礎資訊輸出

HTML程式碼：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>馮雪超的部落格</title>
</head>

<body>
<span th:text="${name}"></span>
</body>
</html>

Java程式碼：

/**
* @author fengxuechao
*/
@Controller
public class IndexController {

    @RequestMapping("/")
    public ModelAndView index(ModelAndView modelAndView) {
        modelAndView.setViewName("index");
        modelAndView.addObject("name", "我是馮雪超");
        return modelAndView;
    }
}

最終效果：

1.2 th:utext html內容輸出

使用"th:text"是對內容的原樣輸出，使用“th:utext”可以進行html標籤輸出。

Java程式碼：

package com.littlefxc.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
* @author fengxuechao
*/
@Controller
public class IndexController {

    @RequestMapping("/")
    public ModelAndView index(ModelAndView modelAndView) {
        modelAndView.setViewName("index");
        modelAndView.addObject("name", "<span style='color:red'>我是馮雪超</span>");
        return modelAndView;
    }
}

HTML程式碼：

展示效果：

1.3 th:if, th:unless 條件判斷

成年

</span>

未成年

</span>

th:if為滿足條件的業務處理，th:unless正好相反，是除去的意思。

1.4 th:switch, th:case 多條件判斷

</div>

注意： 預設選項使用th:case="*" 指定。

1.5 th:each 迴圈

HTML程式碼：

Java程式碼：

package com.littlefxc.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.Arrays;

/**
* @author fengxuechao
*/
@Controller
public class IndexController {

    @RequestMapping("/")
    public ModelAndView index(ModelAndView modelAndView) {
        modelAndView.setViewName("index");
        modelAndView.addObject("names", Arrays.asList("小王", "小明", "小紅"));
        return modelAndView;
    }
}

訪問效果如下：

其中item為每行的詳細值，常用key值如下：

index 下標，從0開始
count 第x個，從1開始
size 這個集合的大小
current 當前行的值

1.6 th:fragment、th:insert、th:replace、th:include 程式碼片段複用

th:fragment標籤是宣告程式碼片段，用於解決程式碼複用的問題，好比Java程式寫的公用程式碼一樣，每個需要的地方都可以直接呼叫；
th:insert 引用fragment的程式碼，保留自己的主標籤；
th:replace 引用fragment的程式碼，不保留自己的主標籤；
th:include 使用類似th:replace，Thymeleaf3.0之後不推薦使用；

footer.html頁面程式碼：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="copyright">
    © 著作權歸馮雪超所有
</div>

<div th:fragment="about">
    關於
</div>

<div th:fragment="links">
    CCTV
</div>
</body>
</html>

聲明瞭3個程式碼片段，copyright、about和links。

Index.html頁面程式碼：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>馮雪超的部落格</title>
</head>
<body>
<div th:replace="footer :: copyright"></div>

<div th:insert="footer :: about"></div>

<div th:include="footer :: links"></div>
</body>
</html>

其中第一個div引用了footer.html 的 copyright 程式碼片段，第二個div引用了 footer.html 的 about 程式碼片段。

雙冒號的理解： 其中使用“::”雙冒號來完成對頁面片段的引用，有點像php裡面的語法，使用雙冒號來表示對類的靜態屬性和方法進行直接引用。

執行效果如下圖：

總結： 可以很清晰的看出th:insert、th:replace、th:include之間的區別，在於是否保留自己的主標籤，th:include 在3.0之後已經不推薦使用了，可以使用th:replace標籤替代。

進階——fragment程式碼傳參

使用fragment我們是可以在html程式碼中傳參的，比如我們定義了一個top.html其中有一個“歡迎XXX”的提示，而這個人名XXX就是需要動態傳遞的，這樣我們可以最大程度的完成程式碼的複用，這個時候就是一個很好的使用場景，我們需要這樣做。（紅色表示關鍵程式碼）

頁面index.html程式碼：

頁面footer.html

最終的效果：

1.7 th:with 定義區域性變數

頁面程式碼：（紅色表示關鍵程式碼）

頁面輸出結果：

1.8 th:remove 刪除標籤

th:remove用於html程式碼的刪除，th:remove值有五個：

all 刪除本段所有程式碼
body 刪除主標籤內的所有元素
tag 刪除主標籤，保留主標籤所有的元素
all-but-first 保留主標籤和第一個元素，其他全部刪除
none 不刪除任何標籤

示例index.html程式碼如下：（紅色表示關鍵程式碼）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>馮雪超的部落格</title>
</head>
<body>
<div th:each="name,item:${names}">
    <span th:text="${item.count}"></span>
    <span th:text="${name}"></span>
</div>

<div th:replace="footer :: copyright"></div>

<div th:insert="footer :: about"></div>

<div th:include="footer :: links"></div>

<div th:replace="footer :: welcome('馮雪超')"></div>

<div>
    <p th:with="temp='這是區域性變數'">區域性變數：[[${temp}]]</p>
</div>

<div>
    <div id="all" th:remove="all">
        <span>all</span>
        <span>1</span>
    </div>

    <div id="body" th:remove="body">
        <span>body</span>
        <span>2</span>
    </div>

    <div id="tag" th:remove="tag">
        <span>tag</span>
        <span>3</span>
    </div>

    <div id="all-but-first" th:remove="all-but-first">
        <span>all-but-first</span>
        <span>4</span>
    </div>

    <div id="none" th:remove="none">
        <span>none</span>
        <span>5</span>
    </div>
</div>
</body>
</html>

最終展示效果如下：

1.9 其他標籤

th:style 定義樣式 <div th:style="'color:'+${skinColor}">
th:onclick 點選事件 <input type="button" value=" Click " th:onclick="'onsub()'">
th:href 賦值屬性href <a th:href="${myhref}"></a>
th:value 賦值屬性value <input th:value="${user.name}" />
th:src 賦值src <img th:src="${img}" />
th:action 賦值屬性action <form th:action="@{/suburl}">
th:id 賦值屬性id <form id="${fromid}">
th:attr 定義多個屬性 <img th:attr="[email protected]{/img/stone.jpg},alt=${alt}" />
th:object 定義一個物件 <div th:object="${user}">
...

2.表示式使用

2.1 表示式概要

2.1.1 簡單表示式

變量表達式：${...} 選擇變量表達式：*{...} 訊息表示式：#{...} 連結表示式：@{...} 片段表達：~{...}

2.1.2 資料的型別

文字：'one text', 'Another one!',… 數字文字：0, 34, 3.0, 12.3,… 布林文字：true, false NULL文字：null 文字標記：one, sometext, main,…

2.1.3 文字操作

字串拼接：+ 字面替換：|The name is ${name}|

2.1.4 算術運算

二進位制運算子：+, -, *, /, % 減號(一元運算子)：-

2.1.5 布林運算

二進位制運算子：and, or 布林否定(一元運算子)：!, false

2.1.6 條件運算子

比較值：>, <, >=, <= 相等判斷： ==, !=

2.1.7 條件判斷

如果-然後：(if) ? (then) 如果-然後-否則：

(if) ? (then) : (else) 違約：(value) ?: (defaultvalue)

所有以上這些表示式都可以組合和巢狀，例如：

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

2.2 表示式使用例項

2.2.1 變量表達式 ${...}

變量表達式的使用，我們前面的程式碼已經見到了，$是我們平常開發中最常用的表示式，用於把後臺Java類的動態資料，對映到頁面。略

2.2.2 選擇表示式 *{...}

選擇表示式相當於選擇了一個物件，在使用的時候不在需要這個物件的字首，直接使用屬性的key進行內容展示，程式碼如下：

Java程式碼：

package com.littlefxc.blog.controller;

import lombok.Data;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
* @author fengxuechao
*/
@Controller
public class IndexController {

    @RequestMapping("/")
    public ModelAndView index(ModelAndView modelAndView) {
        modelAndView.setViewName("index");
        modelAndView.addObject("names", Arrays.asList("小王", "小明", "小紅"));
        Goods goods = new Goods();
        goods.setName("iMac");
        goods.setPrice("￥20000");
        goods.setCreateTime(new Date());
        modelAndView.addObject("goods", goods);
        return modelAndView;
    }

    @Data
    public static class Goods{
        private String name;

        private String price;

        private Date createTime;
    }
}

最終效果：

總結： *{price} = ${goods.price}只是省去了“goods.”字首，效果都是一樣的。

2.2.3 連結表示式 @{...}

用於轉換url，程式碼如下：

<a th:href="@{/footer(id=666,name=fxc)}">連結</a>複製程式碼

最終呈現的效果：

連結表示式，可以傳遞引數，用逗號分隔。

伺服器根相對路徑：@{~/path/to/something}

2.2.4 文字操作

文字操作分為兩個：文字拼加、文字替換

文字拼加：

<span th:text="'我叫'+${name}"></span>複製程式碼

文字替換：

文字替換的語法：|內容${tag}|

<span th:text="|我叫${name}，是一名開發工程師。|"></span>複製程式碼

2.2.5 三元表示式

2.2.6 雙括號作用

<p th:text="${val}">...</p><p th:text="${{val}}">...</p>複製程式碼

結果：

<p>1234567890</p><p>1,234,567,890</p>複製程式碼

2.2.7 嵌入文字標籤

雖然標準的標籤幾乎可以滿足所有的業務場景，但某些情況我們更喜歡直接寫入HTML文字，例如：

<p>Hello, [[${name}]]</p>複製程式碼

嵌入文字有兩種寫法“[[...]]”和“[(...)]”，分別的作用就像th:text 和 th:utext 一樣，例如：

<p>

[[${name}]]

</p>

<p>

[(${name})]

</p>複製程式碼

看到的效果是這樣的：

2.3 表示式物件概述

表示式裡面的物件可以幫助我們處理要展示的內容，比如表示式的工具類dates可以格式化時間，這些內建類的熟練使用，可以讓我們使用Thymeleaf的效率提高很多。

2.3.1 表示式基本物件

#ctx: 操作當前上下文.
#vars: 操作上下文變數.
#request: (僅適用於Web專案) HttpServletRequest物件.
#response: (僅適用於Web專案) HttpServletResponse 物件.
#session: (僅適用於Web專案) HttpSession 物件.
#servletContext: (僅適用於Web專案) ServletContext 物件.

2.3.2 表示式實用工具類

#execInfo: 操作模板的工具類，包含了一些模板資訊，比如：${#execInfo.templateName} .
#uris: url處理的工具
#conversions: methods for executing the configured conversion service (if any).
#dates: 方法來源於 java.util.Date 物件，用於處理時間，比如：格式化.
#calendars: 類似於 #dates, 但是來自於 java.util.Calendar 物件.
#numbers: 用於格式化數字.
#strings: methods for String objects: contains, startsWith, prepending/appending, etc.
#objects: 普通的object物件方法.
#bools: 判斷bool型別的工具.
#arrays: 陣列操作工具.
#lists: 列表操作資料.
#sets: Set操作工具.
#maps: Map操作工具.
#aggregates: 運算元組或集合的工具.

每個類中的具體方法，點選檢視：www.thymeleaf.org/doc/tutoria…

三、Spring Boot 整合 Thymeleaf

3.1 Spring Boot 整合 Thymeleaf 分為四步：

pom.xml 新增 Thymeleaf 模板引擎
application.properties 配置 Thymeleaf 資訊
建立controller類，編寫程式碼
建立模板，編寫html程式碼

接下來看具體的步驟。

3.1.1 pom.xml 新增 Thymeleaf 模板引擎

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

3.1.2 application.properties 配置 Thymeleaf 資訊

實際上在開發時，只需配置spring.thymeleaf.cache=false，其它都是預設配置，同時也不推薦自定義。

# 啟用快取:建議生產開啟，

spring.thymeleaf.cache=false# 建議模版是否存在

spring.thymeleaf.check-template-l

Spring Boot 模板引擎Thymeleaf整合

Spring Boot 模板引擎Thymeleaf整合

一、Thymeleaf介紹