####本節(jié)書摘來(lái)自華章出版社《深入實(shí)踐Spring Boot》一書中的第3章，第3.3節(jié)，作者陳韶健，更多章節(jié)內(nèi)容可以訪問(wèn)云棲社區(qū)“華章計(jì)算機(jī)”公眾號(hào)查看。

3.3　使用Thymeleaf模板

完成了模型和控制器的設(shè)計(jì)之后，接下來(lái)的工作就是視圖設(shè)計(jì)了。在視圖設(shè)計(jì)中主要使用Thymeleaf模板來(lái)實(shí)現(xiàn)。在進(jìn)行視圖設(shè)計(jì)之前，先了解一下Thymeleaf模板的功能。
Thymeleaf是一個(gè)優(yōu)秀的面向Java的XML/XHTML/HTML 5頁(yè)面模板，并具有豐富的標(biāo)簽語(yǔ)言和函數(shù)。使用Spring Boot框架進(jìn)行界面設(shè)計(jì)，一般都會(huì)選擇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模板的一些參數(shù)。在一般的Web項(xiàng)目中都會(huì)使用如代碼清單3-10所示的配置，其中，pref?ix指定了HTML文件存放在webapp的/WEB-INF/views/目錄下面，或者也可以指定其他路徑，其他一些參數(shù)的設(shè)置其實(shí)是使用了Thymeleaf的默認(rèn)設(shè)置。
在實(shí)例中，為了更方便將項(xiàng)目發(fā)布成jar文件，我們將使用Thymeleaf自動(dòng)配置中的默認(rèn)配置選項(xiàng)，即只要在資源文件夾resoueces中增加一個(gè)templates目錄即可，這個(gè)目錄用來(lái)存放HTML文件。
代碼清單3-10　Thymeleaf配置

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

如果工程中增加了Thymeleaf的依賴，而沒有進(jìn)行任何配置，或者增加默認(rèn)目錄，啟動(dòng)應(yīng)用時(shí)就會(huì)報(bào)錯(cuò)。

3.3.2　Thymeleaf功能簡(jiǎn)介

在HTML頁(yè)面上使用Thymeleaf標(biāo)簽語(yǔ)言，用一個(gè)簡(jiǎn)單的關(guān)鍵字“th”來(lái)標(biāo)注。使用Thymeleaf標(biāo)簽語(yǔ)言的典型例子如下：

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

其中，th:text指定了在標(biāo)簽<中顯示的文本，它的值來(lái)自于關(guān)鍵字“$”所引用的內(nèi)存變量，th:src設(shè)定了標(biāo)簽的圖片文件的鏈接地址，既可以是絕對(duì)路徑，也可以是相對(duì)路徑。下面列出了Thymeleaf的一些主要標(biāo)簽和函數(shù)。
th:text，顯示文本。
th:utext：和th:text的區(qū)別是針對(duì)"unescaped text"。
th:attr：設(shè)置標(biāo)簽屬性。
th:if or th:unless：條件判斷語(yǔ)句。
th:switch，th:case：選擇語(yǔ)句。
th:each：循環(huán)語(yǔ)句。

dates：日期函數(shù)。

calendars：日歷函數(shù)。

numbers：數(shù)字函數(shù)。

strings：字符串函數(shù)。

objects：對(duì)象函數(shù)。

bools：邏輯函數(shù)。

arrays：數(shù)組函數(shù)。

lists：列表函數(shù)。

本章的實(shí)例工程將在視圖設(shè)計(jì)中使用Thymeleaf的下列幾個(gè)主要功能，而有關(guān)Thymeleaf的詳細(xì)說(shuō)明和介紹可以訪問(wèn)它的官方網(wǎng)站http://www.thymeleaf.org/，以獲得更多的幫助。
1.使用功能函數(shù)
Thymeleaf有一些日期功能函數(shù)、字符串函數(shù)、數(shù)組函數(shù)、列表函數(shù)等，代碼清單3-11是Thymeleaf使用日期函數(shù)的一個(gè)例子，#dates.format是一個(gè)日期格式化的使用實(shí)例，它將電影的創(chuàng)建日期格式化為中文環(huán)境的使用格式“'yyyy-MM-dd HH:mm:ss'”。
代碼清單3-11　Thymeleaf使用函數(shù)

th:value="${movie.createDate} ? ${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')} :''"

2.使用編程語(yǔ)句
Thymeleaf有條件語(yǔ)句、選擇語(yǔ)句、循環(huán)語(yǔ)句等。代碼清單3-12使用each循環(huán)語(yǔ)句來(lái)顯示一個(gè)數(shù)據(jù)列表，即在下拉列表框中使用循環(huán)語(yǔ)句來(lái)顯示所有的演員列表。
代碼清單3-12　th:each循環(huán)

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

3.使用頁(yè)面框架模板
Thymeleaf的頁(yè)面框架模板是比較優(yōu)秀的功能。預(yù)先定義一個(gè)layout，它具有頁(yè)眉、頁(yè)腳、提示欄、導(dǎo)航欄和內(nèi)容顯示等區(qū)域，如代碼清單3-13所示。其中，layout:fragment=
" prompt"是一個(gè)提示欄，它可以讓引用的視圖替換顯示的內(nèi)容；fragments/nav :: nav是一個(gè)導(dǎo)航欄并指定了視圖文件，也就是說(shuō)它不能被引用的視圖替換內(nèi)容；layout:fragment="content"是一個(gè)主要內(nèi)容顯示區(qū)域，它也能由引用的視圖替換顯示內(nèi)容；fragments/footer :: footer是一個(gè)頁(yè)腳定義并且也指定了視圖文件，即不被引用的視圖替換顯示內(nèi)容。這樣設(shè)計(jì)出來(lái)的頁(yè)面模板框架如圖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 ">當(dāng)前位置：首頁(yè) &gt; <em>頁(yè)面</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>

有了頁(yè)面模板之后，就可以在一個(gè)主頁(yè)面視圖上引用上面的layout，并替換它的提示欄prompt和主要內(nèi)容顯示區(qū)域content，其他頁(yè)眉、頁(yè)腳和導(dǎo)航欄卻保持同樣的內(nèi)容，如代碼清單3-14所示。這樣就可以設(shè)計(jì)出一個(gè)使用共用模板的具有統(tǒng)一風(fēng)格特征的界面。
代碼清單3-14　使用layout模板的視圖設(shè)計(jì)

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

當(dāng)前位置：首頁(yè) > 電影管理

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。