Spring Boot系列之Thymeleaf常用語法

PS: 如果我們的熱愛只有三分鐘熱度，便無法完成信仰的考驗，困惑來臨時，第一件事往往是逃跑，任何技能都不能在短時間內融會貫通，只要只要足夠堅持，時間會給你答案。

上篇文章中簡單介紹了 Thymeleaf 模板的依賴、基本屬性以及使用方式，下面將從以下幾個方面介紹 Thymeleaf 中的常見語法：

表達式
字串拼接
條件比較
switch 多分支
循環
其他操作符
內聯
測試效果

下文中涉及到的部分參數或者變數的具體值如下：

// 測試用傳值
model.addAttribute("name", "jzman");
model.addAttribute("gzh", "<b>躬行之</b>");
model.addAttribute("user", new User("manu"));
model.addAttribute("id", "123456");
model.addAttribute("flag", false);
model.addAttribute("value", 10);
// 循環語句測試用
model.addAttribute("list", mUserList);
// span標籤的id,css內聯測試用
model.addAttribute("idName", "css");
// css樣式中要使用的顏色值,css內聯測試用
model.addAttribute("color", "#FF0000");

表達式#

Thymeleaf 中常見的表達式主要有如下幾種：

消息表達式：使用 #{} 獲取對應屬性文件中的值；
變數表達式：使用 ${} 獲取變數值，這些變數的值一般由後端傳入；
選擇變數表達式：配合 th:object 屬性，使用 *{} 來獲取 th:object 指定的對象的屬性值；
連結網址表達式：使用 @{} 表示連結地址，可以方便的在該連結地址上傳遞參數。

上述幾種表達式的使用方式如下所示：

<ul th:object="${user}">
    <!--消息表達式-->
    <li>消息表達式：<span th:text="#{home.title}">Hello World!</span></li>

    <!--變數表達式-->
    <li>變數表達式：<span th:text="${name}">Hello World!</span></li>

    <!--選擇變數表達式-->
    <li>選擇變數表達式：<span th:text="*{username}">Hello World!</span></li>
    <li>選擇變數表達式：<span th:text="${user.username}">Hello World!</span></li>

    <!--連結表達式-->
    <li>連結表達式：<a href="default.html" th:href="@{default.html}">Default Page.</a></li>
    <li>連結表達式：<a href="default.html" th:href="@{http://localhost:8080/{path}/i18n}">I18n Page.</a></li>
    <li>連結表達式：<a href="default.html" th:href="@{http://localhost:8080/message(id=${id})}">Message.</a></li>
</ul>

上述代碼中的 th 屬性都是 Thymeleaf 對應 Html 屬性定義的屬性，消息表達式案例中獲取了定義在 resources 下的 home.properties 文件中的 home.title 的值。

在變數表達式案例中獲取了後端傳入的名為 name 的變數的值。

在選擇變數表達式案例中獲取了 th:object 屬性指定對象 user 的 username 的值，在不設置 th:object 屬性的情況下，${} 和 *{} 沒有任何區別可通用，使用 *{} 也可以通過對象.屬性訪問對象的某個屬性值。

連結表達式案例中為 <a> 標籤指定了連結地址，而且還可以方便的指定連結需要的參數。

看下後端是如何將變數 name 和對象 user 傳入頁面的，代碼如下：

字串拼接#

字串拼接一般是使用 + 進行字串之間的拼接，也可以使用雙豎線包裹字串內容來實現走服穿的拼接，使用方式如下：

<!--字串拼接-->
<!--1.使用+號-->
<li><span>使用+號: </span><span th:text="'My name is '+${name}+'!'">Default</span></li>
<!--2.使用|號-->
<li><span>使用| 號: </span><span th:text="|My name is ${name}!|"></span></li>

測試結果如下：

1.使用+號: My name is jzman!
2.使用| 號: My name is jzman!

條件比較#

Thymeleaf 中的條件判斷語句是 th:if 和 th:unless，th:if 表示條件滿足時執行，th:unless 表示條件不滿足時執行，此外看一下 Thymeleaf 中常見的比較運算符如下：

gt (>)：great than (⼤於)
lt (<)：less than (⼩於)
ge (>=)：great equal (⼤於等於)
le (<=)：less equal (⼩於等於)
not (!)：not (否定)
eq (==)：equal (等於)
neq/ne (!=)：not equal (不等於)

上述比較運算符中，其對應的字串是各個比較運算符的別名，如大於號可以使用 gt 來表示等，這樣做的目的是因為 Thymeleaf 模板可以在 XML 文檔中使用，而 XML 文檔中的屬性值是不允許使用 < 和 > 標籤的，當然在這裡可以自由選擇哪種方式進行專案開發，使用方式如下：

<!--條件比較--value=10-->
<li th:if="${value} gt 9"><span>gt(>)   </span><span th:text="|${value}|+'>9'">Default</span></li>
<li th:if="${user} ne null"><span>ne(!=)   </span><span th:text="'User object is not null!'">Default</span></li>
<!--if/unless-->
<li th:if="${value} gt 9"><span>if   </span><span th:text="|${value}|+'>9成立時才執行'">Default</span></li>
<li th:unless="${value} gt 11"><span>unless   </span><span th:text="|${value}|+'>11不成立時才執行'">Default</span></li>

測試結果如下：

gt(>) 10>9
ne(!=) User object is not null!
if 10>9成立時才執行
unless 10>11不成立時才執行

switch 多分支#

switch...case 語句也屬於條件語句，th:case="*" 表示默認選擇項，使用方式如下：

<li th:switch="${name}">
    <p th:case="jzman">He name is jzman.</p>
    <p th:case="manu">He name is manu.</p>
    <!--default-->
    <p th:case="*">others</p>
</li>

測試結果如下：

這是jzman

循環#

在模板代碼中使用 for 循環如下：

<li><span>不帶索引</span>
    <table>
        <tr th:each="user:${list}">
            <td th:text="${user.userId}"></td>
            <td th:text="${user.username}"></td>
        </tr>
    </table>
</li>

<li><span>帶索引</span>
    <table>
        <tr th:each="user,start:${list}">
            <td th:text="${start.index}"></td>
            <td th:text="${user.userId}"></td>
            <td th:text="${user.username}"></td>
        </tr>
    </table>
</li>

上述代碼中通過 start 可以獲取循環中的一些信息如下：

index: 當前迭代對象的 index, 從 0 開始計算；
count: 當前迭代對象的 index, 從 1 開始計算；
size: 被迭代對象的⼤⼩；
current: 當前迭代變數；
even/odd: 布爾值，表示當前循環是否是偶數或奇數，從 0 開始計算；
first: 布爾值，當前循環是否是第⼀個；
last: 布爾值，當前循環是否是最後⼀個。

測試結果如下:

不帶索引
1	jzman
2	躬行之
3	Tom
帶索引
0	1	jzman
1	2	躬行之
2	3	Tom

其他操作符#

?: 操作符先判斷前面表達式是否為 null , 如果為 null 則使用後面表達式的值，反之，則使用前面表達式的值，使用方式參考如下：

<!--?:操作符：先判斷前面表達式是否為null,如果為null則使用後面表達式的值，反之-->
<li><span>?:操作符：</span><span th:text="${name} ?: 'default'">Default</span></li>
<!--三目運算符也可以表示-->
<li><span>三目操作符：</span><span th:text="${name} ne null ? ${name}:'default'">Default</span></li>

測試結果如下：

?:操作符：jzman
三目操作符：jzman

_ 操作符僅表示無任何操作，如下變數 test 是為 null 的，所以在執行到 _ 操作符的時候不做任何操作。<span> 標籤中的值是 Default:

<!--_操作符：表示不做任何操作-->
<li><span>_操作符：</span><span th:text="${test} ?: _">Default</span></li>

測試結果如下：

_操作符：Default

內聯#

Thymeleaf 中的支持表達式內聯、JavaScript 內聯、CSS 內聯以及文本內聯，下面介紹最常用的前三種內聯方式：

表達式內聯
JavaScript 內聯
CSS 內聯

表達式內聯#

在 [[..]] 和 [(...)] 之間的表達式在 Thymeleaf 模板中稱之為內聯表達式，這相當於在 HTML 標籤中分別使用 th:text 和 th:utext 來設置對應的元素的文本值，其使用方式如下：

<!--表達式內聯-->
<!--對應表達式的值按照文本進行處理，不會處理HTML標籤效果-->
<li><span>表達式內聯：</span>公眾號名稱是[[${gzh}]]</li>
<!--對應表達式的值按照不按文本進行處理，會處理帶HTML標籤效果-->
<li><span>表達式內聯：</span>公眾號名稱是[(${gzh})]</li>

兩者最大的區別在於是否對文本處理，[[..]] 將不會對給定的文本進行處理，原樣輸出，而 [(...)] 會對帶有格式的文本渲染後輸出，測試結果如下：

表達式內聯：公眾號名稱是<b>躬行之</b>
表達式內聯：公眾號名稱是躬行之

上述第二行中的 <b> 標籤中的內容 躬行之 是被加粗的，具體看文末運行效果圖。

JavaScript 內聯#

JavaScript 內聯允許在 js 代碼中直接使用 [[${...}]] 獲取裡面表達式的值，使用時需要在 <script> 模塊使用 th:inline="javascript" 開啟 javascript 內聯支持，使用方式如下：

<script th:inline="javascript">
    function gzhName() {
        // 輸出未轉義的字符
        // let gzh = [(${gzh})];
        // js獲取後端傳入的名稱為gzh的值
        let gzh = [[${gzh}]];
        console.log("gzhName：" + gzh);
        let span = document.getElementsByClassName("jsInline");
        span[0].innerHTML = gzh.toString();
    }
</script>
<!--...-->
<!--javascript內聯-->
<li><span>javascript內聯：</span><button onclick="gzhName()">從js獲取變數值</button><span class="jsInline"></span></li>

運行程序後，點擊 button 即可獲取變數 gzh 的值，看下 JavaScript 的自然模板，使用註釋包裹表達式，動態運行時會忽略註釋前後的文件只輸出表達式的值，如果是靜態頁面則忽略該表達式的值，使用方式參考如下：

// javascript自然模板
let name = /*[[${name}]]*/ "測試";
console.log("name：" + name);

此外，如果需要未轉義的字串可以使用 [(${...})] 來獲取。

CSS 內聯#

CSS 內聯允許在 <style> 中直接使用 [[${...}]] 獲取裡面表達式的值，使用時需要在 <style> 中使用 th:inline="css" 開啟 CSS 內聯支持，使用方式如下：

<!--開啟CSS內聯-->
<style th:inline="css">
    /*設置idName對應id的元素內字體的顏色*/
    #[[${idName}]]{
        /*CSS自然模板*/
        color:/*[(${color})]*/ #0000FF;
    }
</style>

<!--CSS內聯-->
<li><span>CSS內聯：</span><span id="css">測試CSS內聯</span></li>

上述代碼中，後端會傳入 idName 的值和 color 的值，這樣就可以動態的設置 CSS 的樣式了。

測試效果#

具體代碼可以點擊閱讀原文查看對應源碼。