SpringBoot入門系列（五）Thymeleaf的常用標籤和用法

阿新 • • 發佈：2020-03-12

前面介紹了Spring Boot 中的整合Thymeleaf 。不清楚的朋友可以看看之前的文章：https://www.cnblogs.com/zhangweizhong/category/1657780.html。

今天我們主要來看看 Thymeleaf 的常用標籤和用法！其他詳細的內容，大家可以看看Thymeleaf官方使用手冊。

這個系列課程的完整原始碼，也會提供給大家。大家關注我的微信公眾號（架構師精進），回覆：springboot原始碼獲取這個系列課程的完整原始碼。或者點此連結直接下載完整原始碼

一、基礎語法

變量表達式 ${}

使用方法：直接使用th:xx = "${}"

獲取物件屬性。例如：

<form id="userForm">
    <input id="id" name="id" th:value="${user.id}"/>
    <input id="username" name="username" th:value="${user.username}"/>
    <input id="password" name="password" th:value="${user.password}"/>
</form>

<div th:text="hello"></div>

<div th:text="${user.username}"></div>

選擇變量表達式 *{}

使用方法：首先通過th:object 獲取物件，然後使用th:xx = "*{}"獲取物件屬性。

這種簡寫風格極為清爽，推薦大家在實際專案中使用。例如：

<form id="userForm" th:object="${user}">
    <input id="id" name="id" th:value="*{id}"/>
    <input id="username" name="username" th:value="*{username}"/>
    <input id="password" name="password" th:value="*{password}"/>
</form>

URL表示式 @{}

使用方法：通過連結表示式@{}直接拿到應用路徑，然後拼接靜態資源路徑。例如：

<script th:src="@{/webjars/jquery/jquery.js}"></script>
<link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">

片段表示式 ~{}

片段表示式是Thymeleaf的特色之一，細粒度可以達到標籤級別，這是JSP無法做到的。
片段表示式擁有三種語法：

~{ viewName } 表示引入完整頁面
~{ viewName ::selector} 表示在指定頁面尋找片段其中selector可為片段名、jquery選擇器等
~{ ::selector} 表示在當前頁尋找

使用方法：首先通過th:fragment定製片段，然後通過th:replace 填寫片段路徑和片段名。例如：

<!-- /views/common/head.html-->
<head th:fragment="static">
        <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
</head>

<!-- /views/your.html -->
<div th:replace="~{common/head::static}"></div>

在實際使用中，我們往往使用更簡潔的表達，去掉表示式外殼直接填寫片段名。例如：

<!-- your.html -->
<div th:replace="common/head::static"></div>

注意：使用替換路徑th:replace 開頭請勿新增斜槓，避免部署執行的時候出現路徑報錯。（因為預設拼接的路徑為spring.thymeleaf.prefix = classpath:/templates/）

訊息表示式

即通常的國際化屬性：#{msg} 用於獲取國際化語言翻譯值。例如：

 <title th:text="#{user.title}"></title>

其它表示式

在基礎語法中，預設支援字串連線、數學運算、布林邏輯和三目運算等。例如：

<input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/>

二、迭代迴圈

想要遍歷List集合很簡單，配合th:each 即可快速完成迭代。例如遍歷使用者列表：

<div th:each="user:${userList}">
    賬號：<input th:value="${user.username}"/>
    密碼：<input th:value="${user.password}"/>
</div>

在集合的迭代過程還可以獲取狀態變數，只需在變數後面指定狀態變數名即可，狀態變數可用於獲取集合的下標/序號、總數、是否為單數/偶數行、是否為第一個/最後一個。例如：

<div th:each="user,stat:${userList}" th:class="${stat.even}?'even':'odd'">
    下標：<input th:value="${stat.index}"/>
    序號：<input th:value="${stat.count}"/>
    賬號：<input th:value="${user.username}"/>
    密碼：<input th:value="${user.password}"/>
</div>

如果預設狀態變數名，則迭代器會預設幫我們生成以變數名開頭的狀態變數 xxStat，例如：

<div th:each="user:${userList}" th:class="${userStat.even}?'even':'odd'">
    下標：<input th:value="${userStat.index}"/>
    序號：<input th:value="${userStat.count}"/>
    賬號：<input th:value="${user.username}"/>
    密碼：<input th:value="${user.password}"/>
</div>

三、條件判斷

條件判斷通常用於動態頁面的初始化，例如：

<div th:if="${userList}">
    <div>的確存在..</div>
</div>

如果想取反則使用unless 例如：

<div th:unless="${userList}">
    <div>不存在..</div>
</div>

四、日期格式化

使用預設的日期格式(toString方法) 並不是我們預期的格式：Mon Dec 03 23:16:50 CST 2018

<input type="text" th:value="${user.createTime}"/>

此時可以通過時間工具類#dates來對日期進行格式化：2018-12-03 23:16:50

<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>

五、內聯寫法

（1）為什麼要使用內聯寫法？·答：因為 JS無法獲取服務端返回的變數。

（2）如何使用內聯表示式？答：標準格式為：[[${xx}]] ，可以讀取服務端變數，也可以呼叫內建物件的方法。例如獲取使用者變數和應用路徑：

    <script th:inline="javascript">
        var user = [[${user}]];`
        var APP_PATH = [[${#request.getContextPath()}]];
        var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
    </script>

（3）標籤引入的JS裡面能使用內聯表示式嗎？答：不能！內聯表示式僅在頁面生效，因為Thymeleaf只負責解析一級檢視，不能識別外部標籤JS裡面的表示式。

六、包含

我們在開發中常常都把頁面共同的header和footer提取出來，弄成單獨的頁面，然後讓該包含的頁面包含進來，我們就拿footer舉例，首先在【templates】下新建一個要背其他頁面包含的footer頁面【include】：

<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">
    <p>All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">
    <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>

然後直接在我們的hello.html頁面中分別引用上面頁面定義好的兩個foot：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<div th:include="include::footer1"></div>
<div th:replace="include::footer2(2015,2018)"></div>
</body>
</html>

重新整理頁面，可以看到效果：

最後

以上，就把如何建立執行Spring Boot專案簡單的介紹完了，後面會深入介紹Spring Boot的各個功能和用法。

這個系列課程的完整原始碼，也會提供給大家。大家關注我的微信公眾號（架構師精進），回覆：springboot原始碼。獲取這個系列課程的完整原始碼。

SpringBoot入門系列（五）Thymeleaf的常用標籤和用法

一、基礎語法

二、迭代迴圈

三、條件判斷

四、日期格式化

五、內聯寫法

六、包含

最後

SpringBoot入門系列（五）Thymeleaf的常用標籤和用法

SpringBoot入門系列（四）整合模板引擎Thymeleaf

Vue入門系列（五）Vue實例詳解與生命周期

Scala入門系列（五）：面向對象之類

Flutter入門系列（五）---環境配置

springboot入門系列（一）

爬蟲入門系列（五）：正則表示式完全指南（上）

OllyDBG 入門系列（五）－訊息斷點及 RUN 跟蹤

SpringBoot入門系列（三）---檢視解析

sencha touch 入門系列（五）sencha touch執行及程式碼解析（上）

Docker快速入門系列（六）——Docker常用命令之映象命令

SpringBoot入門系列（一）---基於eclipse配置springboot開發環境

SpringBoot入門系列（二）如何返回統一的資料格式

SpringBoot入門系列（三）資原始檔屬性配置

SpringBoot入門系列（七）Spring Boot整合Redis快取

MongoDB入門系列（一）：基礎概念和安裝

Exchange Server 2013 高可用部署系列（五）外網訪問和證書配置

Hive 系列（五）—— Hive 分割槽表和分桶表

JVM調優系列：（五）JVM常用調試參數和工具

Docker | 學習系列（五）Docker容器常用命令

SpringBoot入門系列（五）Thymeleaf的常用標籤和用法

一、基礎語法

二、迭代迴圈

三、條件判斷

四、日期格式化

五、內聯寫法

六、包含

最後

相關推薦