Spring Boot 最佳實踐（四）模板引擎Thymeleaf集成

一、Thymeleaf介紹

Thymeleaf是一種Java XML / XHTML / HTML5模板引擎，可以在Web和非Web環(huán)境中使用。它更適合在基于MVC的Web應(yīng)用程序的視圖層提供XHTML / HTML5，但即使在脫機環(huán)境中，它也可以處理任何XML文件。它提供了完整的Spring Framework集成。

關(guān)于Spring推薦Thymeleaf的這種說法，我在Spring官方文檔并沒有看到具體的說明，只是在和JSP比較的時候，說了JSP和Thymeleaf對比JSP的一些不足，而Thymeleaf只是作為其他模板引擎的一種代表。

作為一款優(yōu)秀的模板引擎，除了易用性、活躍的社區(qū)、健康快速的發(fā)展外，還有非常重要的一點就是性能了，那Thymeleaf 3 和 FreeMaker 的性能對比是怎么樣的，后續(xù)文章會陸續(xù)更新。

二、Thymeleaf基礎(chǔ)使用

Thymeleaf的使用是由兩部分組成的：標(biāo)簽 + 表達(dá)式，標(biāo)簽是Thymeleaf的語法結(jié)構(gòu)，而表達(dá)式就是語法里的內(nèi)容實現(xiàn)。

通過標(biāo)簽 + 表達(dá)式，讓數(shù)據(jù)和模板結(jié)合，最終轉(zhuǎn)換成html代碼，返回給用戶。

Thymeleaf基礎(chǔ)使用分為三部分：

  1. 標(biāo)簽使用
  2. 表達(dá)式使用
  3. 設(shè)置IDEA 對 Thymeleaf 代碼補全

1.標(biāo)簽使用

1.1 th:text 基礎(chǔ)信息輸出

HTML代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>

Java代碼：

@RequestMapping("/")
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView("/index");
    modelAndView.addObject("name", "老王");
    return modelAndView;
}

最終效果： 老王

1.2 th:utext html內(nèi)容輸出

使用"th:text"是對內(nèi)容的原樣輸出，使用“th:utext”可以進(jìn)行html標(biāo)簽輸出。

Java代碼：

@RequestMapping("/eat")
public ModelAndView eat() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "<span style='color:red'>老王是吃貨</span>");
    return modelAndView;
}

HTML代碼：

<h4 th:text="'th:text '+${data}"></h4>
<h4 th:utext="'th:utext '+${data}"></h4>

展示效果：

[圖片上傳失敗...(image-bea58c-1536148285644)]

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

<span th:if="${age > 18}">
    成年
</span>
<span th:unless="${age > 18}">
    未成年
</span>

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

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

<div th:switch="${age}">
    <span th:case="18">18歲</span>
    <span th:case="19">19歲</span>
    <spa th:case="*">其他</spa>
</div>

注意： 默認(rèn)選項使用th:case="*" 指定。

1.5 th:each 循環(huán)

HTML代碼：

<div th:each="name,item:${names}">
    <span th:text="${item.count}"></span>
    <span th:text="${name}"></span>
</div>

Java代碼：

@RequestMapping("/")
public ModelAndView index() {
    ArrayList<String> names = new ArrayList<>();
    names.add("java");
    names.add("golang");
    names.add("nodejs");
    ModelAndView modelAndView = new ModelAndView("/index"); 
    modelAndView.addObject("names",names);
    return modelAndView;
}

訪問效果如下：

image

其中item為每行的詳細(xì)值，key值如下：

  • index 下標(biāo)，從0開始
  • count 第x個，從1開始
  • size 這個集合的大小
  • current 當(dāng)前行的值

1.6 th:fragment、th:insert、th:replace、th:include 代碼片段復(fù)用

  • th:fragment標(biāo)簽是聲明代碼片段，用于解決代碼復(fù)用的問題，好比Java程序?qū)懙墓么a一樣，每個需要的地方都可以直接調(diào)用；
  • th:insert 引用fragment的代碼，保留自己的主標(biāo)簽；
  • th:replace 引用fragment的代碼，不保留自己的主標(biāo)簽；
  • th:include 使用類似th:replace，Thymeleaf3.0之后不推薦使用；

footer.html頁面代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:fragment="copyright">
    ? 著作權(quán)歸 老王 所有
</div>

<div th:fragment="about">
    關(guān)于
</div>

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

</body>
</html>

聲明了兩個代碼片段，copyright和about。

cat.html頁面代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      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里面的語法，使用雙冒號來表示對類的靜態(tài)屬性和方法進(jìn)行直接引用。

執(zhí)行效果如下圖：

[圖片上傳失敗...(image-17bbb8-1536148285644)]

總結(jié)： 可以很清晰的看出th:insert、th:replace、th:include之間的區(qū)別，在于是否保留自己的主標(biāo)簽，th:include 在3.0之后已經(jīng)不推薦使用了，可以使用th:replace標(biāo)簽替代。

提高班——fragment代碼傳參

使用fragment我們是可以在html代碼中傳參的，比如我們定義了一個top.html其中有一個“歡迎XXX”的提示，而這個人名XXX就是需要動態(tài)傳遞的，這樣我們可以最大程度的完成代碼的復(fù)用，這個時候就是一個很好的使用場景，我們需要這樣做。

頁面main.html代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:replace="footer :: webcome('老王')"></div>

</body>
</html>

頁面top.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:fragment="webcome(about)">
    <span th:text="'歡迎：'+${about}"></span>
</div>

</body>
</html>

最終的效果：

image

1.7 th:with 定義局部變量

頁面代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<div th:with="sum=4-2">
    <span th:text="${sum}"></span>
</div>
</body>
</html>

頁面輸出結(jié)果：2

1.8 th:remove 刪除標(biāo)簽

th:remove用于html代碼的刪除，th:remove值有五個：

  • all 刪除本段所有代碼
  • body 刪除主標(biāo)簽內(nèi)的所有元素
  • tag 刪除主標(biāo)簽，保留主標(biāo)簽所有的元素
  • all-but-first 保留主標(biāo)簽和第一個元素，其他全部刪除
  • none 不刪除任何標(biāo)簽

示例index.html代碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

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

</body>
</html>

最終展示效果如下：

image

1.9 其他標(biāo)簽

  • 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="src=@{/img/stone.jpg},alt=${alt}" />
  • th:object 定義一個對象 <div th:object="${user}">
  • ...

2.表達(dá)式使用

2.1 表達(dá)式概要

2.1.1 簡單表達(dá)式

變量表達(dá)式：${...}
選擇變量表達(dá)式：*{...}
消息表達(dá)式：#{...}
鏈接表達(dá)式：@{...}
片段表達(dá)：~{...}

2.1.2 數(shù)據(jù)的類型

文字：'one text', 'Another one!',…
數(shù)字文字：0, 34, 3.0, 12.3,…
布爾文字：true, false
NULL文字：null
文字標(biāo)記：one, sometext, main,…

2.1.3 文本操作

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

2.1.4 算術(shù)運算

二進(jìn)制運算符：+, -, *, /, %
減號(一元運算符)：-

2.1.5 布爾運算

二進(jìn)制運算符：and, or
布爾否定(一元運算符)：!, false

2.1.6 條件運算符

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

2.1.7 條件判斷

如果-然后：(if) ? (then)
如果-然后-否則：(if) ? (then) : (else)
違約：(value) ?: (defaultvalue)

所有以上這些表達(dá)式都可以組合和嵌套，例如：

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

2.2 表達(dá)式使用實例

2.2.1 變量表達(dá)式 ${...}

變量表達(dá)式的使用，我們前面的代碼已經(jīng)見到了，$是我們平常開發(fā)中最常用的表達(dá)式，用于把后臺Java類的動態(tài)數(shù)據(jù)，映射到頁面，例如：

Java代碼：

public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "我是老王");
    return modelAndView;
}

HTML代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${data}"></span>
</body>
</html>

最終效果：

[圖片上傳失敗...(image-eb86e0-1536148285644)]

2.2.2 選擇表達(dá)式 *{...}

選擇表達(dá)式相當(dāng)于選擇了一個對象，在使用的時候不在需要這個對象的前綴，直接使用屬性的key進(jìn)行內(nèi)容展示，代碼如下：

<div th:object="${goods}">
    <span th:text="${goods.name}"></span>
    <span th:text="*{price}"></span>
    <span th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
</div>

最終效果：

iMac 7999.0 2018-08-10 14:03:51

總結(jié)： *{price} = ${goods.price}只是省去了“goods.”前綴，效果都是一樣的。

2.2.3 鏈接表達(dá)式 @{...}

用于轉(zhuǎn)換url，代碼如下：

<a th:href="@{/footer(id=666,name=laowang)}">鏈接</a>

最終呈現(xiàn)的效果：

<a href="/footer?id=666&name=laowang">鏈接</a>

鏈接表達(dá)式，可以傳遞參數(shù)，用逗號分隔。

服務(wù)器根相對路徑：@{~/path/to/something}

2.2.4 文本操作

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

文本拼加：

<span th:text="'我叫'+${name}"></span>

文本替換：

文本替換的語法：|內(nèi)容${tag}|

<span th:text="|我叫${name}，是一名開發(fā)工程師。|"></span>
2.2.5 三元表達(dá)式

<tr th:class="${row.even}? 'even' : 'odd'">

2.2.6 雙括號作用
<p th:text="${val}">...</p>
<p th:text="${{val}}">...</p>

結(jié)果：

<p>1234567890</p>
<p>1,234,567,890</p>
2.2.7 嵌入文本標(biāo)簽

雖然標(biāo)準(zhǔn)的標(biāo)簽幾乎可以滿足所有的業(yè)務(wù)場景，但某些情況我們更喜歡直接寫入HTML文本，例如：

<p>Hello, [[${name}]]</p>

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

<p>
    [[${name}]]
</p>
<p>
    [(${name})]
</p>

看到的效果是這樣的：

image

2.3 表達(dá)式對象概述

表達(dá)式里面的對象可以幫助我們處理要展示的內(nèi)容，比如表達(dá)式的工具類dates可以格式化時間，這些內(nèi)置類的熟練使用，可以讓我們使用Thymeleaf的效率提高很多。

2.3.1 表達(dá)式基本對象
  • #ctx: 操作當(dāng)前上下文.
  • #vars: 操作上下文變量.
  • #request: (僅適用于Web項目) HttpServletRequest對象.
  • #response: (僅適用于Web項目) HttpServletResponse 對象.
  • #session: (僅適用于Web項目) HttpSession 對象.
  • #servletContext: (僅適用于Web項目) ServletContext 對象.
2.3.2 表達(dá)式實用工具類
  • #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: 用于格式化數(shù)字.
  • #strings: methods for String objects: contains, startsWith, prepending/appending, etc.
  • #objects: 普通的object對象方法.
  • #bools: 判斷bool類型的工具.
  • #arrays: 數(shù)組操作工具.
  • #lists: 列表操作數(shù)據(jù).
  • #sets: Set操作工具.
  • #maps: Map操作工具.
  • #aggregates: 操作數(shù)組或集合的工具.

每個類中的具體方法，點擊查看：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

3.IDEA設(shè)置Thymeleaf自動補全

先上效果圖：

[圖片上傳失敗...(image-8624d0-1536148285644)]

IDEA默認(rèn)是開啟了Thymeleaf 插件支持的，如果不放心需要驗證，請訪問：https://www.jetbrains.com/help/idea/2018.2/thymeleaf.html

但僅僅是配置上面的效果，依然是無法正常使用的，原因是你要在html中聲明 Thymeleaf 命名空間 xmlns:th="http://www.thymeleaf.org" ，完整代碼如下：

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2 th:text="${hi}"></h2>
</body>
</html>

其中關(guān)鍵的代碼是：

xmlns:th="http://www.thymeleaf.org"

這樣當(dāng)你在代碼輸入“th:”的時候就會看到 Thymeleaf 的所有標(biāo)簽了。

三、Spring Boot 集成 Thymeleaf

3.1 開發(fā)環(huán)境

  • Spring Boot 2.0.4
  • Thymeleaf 3.0.9
  • Jdk 8
  • Windows 10
  • IDEA 2018.2

在正式集成Thymeleaf引擎之前，先來看下目錄結(jié)構(gòu)如圖：

3.2 Spring MVC目錄結(jié)構(gòu)

image

除去包名，我們來解釋一下這些目錄代表的含義：

  • common 通用公共類
  • controller 控制器類
  • dao 數(shù)據(jù)交互類
  • service 業(yè)務(wù)邏輯處理類
  • Application.java 啟動文件
  • resources 靜態(tài)文件存儲文件夾
  • resources/templates 所有的Thymeleaf目錄存放目錄
  • resources/application.properties 全局配置類
  • pom.xml Maven 配置文件

3.3 Spring Boot 集成 Thymeleaf 分為四步：

  1. pom.xml 添加 Thymeleaf 模板引擎
  2. application.properties 配置 Thymeleaf 信息
  3. 創(chuàng)建controller類，編寫代碼
  4. 創(chuàng)建模板，編寫html代碼

接下來我們具體分別來看具體的步驟。

3.3.1 pom.xml 添加 Thymeleaf 模板引擎

<!--thymeleaf模板-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3.3.2 application.properties 配置 Thymeleaf 信息

# 啟用緩存:建議生產(chǎn)開啟
spring.thymeleaf.cache=false
# 建議模版是否存在
spring.thymeleaf.check-template-location=true
# Content-Type 值
spring.thymeleaf.servlet.content-type=text/html
# 是否啟用
spring.thymeleaf.enabled=true
# 模版編碼
spring.thymeleaf.encoding=utf-8
# 應(yīng)該從解析中排除的視圖名稱列表（用逗號分隔）
spring.thymeleaf.excluded-view-names=
# 模版模式
spring.thymeleaf.mode=HTML5
# 模版存放路徑
spring.thymeleaf.prefix=classpath:/templates/
# 模版后綴
spring.thymeleaf.suffix=.html
Thymeleaf常用配置說明
配置項 類型 默認(rèn)值 建議值 說明
spring.thymeleaf.enabled bool true 默認(rèn) 是否啟用
spring.thymeleaf.mode String HTML 默認(rèn) 模板類型，可以設(shè)置為HTML5
spring.thymeleaf.cache bool true 默認(rèn) 是否啟用緩存，生成環(huán)境建議設(shè)置為true
spring.thymeleaf.prefix String classpath:/templates/ 默認(rèn) 模版存放路徑
spring.thymeleaf.suffix String .html 默認(rèn) 模版后綴
spring.thymeleaf.servlet.content-type String text/html 默認(rèn) Content-Type 值
spring.thymeleaf.encoding String - utf-8 模版編碼

3.3.3 創(chuàng)建controller類，編寫代碼

我們在controller文件夾創(chuàng)建index.java，代碼如下：

package com.hello.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("/")
public class Index {

    @RequestMapping("/")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView("/index");
        modelAndView.addObject("name", "王磊的博客");
        return modelAndView;
    }
}

關(guān)鍵代碼解讀：

  1. @ResponseBody注解：如果使用該注解，返回結(jié)果會直接輸出，而不是使用模板引擎渲染
  2. 使用ModelAndView對象，指定視圖名&添加視圖對象

3.3.4 創(chuàng)建模板，編寫html代碼

我們在resources/templates下創(chuàng)建index.html，代碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>

啟動調(diào)試，在瀏覽器輸入：http://localhost:8080/

效果如下：

image

相關(guān)代碼GitHub：https://github.com/vipstone/springboot-example.git

四、參考資料

thymeleaf官方文檔 Thymeleaf ：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

thymeleaf官方文檔 Spring + Thymeleaf ：https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容