隸屬文章：?Java高級 | （二十二）Java常用類庫-CSDN博客
系列文章：?Java高級 | 【實驗一】Spring Boot安裝及測試 最新-CSDN博客
? ? ? ? ? ? ? ? ? ?Java高級 | 【實驗二】Springboot 控制器類+相關注解知識-CSDN博客
目錄
一、Thymeleaf
1.1 是什么？
1.2?Thymeleaf機制說明
1.3?優點VS缺點
1.4?使用Thymeleaf
（1）jar包依賴
（2）在application.properties中配置thymeleaf
二、Thymeleaf語法
2.1 chongyoth屬性
①文本替換（th:text）
②HTML 替換（th:utext）
2.2 其他th 屬性
三、spring?boot使用Thymeleaf
3.1 創建spring?boot工程并默認使用thymeleaf模板引擎
3.2 編寫控制器類及數據對象類
3.3 編寫前端視圖頁面
（1）編寫test1.html
（2）編寫test2.html
（3）編寫test3.html
（4）編寫test4.html
?四、練習題
【問題】
【答案】
? ? ? ? ?Web 開發離不開動態頁面的開發，很早以前企業主要使用JSP技術來開發網頁，隨著技術的升級更替，目前來說主流的方案是Thymeleaf。
? ? ? ??Thymeleaf 是一個模板框架，它可以支持多種格式的內容動態渲染，功能非常強大，它天然和 HTML是相融合的，所以對于前端工程師來說它也是易于理解的。
? ? ? ?Springboot默認是不支持JSP的，默認使用Thymeleaf模板引擎。
官方文檔：Tutorial: Using Thymeleaf
一、Thymeleaf
1.1 是什么？
- 是一個跟 Velocity、FreeMarker 類似的模板引擎，可完全替代 JSP。
- 是一個 java 類庫，它是一個 xml/xhtml/html5 的模板引擎，可以作為mvc的web應用的view層。
1.2?Thymeleaf機制說明
? ? ? ? ?Thymeleaf 是服務器渲染技術，頁面數據是在服務器端進行渲染的。
? ? ? ? 因此，在開發中使用Thymeleaf，并不是前后端分離。
1.3?優點VS缺點
- 開箱即用，它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、改jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言；
- Thymeleaf模板頁面無需服務器渲染，也可以被瀏覽器運行，頁面簡潔SpringBoot支持 Thymeleaf、Velocity、FreeMarker。
- 并不是一個高性能的引擎，適用于單體應用。如果要做一個高并發的應用，選擇前后端分離更好，但是作為SpringBoot推薦的模板引擎，還是需要了解一下。
1.4?使用Thymeleaf
（1）jar包依賴
在pom.xml中添加如下依賴:?
//這個配置是必須的，事實上，spring?boot項目創建好后，已自動添加該依賴
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>（2）在application.properties中配置thymeleaf
//這個配置不是必須的
//但是spring.thymeleaf.mode的默認值是HTML5，其實是一個很嚴格的檢查，改為LEGACYHTML5可以得到一個可能更友好親切的格式要求。
spring.thymeleaf.mode?=?LEGACYHTML5二、Thymeleaf語法
2.1 chongyoth屬性
? ? html有的屬性，Thymeleaf基本都有，而常用的屬性大概有七八個。其中th屬性執行的優先級從1~8，數字越低優先級越高。
| 屬性 | 作用描述 | 相關屬性 | 優先級（order） | 說明 |
| th:insert | 代碼塊引入 | th:replace, th:include | 1 | 優先級最高，常用于公共代碼塊提取 三者的區別較大，若使用不恰當會破壞html結構 |
| th:each | 遍歷循環元素 | 與 th:text、th:value 一起使用 | 2 | 優先級很高，注意修飾標簽位置 |
| th:if | 條件判斷 | th:unless, th:switch, th:case | 3 | 優先級較高 |
| th:object | 聲明變量，配合 *{} 使用，達到偷懶的效果 | - | 4 | 優先級一般，用于簡化表達 |
| th:attr | 修改任意屬性 | th:attrappend, th:attrprepend | 5 | 優先級一般，實際開發中用的較少，因為有豐富的其他th屬性幫忙，類似的還有th:attrappend，th:attrprepend |
| th:value | 設置當前元素的 value 值，類似修改指定屬性 | th:src, th:href | 6 | 優先級不高 |
| th:text | 設置當前元素的文本內容 | th:utext | 7 | 優先級不高，th:text會轉義HTML標簽，th:utext不會 |
| th:fragment | 定義代碼塊，供 th:insert 引用 | - | 8 | 優先級最低 |
①文本替換（th:text）
文本替換是指直接將變量的值替換到 HTML 標簽的文本內容中。
在 Thymeleaf 中，可以使用th:text屬性來實現文本替換。
<p th:text="${user.name}">Default Text</p>在這個例子中，${user.name}?的值會替換?<p>?標簽中的文本內容，如果user.name存在，則其值會顯示在頁面上；如果不存在，則顯示默認文本"Default Text"。
②HTML 替換（th:utext）
HTML 替換是指將變量的值作為 HTML 內容插入到 HTML 標簽中。在 Thymeleaf 中，可以使用th:utext屬性來實現 HTML 替換。
<div th:utext="${user.description}">Default HTML</div>
在這個例子中，${user.description}?的值會被作為 HTML 內容插入到?<div>?標簽中，不會被轉義處理。這意味著，如果${user.description}的值包含 HTML 標簽，它們會被正確地解析并顯示在頁面上。
2.2 其他th 屬性
Thymeleaf 還提供了大量的 th 屬性，這些屬性可以直接在 HTML 標簽中使用，其中常用 th 屬性及其示例如下表。
| 屬性 | 描述 | 示例 |
| th:id | 替換 HTML 的?id 屬性 | <input id="html-id" th:id="thymeleaf-id" /> |
| th:text | 文本替換，轉義特殊字符 | <h1 th:text="hello，bianchengbang" >hello</h1> |
| th:utext | 文本替換，不轉義特殊字符 | <div th:utext="<h1>歡迎來到編程幫！</h1>" >歡迎你</div> |
| th:object | 在父標簽選擇對象，子標簽使用 *{…} 選擇表達式選取值。 | <div th:object="${session.user}" > <p th:text="*{fisrtName}">firstname</p> </div> |
| th:value | 替換 value 屬性 |
|
| th:with | 局部變量賦值運算 |
|
| th:style | 設置樣式 |
|
| th:onclick | 點擊事件 |
|
| th:each | 遍歷，支持 Iterable、Map、數組等。 |
|
| th:if | 根據條件判斷是否需要展示此標簽 |
|
| th:unless | 和 th:if 判斷相反，滿足條件時不顯示 |
|
| th:switch | 與 Java 的?switch case語句類似 |
|
| th:fragment | 模板布局，類似 JSP 的 tag，用來定義一段被引用或包含的模板片段 |
|
| th:insert | 布局標簽； |
|
| th:replace | 布局標簽； |
|
| th:selected | select 選擇框選中 |
|
| th:src | 替換 HTML 中的 src 屬性? |
|
| th:inline | 內聯屬性； |
|
| th:action | 替換表單提交地址 |
|
三、spring?boot使用Thymeleaf
3.1 創建spring?boot工程并默認使用thymeleaf模板引擎
? ? File->New->Project
至此，一個基于spring?boot的web工程已創建完畢，該工程默認的前端模板是Thymeleaf。
運行工程，如果能運行成功。則編寫控制器類。
如果不能正常運行，請根據提示信息修改工程的配置，可能修改pom.xml，可能修改工程的結構（快捷鍵shift+ctrl+alt+s）等。
3.2 編寫控制器類及數據對象類
在當前包com.example.thymeleaftest中創建控制器類及數據對象類。
（1）創建 ?MyData1類?
//存放數據對象
package com.example.thymeleaftest;public class MyData1 {private int id = 0;private String username="";private String password="";public MyData1() {}public MyData1(int id, String username, String password) {this.id = id;this.username = username;this.password = password;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "MyData1{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +'}';}
}（2）編寫控制器類?TestController
用于跳轉到視圖層并傳遞相關數據給指定的視圖層。
package com.example.thymeleaftest;import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.ArrayList;
import java.util.List;@Controller//該注解表明TestController類是一個控制器
@RequestMapping("/test")//注解TestController類所有方法訪問的url是http://localhost8080/test
public class TestController {@RequestMapping("/test1")//該方法處理的url是http://localhost8080/test/test1public String test1() {return "test1";//轉發給視圖test1.html}@RequestMapping("/test2")//該方法處理的url是http://localhost8080/test/test2public String test2(Model model) {//參數model為模型，用來存放轉發到視圖的數據String name = "Jack";model.addAttribute("name", name);//模型中填充數據，該數據在視圖的中名稱為namereturn "test2";}@RequestMapping("/test3")//該方法處理的url是http://localhost8080/test/test3public String test3(Model model) {List<MyData1> myList = new ArrayList<>();myList.add(new MyData1(1, "laisc", "lai1203"));myList.add(new MyData1(2, "admin", "admin888"));myList.add(new MyData1(3, "root", "root9812"));model.addAttribute("userlist", myList);return "test3";}@RequestMapping("/test4")//該方法處理的url是http://localhost8080/test/test4public String test4(Model model) {MyData1 mydata1 = new MyData1(1, "admin", "admin1234");model.addAttribute("data123", mydata1);return "test4";}@RequestMapping("/test5")//該方法處理的url是http://localhost8080/test/test2public String test5(HttpServletRequest request) {String name = "張三";request.setAttribute("name", name);return "test2";}
}上面的控制類一個定義了5個方法，每個方法都定義了其前端訪問的url，以及返回到視圖的數據。
3.3 編寫前端視圖頁面
前端視圖用的是thymeleaf模板，而thymeleaf模板默認的路徑是/resources/templates。因此，我們在templates文件夾中創建4個html頁面，分別是test1.html、test2.html、test2.html和test4.html，即4個視圖頁面。如圖4所示：
（1）編寫test1.html
? ? ? ? 該視圖對應TestController控制器類的test1()方法，該方法沒有傳遞任何數據到test1.html視圖。test1.html視圖直接輸出“Hello, world!”，其代碼如下所示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
Hello, world!
</body>
</html>
?
說明：由于該視圖沒有輸出變量的值，因此可以使用傳統的html代碼。
（2）編寫test2.html
該視圖對應TestController控制器類的test2()方法，該方法傳遞一個“name”變量到test2.html視圖。test2.html視圖輸出“name”變量的值。其代碼如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'"></p>
</body>
</html>
- <html xmlns:th="http://www.thymeleaf.org">---導入thymeleaf資源說明：由于該視圖要輸出變量的值，因此必須使用thymeleaf+html代碼。
- <p th:text="'Hello, ' + ${name} + '!'">3333</p>----輸出變量。?
（3）編寫test3.html
? ? 該視圖對應TestController控制器類的test3()方法，該方法傳遞一個list集合到 test3.html視圖，視圖循環輸出集合的值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table><tr><th>ID</th><th>username</th><th>password</th></tr><tr th:each="user : ${userlist}"><td th:text="${user.id}">-1</td><td th:text="${user.username}">abc</td><td th:text="${user.password}">555</td></tr>
</table>
</body>
</html>
（4）編寫test4.html
? ? ? 該視圖對應TestController控制器類的test3()方法，該方法傳遞一個model對象到test4.html視圖.該視圖把對象的值輸出到超鏈接的參數值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${data123.username})}">鏈接1</a>
<a href="details.html" th:href="@{/order/details(orderId=${data123.username})}">鏈接2</a>
<a href="abc.html" th:href="'order/'+${data123.id}+'/details?orderId='+${data123.username} ">鏈接3</a>
<a href="abc.html" th:href="@{'/details/'+${data123.id}(orderId=${data123.username})}">鏈接4</a>
<a href="abc.html" th:href="@{'/details/'+${data123.id}+'/aaa'(orderId=${data123.username})}">鏈接5</a>
</body>
</html>
四、練習題
【問題】
編寫一個控制器，產生100個學生對象，并把這些對象在html中以表格的形式輸出。
【答案】
package com.example.thymeleaftest;public class Student {private int id;private String name;private int age;public Student(int id, String name, int age) {this.id = id;this.name = name;this.age = age;}// Getter方法public int getId() { return id; }public String getName() { return name; }public int getAge() { return age; }
}package com.example.thymeleaftest;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/student")
public class StudentController {@RequestMapping("/list")public String listStudents(Model model) {List<Student> students = new ArrayList<>();// 生成100個簡單學生數據for (int i = 1; i <= 100; i++) {students.add(new Student(i, "學生" + i, 18 + (i % 7)));}model.addAttribute("students", students);return "studentList";}
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>學生列表</title>
</head>
<body>
<h1>學生列表</h1>
<table border="1"><tr><th>ID</th><th>姓名</th><th>年齡</th></tr><tr th:each="student : ${students}"><td th:text="${student.id}"></td><td th:text="${student.name}"></td><td th:text="${student.age}"></td></tr>
</table>
</body>
</html>
