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

時間 2020-03-13

標籤 springboot 入門系列 thymeleaf 經常使用標籤用法欄目 Spring 简体版

原文原文鏈接

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

今天咱們主要來看看 Thymeleaf 的經常使用標籤和用法！其餘詳細的內容，你們能夠看看Thymeleaf官方使用手冊。css

這個系列課程的完整源碼，也會提供給你們。你們關注個人微信公衆號（架構師精進），回覆：springboot源碼獲取這個系列課程的完整源碼。或者點此連接直接下載完整源碼html

1、基礎語法

變量表達式 ${}java

使用方法：直接使用th:xx = "${}" 獲取對象屬性。例如：jquery

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

選擇變量表達式 *{}web

使用方法：首先經過th:object 獲取對象，而後使用th:xx = "*{}"獲取對象屬性。spring

這種簡寫風格極爲清爽，推薦你們在實際項目中使用。例如：bootstrap

<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表達式 @{}springboot

使用方法：經過連接表達式@{}直接拿到應用路徑，而後拼接靜態資源路徑。例如：微信

<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')}"/>

2、迭代循環

想要遍歷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>

3、條件判斷

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

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

若是想取反則使用unless 例如：

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

4、日期格式化

使用默認的日期格式(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')}"/>

5、內聯寫法

（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裏面的表達式。

6、包含

咱們在開發中經常都把頁面共同的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>