SpringBoot中web開發-thymeleaf模板引擎的使用
阿新 • • 發佈：2021-11-19
官方文件，基於springboot專案的，建議直接從第三章Using Texts開始查閱：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
3.th:each : 遍歷迴圈元素，和th:text或th:value一起使用。注意該屬性修飾的標籤位置。
4.th:if : 條件判斷，類似的還有th:unless，th:switch，th:case。
5.th:insert : 程式碼塊引入，類似的還有th:replace，th:include，三者區別很大，若使用不恰當會破壞html結構，常用於公共程式碼塊的提取複用。
6.th:fragment : 定義程式碼塊，方便被th:insert引用。
7.th:object : 宣告變數，一般和*{}一起配合使用。這些東西的具體使用會在後面做crud實驗的時候詳細說明。 3.thymeleaf語法-表示式語法 （1）變量表達式：
1.要使用thymeleaf模板引擎，首先要再pom中引入thymeleaf依賴檔案
1 <dependency> 2 <groupId>org.springframework.boot</groupId> 3 <artifactId>spring-boot-starter-thymeleaf</artifactId> 4 </dependency>
2.thymeleaf的簡單使用
（1）只要將html檔案放在resources/templates資料夾下，thymeleaf模板引擎就會將頁面自動渲染
例：再template資料夾下建立一個success.html檔案，然後通過localhost:8080/success請求，瀏覽器展現success.html檔案中的內容。
①：resources/templates資料夾下建立success.html頁面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>成功</h1> 9 </body> 10 </html>
②：在Controller層建立HelloController類，然後在類裡邊建立請求對映
1 package com.xiaoma.springbootweb.controller; 2 3import org.springframework.stereotype.Controller; 4 import org.springframework.web.bind.annotation.RequestMapping; 5 6 @Controller 7 public class HelloController { 8 9 @RequestMapping("/success") 10 public String success(){ 11 return "success"; 12 } 13 }
③：執行程式，測試結果。
3.thymeleaf語法-th語法
（1）th:text：設定當前元素的文字內容，相同功能的還有th:utext，兩者的區別在於前者不會轉義html標籤，後者會轉義html標籤。
例：將HelloController類中的success方法改為
1 @RequestMapping("/success") 2 public String success(Map<String,Object> maps){ 3 maps.put("hello","你好"); 4 return "success"; 5 }
將success.html檔案中body裡的內容改為（注意：使用thymeleaf的時候要在html頁面的html標籤中引入名稱空間xmlns:th="http://www.thymeleaf.org"）
1 <body> 2 <h1>成功</h1> 3 <div th:text="${hello}">張三</div> 4 </body>
執行結果為，從結果可以看出，當使用模板引擎的時候，頁面展現的資料是我們繫結的map中的資料，而不會展示html頁面中想要展示的資料，如果將頁面複製到其他地方單獨執行的話，就會將“張三”展示出來，而不會展示我們繫結的“你好”這個資料了。這就是th:text的用法。
2.th:value : 設定當前元素的value值，類似修改指定html標籤屬性的還有th:src,th:href。
3.th:each : 遍歷迴圈元素，和th:text或th:value一起使用。注意該屬性修飾的標籤位置。
4.th:if : 條件判斷，類似的還有th:unless，th:switch，th:case。
5.th:insert : 程式碼塊引入，類似的還有th:replace，th:include，三者區別很大，若使用不恰當會破壞html結構，常用於公共程式碼塊的提取複用。
6.th:fragment : 定義程式碼塊，方便被th:insert引用。
7.th:object : 宣告變數，一般和*{}一起配合使用。這些東西的具體使用會在後面做crud實驗的時候詳細說明。 3.thymeleaf語法-表示式語法 （1）變量表達式：
${...}
（2）連結表示式：@{...}
（3）訊息表示式：#{...}
（3）程式碼塊表示式：~{...}