####本節書摘來自華章出版社《深入實踐Spring Boot》一書中的第3章，第3.3節，作者陳韶健，更多章節內容可以訪問云棲社區“華章計算機”公眾號查看。

3.3　使用Thymeleaf模板

完成了模型和控制器的設計之后，接下來的工作就是視圖設計了。在視圖設計中主要使用Thymeleaf模板來實現。在進行視圖設計之前，先了解一下Thymeleaf模板的功能。
Thymeleaf是一個優秀的面向Java的XML/XHTML/HTML 5頁面模板，并具有豐富的標簽語言和函數。使用Spring Boot框架進行界面設計，一般都會選擇Thymeleaf模板。

3.3.1　Thymeleaf配置

要使用Thymeleaf模板，首先，必須在工程的Maven管理中引入它的依賴：“spring-boot-starter-thymeleaf”，如代碼清單3-9所示。
代碼清單3-9　Thymeleaf依賴配置

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

其次，必須配置使用Thymeleaf模板的一些參數。在一般的Web項目中都會使用如代碼清單3-10所示的配置，其中，pref?ix指定了HTML文件存放在webapp的/WEB-INF/views/目錄下面，或者也可以指定其他路徑，其他一些參數的設置其實是使用了Thymeleaf的默認設置。
在實例中，為了更方便將項目發布成jar文件，我們將使用Thymeleaf自動配置中的默認配置選項，即只要在資源文件夾resoueces中增加一個templates目錄即可，這個目錄用來存放HTML文件。
代碼清單3-10　Thymeleaf配置

spring:thymeleaf:prefix: /WEB-INF/views/suffix: .htmlmode: HTML5encoding: UTF-8content-type: text/htmlcache: false

如果工程中增加了Thymeleaf的依賴，而沒有進行任何配置，或者增加默認目錄，啟動應用時就會報錯。

3.3.2　Thymeleaf功能簡介

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

<h3 th:text="${actor.name}"></h3> <img th:src="@{/images/logo.png}"/>

其中，th:text指定了在標簽<中顯示的文本，它的值來自于關鍵字“$”所引用的內存變量，th:src設定了標簽的圖片文件的鏈接地址，既可以是絕對路徑，也可以是相對路徑。下面列出了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循環

<select name="actorid" id="actorid"> <option value="">選擇演員</option> <option th:each="actor:${actors}"th:value="${actor.id}"th:text="${actor.name}"> </option> </select>

3.使用頁面框架模板
Thymeleaf的頁面框架模板是比較優秀的功能。預先定義一個layout，它具有頁眉、頁腳、提示欄、導航欄和內容顯示等區域，如代碼清單3-13所示。其中，layout:fragment=
" prompt"是一個提示欄，它可以讓引用的視圖替換顯示的內容；fragments/nav :: nav是一個導航欄并指定了視圖文件，也就是說它不能被引用的視圖替換內容；layout:fragment="content"是一個主要內容顯示區域，它也能由引用的視圖替換顯示內容；fragments/footer :: footer是一個頁腳定義并且也指定了視圖文件，即不被引用的視圖替換顯示內容。這樣設計出來的頁面模板框架如圖3-1所示。
代碼清單3-13　layout模板

<div class="headerBox"><div class="topBox"><div class="topLogo f-left"><a href="#"><img th:src="@{/images/logo.png}"/></a></div><div class="new-nav"><h3>電影頻道</h3></div></div> </div> <div class="locationLine" layout:fragment=" prompt ">當前位置：首頁 &gt; <em>頁面</em> </div> <table class="globalMainBox" style="position:relative;z-index:1"><tr><td class="columnLeftBox" valign="top"><div th:replace="fragments/nav :: nav"></div></td><td class="whiteSpace"></td><td class="rightColumnBox" valign="top"><div layout:fragment="content"></div></td></tr> </table><div class="footBox" th:replace="fragments/footer :: footer"></div>

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

xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout">

當前位置：首頁 > 電影管理

總結

以上是生活随笔為你收集整理的《深入实践Spring Boot》一3.3　使用Thymeleaf模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。