一起來學SpringBoot | 第四篇：整合Thymeleaf模板

SpringBoot 是爲了簡化 Spring 應用的創建、運行、調試、部署等一系列問題而誕生的產物，自動裝配的特性讓我們可以更好的關注業務本身而不是外部的XML配置，我們只需遵循規範，引入相關的依賴就可以輕易的搭建出一個 WEB 工程

在前面幾章中已經介紹瞭如何創建一個SpringBoot 項目，同時簡單的描述了SpringBoot REST Web服務。除此之外它也是支持如JSP、Thymeleaf、FreeMarker、Mustache、Velocity 等各種模板引擎，同時還爲開發者提供了自定義模板擴展的支持。

使用嵌入式Servlet容器時，請避免使用JSP，因爲使用JSP打包後會存在一些限制。

在SpringBoot使用上述模板，默認從 src/main/resources/templates下加載。

thymeleaf介紹

Thymeleaf是現代化服務器端的Java模板引擎，不同與其它幾種模板的是Thymeleaf的語法更加接近HTML，並且具有很高的擴展性。詳細資料可以瀏覽官網。

特點

支持無網絡環境下運行，由於它支持 html 原型，然後在 html 標籤裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。所以它可以讓前端小姐姐在瀏覽器中查看頁面的靜態效果，又可以讓程序員小哥哥在服務端查看帶數據的動態頁面效果。
開箱即用，爲Spring提供方言，可直接套用模板實現JSTL、 OGNL表達式效果，避免每天因套用模板而修改JSTL、 OGNL標籤的困擾。同時開發人員可以擴展自定義的方言。
SpringBoot官方推薦模板，提供了可選集成模塊(spring-boot-starter-thymeleaf)，可以快速的實現表單綁定、屬性編輯器、國際化等功能。

使用

首先要在 pom.xml 中添加對 thymeleaf 模板依賴

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

然後創建一個 ThymeleafController 用來映射HTTP請求與頁面的跳轉，下面寫了兩種方式，第一種比較直觀和優雅，第二種相對普遍且代碼較少，且迎合從struts2跳坑的朋友們…

Spring4.3以後爲簡化@RequestMapping(method = RequestMethod.XXX)的寫法，故而將其做了一層包裝，也就是現在的GetMapping、PostMapping、PutMapping、DeleteMapping、PatchMapping

package com.battcn.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;

/**
 * @author Levin
 * @since 2018/4/23 0023
 */
@Controller
@RequestMapping
public class ThymeleafController {

    @GetMapping("/index")
    public ModelAndView index() {
        ModelAndView view = new ModelAndView();
        // 設置跳轉的視圖 默認映射到 src/main/resources/templates/{viewName}.html
        view.setViewName("index");
        // 設置屬性
        view.addObject("title", "我的第一個WEB頁面");
        view.addObject("desc", "歡迎進入battcn-web 系統");
        Author author = new Author();
        author.setAge(22);
        author.setEmail("[email protected]");
        author.setName("唐亞峯");
        view.addObject("author", author);
        return view;
    }

    @GetMapping("/index1")
    public String index1(HttpServletRequest request) {
        // TODO 與上面的寫法不同，但是結果一致。
        // 設置屬性
        request.setAttribute("title", "我的第一個WEB頁面");
        request.setAttribute("desc", "歡迎進入battcn-web 系統");
        Author author = new Author();
        author.setAge(22);
        author.setEmail("[email protected]");
        author.setName("唐亞峯");
        request.setAttribute("author", author);
        // 返回的 index 默認映射到 src/main/resources/templates/xxxx.html
        return "index";
    }

    class Author {
        private int age;
        private String name;
        private String email;
        // 省略 get set
    }
}

最後在 src/main/resources/templates 目錄下創建一個名 index.html 的模板文件，可以看到 thymeleaf 是通過在標籤中添加額外屬性動態綁定數據的

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 可以看到 thymeleaf 是通過在標籤裏添加額外屬性來綁定動態數據的 -->
    <title th:text="${title}">Title</title>
    <!-- 在/resources/static/js目錄下創建一個hello.js 用如下語法依賴即可-->
    <script type="text/javascript" th:src="@{/js/hello.js}"></script>
</head>
<body>
    <h1 th:text="${desc}">Hello World</h1>
    <h2>=====作者信息=====</h2>
        <p th:text="${author?.name}"></p>
        <p th:text="${author?.age}"></p>
        <p th:text="${author?.email}"></p>
</body>
</html>

靜態效果

雙擊打開 index.html 既可以看到如下的靜態效果，並未和其它模板一樣顯示一堆標籤的內容，而是正常渲染靜態頁面

動態效果

在瀏覽器輸入：http://localhost:8080/index 可以看到渲染後的效果，真正意義上的動靜分離了

小技巧

模板熱部署

在 IntelliJ IDEA 中使用 thymeleaf 模板的時候，發現每次修改靜態頁面都需要重啓才生效，這點是很不友好的，百度了下發現原來是默認配置搞的鬼，爲了提高響應速度，默認情況下會緩存模板。如果是在開發中請將spring.thymeleaf.cache 屬性設置成 false。在每次修改靜態內容時按Ctrl+Shift+F9即可重新加載了…