深入實踐Spring Boot3.3.2 Thymeleaf功能簡介

<b>3.3.2　thymeleaf功能簡介</b>

在html頁面上使用thymeleaf标簽語言，用一個簡單的關鍵字“th”來标注。使用thymeleaf标簽語言的典型例子如下：

&lt;h3

th:text="${actor.name}"&gt;&lt;/h3&gt;

&lt;img

th:src="@{/images/logo.png}"/&gt;

其中，th:text指定了在标簽&lt;h3&gt;中顯示的文本，它的值來自于關鍵字“$”所引用的記憶體變量，th:src設定了标簽&lt;img&gt;的圖檔檔案的連結位址，既可以是絕對路徑，也可以是相對路徑。下面列出了thymeleaf的一些主要标簽和函數。

th:text，顯示文本。

th:utext：和th:text的差別是針對"unescaped text"。

th:attr：設定标簽屬性。

th:if or

th:unless：條件判斷語句。

th:switch，th:case：選擇語句。

th:each：循環語句。

#dates：日期函數。

#calendars：月曆函數。

#numbers：數字函數。

#strings：字元串函數。

#objects：對象函數。

#bools：邏輯函數。

#arrays：數組函數。

#lists：清單函數。

本章的執行個體工程将在視圖設計中使用thymeleaf的下列幾個主要功能，而有關thymeleaf的詳細說明和介紹可以通路它的官方網站http://www.thymeleaf.org/，以獲得更多的幫助。

1.?使用功能函數

thymeleaf有一些日期功能函數、字元串函數、數組函數、清單函數等，代碼清單3-11是thymeleaf使用日期函數的一個例子，#dates.format是一個日期格式化的使用執行個體，它将電影的建立日期格式化為中文環境的使用格式“'yyyy-mm-dd hh:mm:ss'”。

代碼清單3-11　thymeleaf使用函數

th:value="${movie.createdate}

? ${#dates.format(movie.createdate,'yyyy-mm-dd hh:mm:ss')} :''"

2.?使用程式設計語句

thymeleaf有條件語句、選擇語句、循環語句等。代碼清單3-12使用each循環語句來顯示一個資料清單，即在下拉清單框中使用循環語句來顯示所有的演員清單。

代碼清單3-12　th:each循環

&lt;select

name="actorid" id="actorid"&gt;

&lt;option value=""&gt;選擇演員&lt;/option&gt;

&lt;option

th:each="actor:${actors}"

    th:value="${actor.id}"

    th:text="${actor.name}"&gt;

&lt;/option&gt;

&lt;/select&gt;

3.?使用頁面架構模闆

thymeleaf的頁面架構模闆是比較優秀的功能。預先定義一個layout，它具有頁眉、頁腳、提示欄、導航欄和内容顯示等區域，如代碼清單3-13所示。其中，layout:fragment=

"

prompt"是一個提示欄，它可以讓引用的視圖替換顯示的内容；fragments/nav :: nav是一個導航欄并指定了視圖檔案，也就是說它不能被引用的視圖替換内容；layout:fragment="content"是一個主要内容顯示區域，它也能由引用的視圖替換顯示内容；fragments/footer :: footer是一個頁腳定義并且也指定了視圖檔案，即不被引用的視圖替換顯示内容。這樣設計出來的頁面模闆架構如圖3-1所示。

代碼清單3-13　layout模闆

&lt;div

class="headerbox"&gt;

    &lt;div class="topbox"&gt;

        &lt;div class="toplogo

f-left"&gt;

            &lt;a href="#"&gt;&lt;img

th:src="@{/images/logo.png}"/&gt;&lt;/a&gt;

        &lt;/div&gt;

        &lt;div class="new-nav"&gt;

            &lt;h3&gt;電影頻道&lt;/h3&gt;

    &lt;/div&gt;

&lt;/div&gt;

class="locationline" layout:fragment=" prompt "&gt;

    目前位置：首頁 &amp;gt; &lt;em&gt;頁面&lt;/em&gt;

&lt;table

class="globalmainbox"

style="position:relative;z-index:1"&gt;

    &lt;tr&gt;

        &lt;td class="columnleftbox"

valign="top"&gt;

            &lt;div

th:replace="fragments/nav :: nav"&gt;&lt;/div&gt;

        &lt;/td&gt;

        &lt;td

class="whitespace"&gt;&lt;/td&gt;

        &lt;td class="rightcolumnbox"

layout:fragment="content"&gt;&lt;/div&gt;

    &lt;/tr&gt;

&lt;/table&gt;

class="footbox" th:replace="fragments/footer ::

footer"&gt;&lt;/div&gt;

圖3-1　頁面架構模闆

有了頁面模闆之後，就可以在一個首頁面視圖上引用上面的layout，并替換它的提示欄prompt和主要内容顯示區域content，其他頁眉、頁腳和導航欄卻保持同樣的内容，如代碼清單3-14所示。這樣就可以設計出一個使用共用模闆的具有統一風格特征的界面。

代碼清單3-14　使用layout模闆的視圖設計

&lt;html

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

layout:decorator="fragments/layout"&gt;

……

目前位置：首頁 &amp;gt; &lt;em &gt;電影管理&lt;/em&gt;

class="statisticbox w-782" 

layout:fragment="content"&gt;

......