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

時間  2020-01-12
標籤 spring boot2 boot 系列 教程 整合 thymeleaf 欄目 Spring 简体版
原文   原文鏈接

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

<!--more-->html

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

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

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

Thymeleaf 簡介

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

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

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

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

整合

  • 建立項目

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;
        //...
}
  1. 首先經過 @ConfigurationProperties 註解，將 application.properties 前綴爲 spring.thymeleaf 的配置和這個類中的屬性綁定。
  2. 前三個 static 變量定義了默認的編碼格式、視圖解析器的前綴、後綴等。
  3. 從前三行配置中，能夠看出來，Thymeleaf 模板的默認位置在 resources/templates 目錄下，默認的後綴是 html 。
  4. 這些配置，若是開發者不本身提供，則使用 默認的，若是本身提供，則在 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);
    //省略郵件發送
}
  1. 渲染時，咱們須要首先注入一個 TemplateEngine 對象，這個對象就是在 Thymeleaf 的自動化配置類中配置的（即當咱們引入 Thymeleaf 的依賴以後，這個實例就有了）。
  2. 而後構造一個 Context 對象用來存放變量。
  3. 調用 process 方法進行渲染，該方法的返回值就是渲染後的 HTML 字符串，而後咱們將這個字符串發送出去。

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

總結

本文主要向你們簡單介紹了 Spring Boot 和 Thymeleaf 整合時的幾個問題，仍是比較簡單的，你們能夠閱讀 Thymeleaf 官方文檔學習 Thymeleaf 的更多用法。本文案例我已上傳到 GitHub :https://github.com/lenve/javaboy-code-samples

關於本文，有問題歡迎留言討論。

關注公衆號【江南一點雨】，專一於 Spring Boot+微服務以及先後端分離等全棧技術，按期視頻教程分享，關注後回覆 Java ，領取鬆哥爲你精心準備的 Java 乾貨！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程