接下來(lái)，我們就來(lái)具體講講在Spring Boot應(yīng)用中，如何使用Thymeleaf模板引擎開(kāi)發(fā)Web頁(yè)面類(lèi)的應(yīng)用。
#靜態(tài)資源訪問(wèn)
在我們開(kāi)發(fā)Web應(yīng)用的時(shí)候，需要引用大量的js、css、圖片等靜態(tài)資源。Spring Boot默認(rèn)提供靜態(tài)資源目錄位置需置于classpath下，目錄名需符合如下規(guī)則：
- /static
- /public
- /resources
- /META-INF/resources
舉例：我們可以在src/main/resources/目錄下創(chuàng)建static，在該位置放置一個(gè)圖片文件。啟動(dòng)程序后，嘗試訪問(wèn)http://localhost:8080/D.jpg。如能顯示圖片，配置成功。
#渲染W(wǎng)eb頁(yè)面
在之前的示例中，我們都是通過(guò)@RestController來(lái)處理請(qǐng)求，所以返回的內(nèi)容為json對(duì)象。那么如果需要渲染html頁(yè)面的時(shí)候，要如何實(shí)現(xiàn)呢？
#模板引擎
在動(dòng)態(tài)HTML實(shí)現(xiàn)上Spring Boot依然可以完美勝任，并且提供了多種模板引擎的默認(rèn)配置支持，所以在推薦的模板引擎下，我們可以很快的上手開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站。
Spring Boot提供了自動(dòng)化配置模塊的模板引擎主要有以下幾種：
- Thymeleaf
- FreeMarker
- Groovy
當(dāng)你使用上述模板引擎中的任何一個(gè)，它們默認(rèn)的模板配置路徑為：src/main/resources/templates。當(dāng)然也可以修改這個(gè)路徑，具體如何修改，可在后續(xù)各模板引擎的配置屬性中查詢(xún)并修改。
補(bǔ)充：Spring Boot從一開(kāi)始就建議使用模板引擎，避免使用JSP。同時(shí)，隨著Spring Boot版本的迭代，逐步的淘汰了一些較為古老的模板引擎。
#Thymeleaf
Thymeleaf是本文我們將具體介紹使用的模板引擎。它是一個(gè)XML/XHTML/HTML5模板引擎，可用于Web與非Web環(huán)境中的應(yīng)用開(kāi)發(fā)。它是一個(gè)開(kāi)源的Java庫(kù)，基于Apache License 2.0許可，由Daniel Fernández創(chuàng)建，該作者還是Java加密庫(kù)Jasypt的作者。
Thymeleaf提供了一個(gè)用于整合Spring MVC的可選模塊，在應(yīng)用開(kāi)發(fā)中，你可以使用Thymeleaf來(lái)完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目標(biāo)在于提供一種可被瀏覽器正確顯示的、格式良好的模板創(chuàng)建方式，因此也可以用作靜態(tài)建模。你可以使用它創(chuàng)建經(jīng)過(guò)驗(yàn)證的XML與HTML模板。相對(duì)于編寫(xiě)邏輯或代碼，開(kāi)發(fā)者只需將標(biāo)簽屬性添加到模板中即可。接下來(lái)，這些標(biāo)簽屬性就會(huì)在DOM（文檔對(duì)象模型）上執(zhí)行預(yù)先制定好的邏輯。
示例模板：
<table>
<thead>
<tr>
<th th:text="#{msgs.headers.name}">Name</td>
<th th:text="#{msgs.headers.price}">Price</td>
</tr>
</thead>
<tbody>
<tr th:each="prod : ${allProducts}">
<td th:text="${prod.name}">Oranges</td>
<td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
</tr>
</tbody>
</table>
可以看到Thymeleaf主要以屬性的方式加入到html標(biāo)簽中，瀏覽器在解析html時(shí)，當(dāng)檢查到?jīng)]有的屬性時(shí)候會(huì)忽略，所以Thymeleaf的模板可以通過(guò)瀏覽器直接打開(kāi)展現(xiàn)，這樣非常有利于前后端的分離。
#動(dòng)手試一下
第一步：新建一個(gè)Spring Boot應(yīng)用，在pom.xml中加入所需的模板引擎模塊，比如使用thymeleaf的話，只需要引入下面依賴(lài)：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
第二步：創(chuàng)建一個(gè)Spring MVC的傳統(tǒng)Controller，用來(lái)處理根路徑的請(qǐng)求，將解決渲染到index頁(yè)面上，具體實(shí)現(xiàn)如下
@Controller
public class HelloController {
@GetMapping("/")
public String index(ModelMap map) {
map.addAttribute("host", "https://blog.didispace.com");
return "index";
}
}
簡(jiǎn)要說(shuō)明：
- 在渲染到index頁(yè)面的時(shí)候，通過(guò)ModelMap，往頁(yè)面中增加一個(gè)
host參數(shù)，其值為https://blog.didispace.com return的值index代表了要使用的模板頁(yè)面名稱(chēng)，默認(rèn)情況下，它將對(duì)應(yīng)到src/main/resources/templates/目錄下的index.html模板頁(yè)面
第三步：根據(jù)上一步要映射的模板，去模板路徑src/main/resources/templates下新建模板文件index.html，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1 th:text="${host}">Hello World</h1>
</body>
</html>在該頁(yè)面的body中，包含了一個(gè)帶有Thymeleaf屬性的h1標(biāo)簽，該便簽內(nèi)容將綁定host參數(shù)的值。
由于Thymeleaf通過(guò)屬性綁定的特性。該模板頁(yè)面同其他模板引擎不同，直接通過(guò)瀏覽器打開(kāi)html頁(yè)面，它是可以正常運(yùn)作的，將會(huì)直接展現(xiàn)Hello World標(biāo)題。這有利于開(kāi)發(fā)頁(yè)面的時(shí)候可以在非啟動(dòng)環(huán)境下驗(yàn)證應(yīng)前端樣式的正確性。
如果啟動(dòng)程序后，訪問(wèn)http://localhost:8080/，上面頁(yè)面就會(huì)展示Controller中host的值：https://blog.didispace.com，做到了不破壞HTML自身內(nèi)容的數(shù)據(jù)邏輯分離。
更多Thymeleaf的頁(yè)面語(yǔ)法，可以訪問(wèn)Thymeleaf的官方文檔來(lái)深入學(xué)習(xí)使用。
#Thymeleaf的配置參數(shù)
如有需要修改默認(rèn)配置的時(shí)候，只需復(fù)制下面要修改的屬性到application.properties中，并修改成需要的值：
# Enable template caching.
spring.thymeleaf.cache=true
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true
# Content-Type value.
spring.thymeleaf.content-type=text/html
# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true
# Template encoding.
spring.thymeleaf.encoding=UTF-8
# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names=
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML5
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.
舉幾個(gè)我們常用的配置內(nèi)容：
Q：不想每次修改頁(yè)面都重啟
A：修改spring.thymeleaf.cache參數(shù)，設(shè)置為false
Q：不想使用template目錄存放模板文件
A：修改spring.thymeleaf.prefix參數(shù)，設(shè)置為你想放置模板文件的目錄
Q：不想使用index作為模板文件的擴(kuò)展名
A：修改spring.thymeleaf.suffix參數(shù)，設(shè)置為你想用的擴(kuò)展名
Q：HTML5的嚴(yán)格校驗(yàn)很煩人
A：修改spring.thymeleaf.mode參數(shù)，設(shè)置為LEGACYHTML5
更多本系列免費(fèi)教程連載「點(diǎn)擊進(jìn)入?yún)R總目錄」
#代碼示例
本文的相關(guān)例子可以查看下面?zhèn)}庫(kù)中的chapter4-1目錄：
