Thymeleaf模板引擎從入門到實戰：Spring Boot整合與核心用法詳解

在 Java Web 開發的世界里，模板引擎是連接后端數據與前端展示的重要橋梁。Thymeleaf 憑借其強大的功能和簡潔的語法，逐漸成為眾多開發者的首選。如果你正在尋找一款能夠讓你的 Web 應用開發更加高效、代碼更加優雅的模板引擎，那么 Thymeleaf 絕對值得你深入了解。本文將帶你從零開始，快速掌握 Thymeleaf 的基礎知識和核心用法。?

一、Thymeleaf 是什么？?

Thymeleaf 是一個用于 Java 的開源模板引擎，它可以與 Spring MVC、Spring Boot 等主流 Java Web 框架無縫集成。與傳統的 JSP（JavaServer Pages）相比，Thymeleaf 的一大顯著優勢在于它能夠直接在瀏覽器中預覽模板內容，而無需啟動整個 Web 應用。這使得開發人員可以更直觀地查看頁面效果，大大提高了開發效率。此外，Thymeleaf 的語法簡潔明了，學習成本較低，并且支持 HTML5 標準，能夠很好地兼容現代前端開發工具和技術。?

Thymeleaf 的設計理念是 “自然模板”，即模板文件本身就是有效的 HTML（或 XML）文件，可以直接在瀏覽器中打開并查看。這意味著前端設計師和后端開發者可以更方便地協作，前端設計師可以在不依賴后端數據的情況下設計和完善頁面結構與樣式，而后端開發者則可以通過添加 Thymeleaf 的標簽和表達式，將動態數據填充到頁面中。?

二、Thymeleaf 的核心功能?

數據綁定：Thymeleaf 最核心的功能之一就是數據綁定。它支持從 Java 對象、集合、Map 等數據結構中提取數據，并將其展示在 HTML 頁面上。通過使用th:text、th:utext、th:value等屬性，我們可以輕松地將后端數據綁定到頁面的文本、HTML 內容或表單字段中。?
條件與循環：Thymeleaf 提供了豐富的條件判斷和循環語句，如th:if、th:unless、th:switch、th:each等。這些語句使得我們可以根據不同的條件動態地展示或隱藏頁面元素，以及遍歷集合數據并生成相應的 HTML 結構。?
表單處理：在 Web 應用中，表單是用戶輸入數據的重要途徑。Thymeleaf 對表單處理提供了強大的支持，它可以自動綁定表單數據到后端的 Java 對象，并對表單進行驗證和錯誤處理。通過th:object、th:field等屬性，我們可以方便地創建和處理表單。?
國際化支持：隨著全球化的發展，Web 應用的國際化需求越來越普遍。Thymeleaf 內置了對國際化的支持，通過配置資源文件和使用#{...}表達式，我們可以輕松實現頁面內容的多語言切換。?
模板布局：Thymeleaf 支持模板布局，允許我們將頁面的公共部分（如頭部、導航欄、底部等）提取出來，形成一個布局模板，然后在其他頁面中復用。這樣可以大大減少代碼的重復，提高代碼的可維護性。

三、創建項目

1.org.apache.maven.archetypes:maven-archetype-quickstart選這個有什么用？

org.apache.maven.archetypes:maven-archetype-quickstart是 Maven 的一個項目原型，主要用于快速搭建一個基礎的 Java 項目骨架，方便開發者在此基礎上進行開發。結合你正在閱讀的 Thymeleaf 入門內容，它在 Java Web 開發學習中也能起到很好的輔助作用，具體優勢如下：

快速搭建項目結構：maven-archetype-quickstart會自動生成標準的 Maven 項目目錄結構，包括src/main/java（存放 Java 源代碼）、src/main/resources（存放配置文件等資源）、src/test/java（存放測試代碼）和src/test/resources（存放測試相關資源）等。當你學習 Thymeleaf 時，可將 Thymeleaf 模板文件放在src/main/resources/templates目錄，后端代碼放在src/main/java目錄，便于后續添加 Thymeleaf 依賴和進行相關開發。
預配置項目基礎：該原型生成的項目pom.xml文件中，已配置好基礎的 Maven 項目信息，如項目坐標（groupId、artifactId、version）等。當你需要集成 Thymeleaf 到項目時，只需要在pom.xml中添加 Thymeleaf 依賴即可，無需從頭配置 Maven 項目的基礎信息，節省時間。
提供示例代碼：在src/main/java目錄下，maven-archetype-quickstart會生成一個簡單的 Java 類（如App.java），包含一個簡單的main方法示例。雖然與 Thymeleaf Web 開發模式不同，但能幫助初學者理解 Java 代碼在 Maven 項目中的基本組織形式，后續學習 Thymeleaf 時，可逐步替換和擴展代碼，開發出 Web 應用的后端邏輯，實現與 Thymeleaf 模板的數據交互。
便于學習 Maven 構建：maven-archetype-quickstart生成的項目可以直接使用 Maven 的各種命令進行構建、編譯、測試和打包等操作。在學習 Thymeleaf 的過程中，通過對這個基礎項目執行 Maven 命令，能更好地掌握 Maven 的使用，例如使用mvn clean install命令將項目打包，為后續部署包含 Thymeleaf 的 Web 應用做好準備。

如果你想基于這個原型，結合 Thymeleaf 開發一個 Web 應用，后續可以添加 Spring Boot、Spring MVC 等依賴，進一步完善項目功能。

2.導入依賴

<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>

3.編寫第一個入門程序

示例1：

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;public class HelloThymeLeaf {public static void main(String[] args) {//創建模版引擎TemplateEngine engine = new TemplateEngine();//準備模版String input = "<input type='text' th:value='hellothymelaef'/>";//準備數據，使用ContextContext context = new Context();//調用引擎，處理模版和數據String out = engine.process(input, context);System.out.println("結果數據："+out);}
}

運行結果;

解釋：

?創建模板引擎實例

TemplateEngine engine = new TemplateEngine();

創建了一個TemplateEngine對象，它是整個 Thymeleaf 處理流程的核心，后續對模板的解析、數據綁定等操作都依賴于這個引擎實例。

?準備模板

String input = "<input type='text' th:value='hellothymelaef'/>";

定義了一個字符串input，它包含了 Thymeleaf 模板代碼。在這個例子中，模板是一個簡單的 HTML 輸入框，其中使用了 Thymeleaf 的th:value屬性，不過當前屬性值hellothymelaef只是一個靜態字符串，后續可以通過數據綁定動態替換。
?

準備數據上下文

Context context = new Context();

創建了一個Context對象，用于存儲要傳遞給模板的數據。在這個簡單示例中，Context對象目前為空，沒有實際數據傳遞。但在實際應用中，可以通過context.setVariable("變量名", 變量值)的方式向其中添加數據，這些數據將在模板處理時被 Thymeleaf 引擎使用。
?

處理模板并輸出結果

String out = engine.process(input, context);
System.out.println("結果數據："+out);

調用TemplateEngine的process方法，將模板字符串input和數據上下文context作為參數傳入。process方法會解析模板，應用數據綁定等操作，并返回處理后的結果字符串。最后，通過System.out.println將處理后的結果輸出到控制臺。在這個例子中，由于沒有實際的數據綁定操作，輸出結果可能與輸入的模板字符串相似，除非后續向context中添加數據并在模板中引用。

示例2：

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;public class HelloThymeleaf2 {public static void main(String[] args) {//創建模版引擎TemplateEngine engine = new TemplateEngine();//準備模版String input = "<input type='text' th:value='${name}'/>";//準備數據，使用ContextContext context = new Context();context.setVariable("name","張三");//調用引擎，處理模版和數據String out = engine.process(input, context);System.out.println("結果數據："+out);}
}

4.使用模版文件

main.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" th:value="${name}"/>
</body>
</html>

Test

    @Testpublic void test(){TemplateEngine engine = new TemplateEngine();//讀取磁盤中的模版文件ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();//設置引擎使用resolverengine.setTemplateResolver(resolver);//指定數據Context context = new Context();context.setVariable("name","張三");//處理模版String html=engine.process("main.html",context);System.out.println("html="+html);}

配置模板解析器

ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
engine.setTemplateResolver(resolver);

ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();：創建一個ClassLoaderTemplateResolver對象，該解析器用于從類路徑（即src/main/resources及其子目錄）中查找和加載模板文件。它是 Thymeleaf 提供的多種模板解析器之一，適用于大多數基于 Maven 或 Gradle 構建的 Java 項目，因為這些項目的資源文件默認會被打包到類路徑下。
engine.setTemplateResolver(resolver);：將創建好的模板解析器resolver設置到TemplateEngine中，這樣模板引擎在處理模板時，就會使用該解析器來查找對應的模板文件

準備數據上下文

Context context = new Context();
context.setVariable("name", "張三");

Context context = new Context();：創建一個Context對象，它用于在模板處理過程中存儲和傳遞數據，類似于在 Web 開發中Model的作用。
context.setVariable("name", "張三");：向Context中添加一個名為name的變量，并將其值設置為"張三"。這個變量將在模板處理過程中被使用，用于替換模板中相應的表達式。

處理模板并輸出結果

String html = engine.process("main.html", context);
System.out.println("html=" + html);

String html = engine.process("main.html", context);：調用TemplateEngine的process方法，該方法接受兩個參數：模板文件名（這里是"main.html"，模板引擎會根據之前設置的模板解析器，在類路徑下查找該文件）和數據上下文context。process方法會解析模板文件，將context中的數據應用到模板中相應的表達式處，完成數據綁定和模板渲染，并返回處理后的 HTML 字符串。

5.設置模版前綴、后綴

讓其再套一層目錄依舊能找到

采用這兩個方法

   @Testpublic void test2(){TemplateEngine engine = new TemplateEngine();ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();resolver.setPrefix("templates/");resolver.setSuffix(".html");engine.setTemplateResolver(resolver);Context context = new Context();context.setVariable("name","張三");String html = engine.process("index", context);System.out.println("html="+html);}

運行結果：

四、spring boot 中使用thymeleaf

1.創建maven 項目

2.加入依賴

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
<version>2.0.6.RELEASE</version>
</parent><dependencies><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency></dependencies>

3.編寫application.properties

spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

在配置文件 application. properties 中，可以修改的 Thymeleaf 配置主要有以下。?

spring.thymeleaf.cache ：是否打開模板配置，默認為 true 。?

spring.thymeleaf.check-template ：是否在處理模板前檢查其是否存在，默認為 true 。

spring.thymeleaf.check-template-location ：是否檢查模板位置，默認為 true 。

spring.thymeleaf.content-type ：模板的 content-type 值，默認為 text/html?

spring.thymeleaf.enabled ：是否開啟視圖解析，默認為 true 。?

spring.thymeleaf.encoding ：模板的編碼，默認為 UTF-8。?

spring.thymeleaf.excluded-view-names ：要排除的模板名稱。

spring.thymeleaf.mode ：模板模式，默認為 HTML5?

spring.thymeleaf. prefix : 模板前綴，默認為 classpath :/templates ／，用于創建模板的 URL。

spring.thymeleaf.suffix ：模板后綴，默認為.html ，用于創建模板 URL。 “前綴＋模板名稱＋后綴”即可定位到具體的模板。

spring.thymeleaf.template-resolver-order ：默認模板解析器的執行順序。?

spring.thymeleaf.view-names ：要解析的模板名稱，用逗號隔開。

以上執行簡單的兩步就完成了 Spring Boot 與 Thymeleaf 的整合，實際上都不需要配置 application.properties ，使用默認值即可，換言之，只需要為項目加入“spring-boot-starter thymeleaf＂依賴，就能完成整合整理一下，并解釋一下

4.創建Controller

package org.example1.demo1.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class HelloController {//參數：Model可以存放數據，放入到request作用域//返回值：String:表示視圖@GetMapping("/hello")public String hello(Model model) {//添加數據model.addAttribute("name","李四");//指定模版視圖return "index";}
}