SpringBoot2.x系列教程(三十)SpringBoot集成Thymeleaf

前面章節我們介紹了SpringBoot集成jsp和Freemarker以及它們的具體應用。而在這些前端模板引擎中,SpringBoot首推使用Thymeleaf。這是因爲Thymeleaf對SpringMVC提供了完美的支持。

Thymeleaf簡介

Thymeleaf同樣是一個Java類庫,能夠處理HTML/HTML5、XML、JavaScript、CSS,甚⾄純⽂本。通常可以用作MVC中的View層,它可以完全替代JSP。

Thymeleaf的特性

  • Thymeleaf不僅可以作爲模板存在,同時也支持HTML原型。通過在HTML標籤裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋HTML時會忽略未定義的標籤屬性,所以可直接通過瀏覽器打開;當有數據返回到頁面時,Thymeleaf標籤會動態地替換掉靜態內容,使頁面動態顯示。
  • Thymeleaf開箱即用的特性。它支持標準方言和Spring方言,可以直接套用模板實現JSTL、OGNL表達式效果,避免重複套模板、改JSTL、改標籤的困擾。同時開發人員也可以擴展和創建自定義的方言。
  • Thymeleaf提供Spring標準方言和一個與SpringMVC完美集成的可選模塊,可以快速地實現表單綁定、屬性編輯器、國際化等功能。

與其他模板引擎相比,Thymeleaf不會破壞文檔結構。對比Freemarker可以看出效果:

FreeMarker: <p>${message}</p>
Thymeleaf: <p th:text="${message}">Hello World!</p>

注意,由於Thymeleaf使用了XML DOM解析器,因此它並不適合於處理大規模的XML文件。

實例演示

SpringBoot中創建項目並集成Thymeleaf。創建過程中勾選對應集成框架。

Thymeleaf

項目創建之後,pom中對應的核心依賴如下:

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

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
</dependency>

實體類Student:

@Data
public class Student {
	private String idNo;
	private String name;
}

Controller對應實現:

@Controller
public class StudentController {

	@GetMapping("/")
	public String getStudents(Model model){

		List<Student> list = new ArrayList<>();

		Student s1 = new Student();
		s1.setIdNo("N01");
		s1.setName("Tom");
		list.add(s1);

		Student s2 = new Student();
		s2.setIdNo("N02");
		s2.setName("David");
		list.add(s2);

		model.addAttribute("students",list);
		model.addAttribute("hello","Hello Thymeleaf!");

		return "student";
	}
}

在Controller中實現了兩個參數的返回一個爲字符串,一個爲Student的列表。

對應templates下的頁面爲student.html。Thymeleaf默認使用html作爲後綴。

student.html頁面展示信息如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Hello Thymeleaf</title>
</head>
<body>
<h1 th:text="${hello}">Hello World</h1>

<div th:each="student : ${students}">
    <p th:text="${student.name} + ':' + ${student.idNo}"></p>
</div>

</body>
</html>

其中第一個爲直接展示字符串,第二個爲遍歷列表並展示其中的屬性值。

訪問對應請求http://localhost:8080/,即可返內容展示。

Thymeleaf

注意事項

如果是在開發環境中,最好在application.properties中添加配置:

spring.thymeleaf.cache=false

關閉Thymeleaf的緩存(默認爲true),避免因緩存導致修改需重啓才能生效,生產環境可採用默認值。

使用Thymeleaf的頁面必須在HTML標籤中作如下聲明,表示使用Thymeleaf語法:

<html xmlns:th="http://www.thymeleaf.org">

SpringBoot中相關配置

SpringBoot中提供了大量關於Thymeleaf的配置項目:

# 開啓模板緩存(默認值:true)
spring.thymeleaf.cache=true 
# 檢查模板是否存在
spring.thymeleaf.check-template=true 
# 檢查模板位置是否正確(默認值:true)
spring.thymeleaf.check-template-location=true
# Content-Type的值(默認值:text/html)
spring.thymeleaf.content-type=text/html
# 開啓MVC Thymeleaf視圖解析(默認值:true)
spring.thymeleaf.enabled=true
# 模板編碼
spring.thymeleaf.encoding=UTF-8
# 排除視圖名稱列表,用逗號分隔
spring.thymeleaf.excluded-view-names=
# 模板模式,設置爲HTML5會嚴格校驗,不符合規則將報錯
spring.thymeleaf.mode=HTML5
# 視圖名稱前綴(默認值:classpath:/templates/)
spring.thymeleaf.prefix=classpath:/templates/
# 視圖名稱後綴(默認值:.html)
spring.thymeleaf.suffix=.html
# 可解析的視圖名稱列表,用逗號分隔
spring.thymeleaf.view-names=

關於SpringBoot集成Thymeleaf的操作已經完成,非常簡單。

發佈了542 篇原創文章 · 獲贊 5103 · 訪問量 335萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章