前面章節我們介紹了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。創建過程中勾選對應集成框架。
項目創建之後,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/,即可返內容展示。
注意事項
如果是在開發環境中,最好在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的操作已經完成,非常簡單。