通過 本系列教程
的前幾章内容（API開發、資料通路）。我們已經具備完成一個涵蓋資料存儲、提供HTTP接口的完整後端服務了。依托這些技能，我們已經可以配合前端開發人員，一起來完成一些前後端分離的Web項目，或是一些小程式、或者是App之類的應用開發。
對于Web項目來說，前後端分離模式是目前最為流行的，主要得益于前端架構的完善以及前後端分離方案的日漸成熟。這樣的實作模式幫助Web類産品的開發團隊更好的拆分任務，以及讓開發人員更加聚焦在某一端的開發技術之上。是以，在本教程中，優先介紹了如何開發API，而不是開發Web頁面。但是，傳統模式的Web頁面在一個項目中就可以管理，如果開發人員技能本身就可覆寫全棧，那直接采用傳統模闆引擎方式開發，也是個不錯的選擇。尤其對于一些老團隊，對模闆引擎非常熟悉，可以減少非常多的學習成本，直接上手Spring Boot來開發Web應用。
接下來，我們就來具體講講在Spring Boot應用中，如何使用Thymeleaf模闆引擎開發Web頁面類的應用。
https://blog.didispace.com/spring-boot-learning-21-4-1/#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E8%AE%BF%E9%97%AE 靜态資源通路
在我們開發Web應用的時候，需要引用大量的js、css、圖檔等靜态資源。Spring Boot預設提供靜态資源目錄位置需置于classpath下，目錄名需符合如下規則：
- /static
- /public
- /resources
- /META-INF/resources
舉例：我們可以在
src/main/resources/
目錄下建立
static
，在該位置放置一個圖檔檔案。啟動程式後，嘗試通路
http://localhost:8080/D.jpg
。如能顯示圖檔，配置成功。
https://blog.didispace.com/spring-boot-learning-21-4-1/#%E6%B8%B2%E6%9F%93Web%E9%A1%B5%E9%9D%A2 渲染Web頁面
在之前的示例中，我們都是通過
@RestController
來處理請求，是以傳回的内容為json對象。那麼如果需要渲染html頁面的時候，要如何實作呢？
https://blog.didispace.com/spring-boot-learning-21-4-1/#%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E 模闆引擎
在動态HTML實作上Spring Boot依然可以完美勝任，并且提供了多種模闆引擎的預設配置支援，是以在推薦的模闆引擎下，我們可以很快的上手開發動态網站。
Spring Boot提供了自動化配置子產品的模闆引擎主要有以下幾種：
- Thymeleaf
- FreeMarker
- Groovy
當你使用上述模闆引擎中的任何一個，它們預設的模闆配置路徑為：
src/main/resources/templates
。當然也可以修改這個路徑，具體如何修改，可在後續各模闆引擎的配置屬性中查詢并修改。
補充：Spring Boot從一開始就建議使用模闆引擎，避免使用JSP。同時，随着Spring Boot版本的疊代，逐漸的淘汰了一些較為古老的模闆引擎。
https://blog.didispace.com/spring-boot-learning-21-4-1/#Thymeleaf
Thymeleaf是本文我們将具體介紹使用的模闆引擎。它是一個XML/XHTML/HTML5模闆引擎，可用于Web與非Web環境中的應用開發。它是一個開源的Java庫，基于Apache License 2.0許可，由Daniel Fernández建立，該作者還是Java加密庫Jasypt的作者。
Thymeleaf提供了一個用于整合Spring MVC的可選子產品，在應用開發中，你可以使用Thymeleaf來完全代替JSP或其他模闆引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一種可被浏覽器正确顯示的、格式良好的模闆建立方式，是以也可以用作靜态模組化。你可以使用它建立經過驗證的XML與HTML模闆。相對于編寫邏輯或代碼，開發者隻需将标簽屬性添加到模闆中即可。接下來，這些标簽屬性就會在DOM（文檔對象模型）上執行預先制定好的邏輯。
示例模闆：
<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标簽中，浏覽器在解析html時，當檢查到沒有的屬性時候會忽略，是以Thymeleaf的模闆可以通過浏覽器直接打開展現，這樣非常有利于前後端的分離。
https://blog.didispace.com/spring-boot-learning-21-4-1/#%E5%8A%A8%E6%89%8B%E8%AF%95%E4%B8%80%E4%B8%8B 動手試一下
第一步：建立一個Spring Boot應用，在
pom.xml
中加入所需的模闆引擎子產品，比如使用
thymeleaf
的話，隻需要引入下面依賴：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency> 第二步：建立一個Spring MVC的傳統Controller，用來處理根路徑的請求，将解決渲染到index頁面上，具體實作如下
@Controller
public class HelloController {
@GetMapping("/")
public String index(ModelMap map) {
map.addAttribute("host", "http://blog.didispace.com");
return "index";
}
} 簡要說明：
- 在渲染到index頁面的時候，通過ModelMap，往頁面中增加一個
host
http://blog.didispace.com
-
return
src/main/resources/templates/
index.html
第三步：根據上一步要映射的模闆，去模闆路徑
src/main/resources/templates
下建立模闆檔案
index.html
，内容如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1 th:text="${host}">Hello World</h1>
</body>
</html> 在該頁面的body中，包含了一個帶有Thymeleaf屬性的h1标簽，該便簽内容将綁定
host
參數的值。
由于Thymeleaf通過屬性綁定的特性。該模闆頁面同其他模闆引擎不同，直接通過浏覽器打開html頁面，它是可以正常運作的，将會直接展現Hello World标題。這有利于開發頁面的時候可以在非啟動環境下驗證應前端樣式的正确性。
如果啟動程式後，通路
http://localhost:8080/
，上面頁面就會展示Controller中host的值：
http://blog.didispace.com
，做到了不破壞HTML自身内容的資料邏輯分離。
更多Thymeleaf的頁面文法，可以通路Thymeleaf的官方文檔來深入學習使用。
https://blog.didispace.com/spring-boot-learning-21-4-1/#Thymeleaf%E7%9A%84%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0 Thymeleaf的配置參數
如有需要修改預設配置的時候，隻需複制下面要修改的屬性到
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.
舉幾個我們常用的配置内容：
Q：不想每次修改頁面都重新開機
A：修改
spring.thymeleaf.cache
參數，設定為
false
Q：不想使用template目錄存放模闆檔案
spring.thymeleaf.prefix
參數，設定為你想放置模闆檔案的目錄
Q：不想使用index作為模闆檔案的擴充名
spring.thymeleaf.suffix
參數，設定為你想用的擴充名
Q：HTML5的嚴格校驗很煩人
spring.thymeleaf.mode
LEGACYHTML5
更多本系列免費教程連載
「點選進入彙總目錄」https://blog.didispace.com/spring-boot-learning-21-4-1/#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B 代碼示例
本文的相關例子可以檢視下面倉庫中的
chapter4-1
目錄：
![GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)