Spring Boot2 系列教程(九)Spring Boot 整合 Thymeleaf

時間 2019-11-06

標籤 spring boot2 boot 系列教程整合 thymeleaf 欄目 Spring 简体版

原文原文鏈接

雖然如今慢慢在流行先後端分離開發，可是據鬆哥所瞭解到的，仍是有一些公司在作先後端不分的開發，而在先後端不分的開發中，咱們就會須要後端頁面模板（實際上，即便先後端分離，也會在一些場景下須要使用頁面模板，例如郵件發送模板）。javascript

早期的 Spring Boot 中還支持使用 Velocity 做爲頁面模板，如今的 Spring Boot 中已經不支持 Velocity 了，頁面模板主要支持 Thymeleaf 和 Freemarker ，固然，做爲 Java 最最基本的頁面模板 Jsp ，Spring Boot 也是支持的，只是使用比較麻煩。html

鬆哥打算用三篇文章分別向你們介紹一下這三種頁面模板技術。前端

今天咱們主要來看看 Thymeleaf 在 Spring Boot 中的整合！java

Thymeleaf 簡介

Thymeleaf 是新一代 Java 模板引擎，它相似於 Velocity、FreeMarker 等傳統 Java 模板引擎，可是與傳統 Java 模板引擎不一樣的是，Thymeleaf 支持 HTML 原型。git

它既可讓前端工程師在瀏覽器中直接打開查看樣式，也可讓後端工程師結合真實數據查看顯示效果，同時，SpringBoot 提供了 Thymeleaf 自動化配置解決方案，所以在 SpringBoot 中使用 Thymeleaf 很是方便。github

事實上， Thymeleaf 除了展現基本的 HTML ，進行頁面渲染以外，也能夠做爲一個 HTML 片斷進行渲染，例如咱們在作郵件發送時，可使用 Thymeleaf 做爲郵件發送模板。web

另外，因爲 Thymeleaf 模板後綴爲 .html，能夠直接被瀏覽器打開，所以，預覽時很是方便。spring

整合

建立項目

Spring Boot 中整合 Thymeleaf 很是容易，只須要建立項目時添加 Thymeleaf 便可：後端

建立完成後，pom.xml 依賴以下：瀏覽器

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
複製代碼

固然，Thymeleaf 不只僅能在 Spring Boot 中使用，也可使用在其餘地方，只不過 Spring Boot 針對 Thymeleaf 提供了一整套的自動化配置方案，這一套配置類的屬性在 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 中，部分源碼以下：

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
        private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
        public static final String DEFAULT_PREFIX = "classpath:/templates/";
        public static final String DEFAULT_SUFFIX = ".html";
        private boolean checkTemplate = true;
        private boolean checkTemplateLocation = true;
        private String prefix = DEFAULT_PREFIX;
        private String suffix = DEFAULT_SUFFIX;
        private String mode = "HTML";
        private Charset encoding = DEFAULT_ENCODING;
        private boolean cache = true;
        //...
}
複製代碼

首先經過 @ConfigurationProperties 註解，將 application.properties 前綴爲 spring.thymeleaf 的配置和這個類中的屬性綁定。
前三個 static 變量定義了默認的編碼格式、視圖解析器的前綴、後綴等。
從前三行配置中，能夠看出來，Thymeleaf 模板的默認位置在 resources/templates 目錄下，默認的後綴是 html 。
這些配置，若是開發者不本身提供，則使用默認的，若是本身提供，則在 application.properties 中以 spring.thymeleaf 開始相關的配置。

而咱們剛剛提到的，Spring Boot 爲 Thymeleaf 提供的自動化配置類，則是 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration ，部分源碼以下：

@Configuration
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {
}
複製代碼

能夠看到，在這個自動化配置類中，首先導入 ThymeleafProperties ，而後 @ConditionalOnClass 註解表示噹噹前系統中存在 TemplateMode 和 SpringTemplateEngine 類時，當前的自動化配置類纔會生效，即只要項目中引入了 Thymeleaf 相關的依賴，這個配置就會生效。

這些默認的配置咱們幾乎不須要作任何更改就能夠直接使用了。若是開發者有特殊需求，則能夠在 application.properties 中配置以 spring.thymeleaf 開頭的屬性便可。

建立 Controller

接下來咱們就能夠建立 Controller 了，實際上引入 Thymeleaf 依賴以後，咱們能夠不作任何配置。新建的 IndexController 以下：

@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model) {
        List<User> users = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            User u = new User();
            u.setId((long) i);
            u.setName("javaboy:" + i);
            u.setAddress("深圳:" + i);
            users.add(u);
        }
        model.addAttribute("users", users);
        return "index";
    }
}
public class User {
    private Long id;
    private String name;
    private String address;
    //省略 getter/setter
}
複製代碼

在 IndexController 中返回邏輯視圖名+數據，邏輯視圖名爲 index ，意思咱們須要在 resources/templates 目錄下提供一個名爲 index.html 的 Thymeleaf 模板文件。

建立 Thymeleaf

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>編號</td>
        <td>用戶名</td>
        <td>地址</td>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>
</body>
</html>
複製代碼

在 Thymeleaf 中，經過 th:each 指令來遍歷一個集合，數據的展現經過 th:text 指令來實現，

注意 index.html 最上面要引入 thymeleaf 名稱空間。

配置完成後，就能夠啓動項目了，訪問 /index 接口，就能看到集合中的數據了：

另外，Thymeleaf 支持在 js 中直接獲取 Model 中的變量。例如，在 IndexController 中有一個變量 username ：

@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model) {
        model.addAttribute("username", "李四");
        return "index";
    }
}
複製代碼

在頁面模板中，能夠直接在 js 中獲取到這個變量：

<script th:inline="javascript">
    var username = [[${username}]];
    console.log(username)
</script>
複製代碼

這個功能算是 Thymeleaf 的特點之一吧。

手動渲染

前面咱們說的是返回一個 Thymeleaf 模板，咱們也能夠手動渲染 Thymeleaf 模板，這個通常在郵件發送時候有用，例如我在 resources/templates 目錄下新建一個郵件模板，以下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello 歡迎 <span th:text="${username}"></span>加入 XXX 集團，您的入職信息以下：</p>
<table border="1">
    <tr>
        <td>職位</td>
        <td th:text="${position}"></td>
    </tr>
    <tr>
        <td>薪水</td>
        <td th:text="${salary}"></td>
    </tr>
</table>
<img src="http://www.javaboy.org/images/sb/javaboy.jpg" alt="">
</body>
</html>
複製代碼

這一個 HTML 模板中，有幾個變量，咱們要將這個 HTML 模板渲染成一個 String 字符串，再把這個字符串經過郵件發送出去，那麼如何手動渲染呢？

@Autowired
TemplateEngine templateEngine;
@Test
public void test1() throws MessagingException {
    Context context = new Context();
    context.setVariable("username", "javaboy");
    context.setVariable("position", "Java工程師");
    context.setVariable("salary", 99999);
    String mail = templateEngine.process("mail", context);
    //省略郵件發送
}
複製代碼

渲染時，咱們須要首先注入一個 TemplateEngine 對象，這個對象就是在 Thymeleaf 的自動化配置類中配置的（即當咱們引入 Thymeleaf 的依賴以後，這個實例就有了）。
而後構造一個 Context 對象用來存放變量。
調用 process 方法進行渲染，該方法的返回值就是渲染後的 HTML 字符串，而後咱們將這個字符串發送出去。

這是 Spring Boot 整合 Thymeleaf 的幾個關鍵點，關於 Thymeleaf 這個頁面模板自己更多的用法，你們能夠參考 Thymeleaf 的文檔：www.thymeleaf.org。