通過http://blog.didispace.com/spring-boot-learning-2x/的前幾章內容（API開發、數據訪問）。我們已經具備完成一個涵蓋數據存儲、提供HTTP接口的完整後端服務了。依託這些技能，我們已經可以配合前端開發人員，一起來完成一些前後端分離的Web項目，或是一些小程序、或者是App之類的應用開發。
對於Web項目來說，前後端分離模式是目前最為流行的，主要得益於前端框架的完善以及前後端分離方案的日漸成熟。這樣的實現模式幫助Web類產品的開發團隊更好的拆分任務，以及讓開發人員更加聚焦在某一端的開發技術之上。所以，在本教程中，優先介紹瞭如何開發API，而不是開發Web頁面。但是，傳統模式的Web頁面在一個項目中就可以管理，如果開發人員技能本身就可覆蓋全棧，那直接採用傳統模板引擎方式開發，也是個不錯的選擇。尤其對於一些老團隊，對模板引擎非常熟悉，可以減少非常多的學習成本，直接上手Spring Boot來開發Web應用。
接下來，我們就來具體講講在Spring Boot應用中，如何使用Thymeleaf模板引擎開發Web頁面類的應用。
靜態資源訪問
在我們開發Web應用的時候，需要引用大量的js、css、圖片等靜態資源。Spring Boot默認提供靜態資源目錄位置需置於classpath下，目錄名需符合如下規則：
- /static
- /public
- /resources
- /META-INF/resources
舉例：我們可以在src/main/resources/目錄下創建static，在該位置放置一個圖片文件。啟動程序後，嘗試訪問http://localhost:8080/D.jpg。如能顯示圖片，配置成功。
渲染Web頁面
在之前的示例中，我們都是通過@RestController來處理請求，所以返回的內容為json對象。那麼如果需要渲染html頁面的時候，要如何實現呢？
模板引擎
在動態HTML實現上Spring Boot依然可以完美勝任，並且提供了多種模板引擎的默認配置支持，所以在推薦的模板引擎下，我們可以很快的上手開發動態網站。
Spring Boot提供了自動化配置模塊的模板引擎主要有以下幾種：
- Thymeleaf
- FreeMarker
- Groovy
當你使用上述模板引擎中的任何一個，它們默認的模板配置路徑為：src/main/resources/templates。當然也可以修改這個路徑，具體如何修改，可在後續各模板引擎的配置屬性中查詢並修改。
補充：Spring Boot從一開始就建議使用模板引擎，避免使用JSP。同時，隨著Spring Boot版本的迭代，逐步的淘汰了一些較為古老的模板引擎。
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（文檔對象模型）上執行預先制定好的邏輯。
示例模板：
<code><table> <thead>/<thead> <tbody> Name Price /<tbody>/<table>/<code> Oranges 0.99
可以看到Thymeleaf主要以屬性的方式加入到html標籤中，瀏覽器在解析html時，當檢查到沒有的屬性時候會忽略，所以Thymeleaf的模板可以通過瀏覽器直接打開展現，這樣非常有利於前後端的分離。
動手試一下
第一步：新建一個Spring Boot應用，在pom.xml中加入所需的模板引擎模塊，比如使用thymeleaf的話，只需要引入下面依賴：
<code><dependency> <groupid>org.springframework.boot/<groupid> <artifactid>spring-boot-starter-thymeleaf/<artifactid>/<dependency>/<code>
第二步：創建一個Spring MVC的傳統Controller，用來處理根路徑的請求，將解決渲染到index頁面上，具體實現如下
<code>@Controllerpublic class HelloController { @GetMapping("/") public String index(ModelMap map) { map.addAttribute("host", "http://blog.didispace.com"); return "index"; }}/<code>簡要說明：
- 在渲染到index頁面的時候，通過ModelMap，往頁面中增加一個host參數，其值為http://blog.didispace.com
- return的值index代表了要使用的模板頁面名稱，默認情況下，它將對應到src/main/resources/templates/目錄下的index.html模板頁面
第三步：根據上一步要映射的模板，去模板路徑src/main/resources/templates下新建模板文件index.html，內容如下：
<code> <title>Hello World
/<code>
在該頁面的body中，包含了一個帶有Thymeleaf屬性的h1標籤，該便籤內容將綁定host參數的值。
由於Thymeleaf通過屬性綁定的特性。該模板頁面同其他模板引擎不同，直接通過瀏覽器打開html頁面，它是可以正常運作的，將會直接展現Hello World標題。這有利於開發頁面的時候可以在非啟動環境下驗證應前端樣式的正確性。
如果啟動程序後，訪問http://localhost:8080/，上面頁面就會展示Controller中host的值：http://blog.didispace.com，做到了不破壞HTML自身內容的數據邏輯分離。
更多Thymeleaf的頁面語法，可以訪問Thymeleaf的官方文檔來深入學習使用。
Thymeleaf的配置參數
如有需要修改默認配置的時候，只需複製下面要修改的屬性到application.properties中，並修改成需要的值：
<code># 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./<code>
舉幾個我們常用的配置內容：
Q：不想每次修改頁面都重啟
A：修改spring.thymeleaf.cache參數，設置為false
Q：不想使用template目錄存放模板文件
A：修改spring.thymeleaf.prefix參數，設置為你想放置模板文件的目錄
Q：不想使用index作為模板文件的擴展名
A：修改spring.thymeleaf.suffix參數，設置為你想用的擴展名
Q：HTML5的嚴格校驗很煩人
A：修改spring.thymeleaf.mode參數，設置為LEGACYHTML5
更多本系列免費教程連載http://blog.didispace.com/spring-boot-learning-2x/
代碼示例
本文的相關例子可以查看下面倉庫中的chapter4-1目錄：
- Github：https://github.com/dyc87112/SpringBoot-Learning/tree/master/2.1.x
- Gitee：https://gitee.com/didispace/SpringBoot-Learning/tree/master/2.1.x
如果您覺得本文不錯，歡迎Star支持，您的關注是我堅持的動力！
閱讀更多 碼農看看 的文章
