玩轉SpringBoot集成 Thymeleaf 模版引擎

來源：北大青鳥總部 2023年03月09日 13:21

摘要：這節主要是把SpirngBoot集成模板引擎Thymeleaf中的步驟梳理了一下，希望同學們可以有所收獲。

隨著互聯網技術的發展，在前后端分離開發模式已經逐漸成為主流今天，前后端技術的劃分也越來越清晰，社會分工進一步細化，職業崗位也更加細分，慢慢開始就有了前端攻城獅和后端攻城獅，技術也進一步細分，出現了以HTML、JS等為主的頁面技術，以Java、Python為主的后端開發語言技術。

在Javaweb開發領域有著很多很優秀的頁面技術，有靜態頁面技術，如：HTML/HTML5等，有動態頁面技術，如：jsp。這些優秀的頁面技術，使Java在web開發領域有著舉足輕重的地位。

今天咱們就來介紹一個在Java開發領域非常流行的模板引擎技術-Thymeleaf，用過SpringBoot的同學可能都知道，SpringBoot在自己體系里面默認支持的頁面技術不是JSP，而是一個叫Thymeleaf的模板引擎技術，當然它也是有一網頁技術。

為什么SpringBoot在web開發的時候不是默認支持JSP了呢，做過web開發的同學可能都知道，其實JSP本身就是Servlet，在生產環境中，SpringBoot重新編譯JSP可能會導致較大的性能損失，并且很難追查到問題根源。

所以SpringBoot官方推薦的官方推薦使用Thymeleaf，今天咱們就來一起學習一下SpringBoot集成Thymeleaf模板引擎技術做web開發。

究竟是什么樣的一個技術，竟然可以得到SpringBoot的青睞，那這個我必須要好好研究一番。

什么是模板引擎

在傳統的頁面開發過程中通常采用的HTML+ JS技術，而現在大部分網站都采用標簽化+模塊化的設計。模板引擎其實就是根據這種方式，使用戶界面與業務數據（內容）分離而產生的，它可以生成特定格式的文檔，用于網站的模板引擎就會生成一個標準的HTML文檔在原有的HTML頁面中來填充數據。最終達到渲染頁面的目的。而模板引擎技術主要分兩種：

常用的模板引擎技術：

Thymeleaf
FreeMarker
Velocity
今天咱么就來學習Thymeleaf.

什么是Thymeleaf

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

Thymeleaf的主要目標是提供一種優雅且高度可維護的模板創建方式。為此，它以自然模板的概念為基礎，以不影響模板用作設計原型的方式將其邏輯注入模板文件。這樣可以改善設計溝通，并縮小設計團隊與開發團隊之間的差距。

Thymeleaf也已經從一開始就設計了Web標準-尤其是HTML5-如果需要的話，允許您創建完全驗證的模板

在現代web開發領域，前后端分離已經成了標配，前端可以獨立部署成為服務，前后端從物理上完全進行隔離，降低程序耦合度。但是SpringBoot官方依然為我們提供了模版引擎用于一些無需前后端分離的場景。Thymeleaf是新一代的模板引擎，在Spring Boot 中，官方推薦使用Thymeleaf來做前端模版引擎。

Thymeleaf的主要特點：

Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由于它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 Thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示。
Thymeleaf 開箱即用的特性。它提供標準和 Spring 標準兩種方言，可以直接套用模板實現 JSTL、 OGNL表達式效果，避免每天套模板、改 Jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。
Thymeleaf 提供 Spring 標準方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。

Thymeleaf渲染 Web 頁面

添加pom依賴

首先我們要根據之前學習SpringBoot的文章，先創建一個最簡單的SpringBoot工程，然后第一步添加Thymeleaf的依賴。

<dependency>

<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

添加Thymeleaf相關屬性配置

在application.properties文件中添加Thymeleaf相關配置

#Thymeleaf配置
# 編碼類型
spring.thymeleaf.encoding=utf-8
# 模板文件解析模式
spring.thymeleaf.mode=HTML5
# 模板文件位置前綴
spring.thymeleaf.prefix=classpath:/templates/
# 模板文件位置后綴
spring.thymeleaf.suffix=.html

創建HTML

創建html文件，放在template文件夾中

導入thymeleaf的名稱空間

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

thymeleaf基礎語法

創建html頁面，我們使用的th:text；可以改變當前元素里面的文本內容；

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SpringBoot集成thymeleaf</title>
</head>
<body>
<h1>thymeleaf模板引擎</h1>

<p th:text="${hello}">這是的內容將被替換</p>
</body>
</html>

創建controller測試

在寫controller的時候，一定要注意這次controller我們使用注解是@Controller，因為我們要跳轉到html，不在是返回JSON數據了。

/**
* SpringBoot集成thymeleaf
*/
@Controller
public class ThymeleafController {

@RequestMapping("/demo")
public String demo(Map<String,Object> map) {
map.put("hello", "課工場, 更可靠的IT教育！！！");
// 返回到模板引擎地址
return "/demo";
}
}

最后啟動SpirngBoot工程，在瀏覽器地址欄中輸入http://localhost:8080/demo就可以了。