極簡 Spring Boot 整合 Thymeleaf 頁面模板

雖然現在慢慢在流行前后端分離開發,但是據松哥所了解到的,還是有一些公司在做前后端不分的開發,而在前后端不分的開發中,我們就會需要后端頁面模板(實際上,即使前后端分離,也會在一些場景下需要使用頁面模板,例如郵件發送模板)。

<!–more–>

早期的 Spring Boot 中還支持使用 Velocity 作為頁面模板,現在的 Spring Boot 中已經不支持 Velocity 了,頁面模板主要支持 Thymeleaf 和 Freemarker ,當然,作為 Java 最最基本的頁面模板 Jsp ,Spring Boot 也是支持的,只是使用比較麻煩。

松哥打算用三篇文章分別向大家介紹一下這三種頁面模板技術。

今天我們主要來看看 Thymeleaf 在 Spring Boot 中的整合!

Thymeleaf 簡介

Thymeleaf 是新一代 Java 模板引擎,它類似于 Velocity、FreeMarker 等傳統 Java 模板引擎,但是與傳統 Java 模板引擎不同的是,Thymeleaf 支持 HTML 原型。

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

事實上, Thymeleaf 除了展示基本的 HTML ,進行頁面渲染之外,也可以作為一個 HTML 片段進行渲染,例如我們在做郵件發送時,可以使用 Thymeleaf 作為郵件發送模板。

另外,由于 Thymeleaf 模板后綴為 .html ,可以直接被瀏覽器打開,因此,預覽時非常方便。

整合

  • 創建項目

Spring Boot 中整合 Thymeleaf 非常容易,只需要創建項目時添加 Thymeleaf 即可:

極簡 Spring Boot 整合 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 注解表示當當前系統中存在 TemplateModeSpringTemplateEngine 類時,當前的自動化配置類才會生效,即只要項目中引入了 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.htmlThymeleaf 模板文件。

  • 創建 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 接口,就能看到集合中的數據了:

極簡 Spring Boot 整合 Thymeleaf 頁面模板

另外, 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 ,歡迎大家 star : https://github.com/lenve/javaboy-code-samples

關于本文,有問題歡迎留言討論。

關注公眾號牧碼小子,專注于 Spring Boot+微服務以及前后端分離等全棧技術,定期視頻教程分享,關注后回復 Java ,領取松哥為你精心準備的 Java 干貨!

極簡 Spring Boot 整合 Thymeleaf 頁面模板

原文 

https://segmentfault.com/a/1190000019466473

本站部分文章源于互聯網,本著傳播知識、有益學習和研究的目的進行的轉載,為網友免費提供。如有著作權人或出版方提出異議,本站將立即刪除。如果您對文章轉載有任何疑問請告之我們,以便我們及時糾正。

PS:推薦一個微信公眾號: askHarries 或者qq群:474807195,里面會分享一些資深架構師錄制的視頻錄像:有Spring,MyBatis,Netty源碼分析,高并發、高性能、分布式、微服務架構的原理,JVM性能優化這些成為架構師必備的知識體系。還能領取免費的學習資源,目前受益良多

轉載請注明原文出處:Harries Blog? » 極簡 Spring Boot 整合 Thymeleaf 頁面模板

贊 (0)
分享到:更多 ()

評論 0

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
2013平特肖公式