SpringBoot整合Thymeleaf模板引擎

時間 2020-11-01

標籤 javascript html java git web spring 後端瀏覽器緩存 springboot 欄目 Spring 简体版

原文原文鏈接

零、本片要點

介紹Thymeleaf的概念，理解Thymeleaf的便利且強大。
介紹如何快速整合SpringBoot和Thymeleaf。
介紹自動配置原理。

1、Thymeleaf簡介

Thymeleaf是適用於Web和獨立環境的現代服務器端Java模板引擎，可以處理HTML，XML，JavaScript，CSS甚至純文本。javascript

Thymeleaf的主要目標是提供一種優雅且高度可維護的模板建立方法。拿Html爲例，它支持html原型，既可讓美工在瀏覽器查看頁面的靜態效果，也可讓開發者填充後端數據。html

2、快速啓動

須要引入thymeleaf須要的依賴，以及必要的web依賴。

<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>

SpringBoot針對Thymeleaf提供了一套優秀的自動配置方案，這一套配置類的屬性在org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties，部分源碼以下：

// 將application.properties前綴爲【spring.thymeleaf】的配置和屬性綁定
@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;
    //...

不難發現，若是開發者不配置前綴和後綴，視圖解析的默認位置會在resources/templates/目錄下，且文件後綴爲.html。SpringBoot的強大之處就是提供了咱們許多配置上的便利，好比，咱們能夠很容易地關閉Thymeleaf的緩存，在application.properties：java

spring.thymeleaf.cache=false

SpringBoot爲Thymeleaf提供的自動化配置類是：git

@Configuration(proxyBeanMethods = false)
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {
    
}

能夠看到，這個配置類首先導入了ThymeleafProperties配置類，而後經過@ConditionalOnClass註解標識這個類只有系統中存在TemplateMode和SpringTemplateEngine的時候纔會生效，其實也就是引入了Thymeleaf相關依賴就會生效。web

建立測試Controller

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(ModelMap map){
        map.addAttribute("url","/list");
        map.addAttribute("msg","點我點我");
        return "index";
    }
}
@GetMapping("/list")
public String list(Model model){
    List<User> users = new ArrayList<>();
    users.add(new User(UUID.randomUUID().toString(),"summerday",20));
    users.add(new User(UUID.randomUUID().toString(),"天喬巴夏",18));
    model.addAttribute("users",users);
    return "list";
}

因爲咱們並無修改過視圖解析的配置，咱們須要在/resources/templates/提供名爲index.html和list.html的文件。spring

編寫Thymeleaf模板

<!--index.html-->
<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>
    <body>
       <!-- thymeleaf經過th標籤加強屬性,最終經過標籤中的內容覆蓋原有標籤內容-->
       <a href="http://www.hyhwky.com" th:href="${url}"><p th:text="${msg}"></p> </a>
    </body>
</html>

<!--list.html-->
<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>list</title>
    </head>
    <body>
        <h3>for each</h3>
        <!--說明： th:each="obj,stat:${objects}" 分別表明單個實例,狀態(可省略),待遍歷對象-->
        <div th:each="user,stat:${users}">
            <input type="hidden" name="id" th:value="${user.id}"/>
            姓名：<input type="text" name="username" th:value="${user.username}"/>
            年齡：<input type="text" name="age" th:value="${user.age}"/>
            索引: <input type="text" th:value="${stat.index}">
        </div>
    </body>
</html>

list頁面渲染結果以下：後端

除此以外，Thymeleaf還支持使用js獲取Model中的變量：瀏覽器

<script th:inline="javascript">
		var msg = [[${msg}]];
		console.log(msg)
    </script>

3、源碼下載

本文主要介紹了SpringBoot整合Thymeleaf自動配置的原理，以及快速啓動demo項目須要的步驟。關於Thymeleaf自己，還有其餘許多強大的用法，能夠參照官方文檔，一一測試：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html緩存

另外，本文的樣例代碼【包括其餘基礎標籤的使用】均已上傳至Gitee：https://gitee.com/tqbx/springboot-samples-learnspringboot