14-Thymeleaf模板引擎
1、什麼是模板引擎
當我們開發傳統專案的時候，需要我們自己編寫前端頁面進行渲染結果，這時就需要模板引擎。在以前的開發中，前段交給我們的HTML頁面，需要把這些頁面轉成jsp頁面。使用jsp的好處就是可以在我們查出一些資料並轉發到jsp頁面後，可以用輕鬆實現對這些資料的顯示以及互動。jsp的功能很強大，其中可以編寫java程式碼，然而springboot的專案上衣jar包形式打包的，不是war包，而且使用的還是嵌入式的tomcat容器，所以不支援jsp。
在開發前後端不分離的springboot專案時，不能使用jsp，如果我們直接用純靜態頁面的方式，會給我們的開發帶來非常大的麻煩。所以springboot就會推薦我們使用模板引擎。
jsp也是一種模板引擎，springboot支援的模板引擎很多，包括freemarker、thymeleaf等等，springboot推薦我們使用thymeleaf模板引擎。其實大部分都模板引擎的思路都是一樣的，如下圖表示
我們將後臺資料放到model物件中，然後通過Template模板引擎中的具體語法獲取資料，然後進行渲染，然後以靜態頁面的形式將資料在前端進行顯示
模板引擎具體作用：我們寫了一個頁面模板，但是這個模板中的一些值是動態的，我們就在這些值得位置寫一些表示式來獲取資料。這些值去哪獲取呢？我們可以將後臺的資料進行組裝，即組裝到一個ModelAndView這個物件中，表示式就從這個物件中獲取。然後我們將這個頁面模板和這些資料交給模板引擎，模板引擎將其中的表示式進行解析，將獲取的資料填充到我們指定的位置，然後將這些資料最終生成我們想要的內容輸出。這就是大部分模板引擎的思想，不過不同的模板引擎的語法是不同的。
2、springboot中thymeleaf的用法
-
第一步：需要引入thymeleaf的依賴，我們可以到這下面網站獲取thymeleaf的maven坐
1、Thymeleaf官網：https://www.thymeleaf.org/
2、thymeleaf在github的主頁：https://github.com/thymeleaf/thymeleaf
3、spring官方文件：https://docs.spring.io/spring-boot/docs/2.2.13.RELEASE/reference/html/using-spring-boot.html#using-boot-starter
從這三個網站獲取我們對應的版本
這裡我們直接到springboot官網文件中檢視，但要注意的是不同版本的springboot的文件內容不一樣，比如下面這個2.4.6版本的Starters中後面是沒有pom選項的，所以我們找版本靠前的。
直接點pom
其中的兩個依賴就是我們需要的
<!--thymeleaf依賴-->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
其中使用的版本是3.x的，springboot2.x不能使用thymeleaf3.0以及之前的版本，不然包報錯
-
第二步：使用thymeleaf
首先我們找到關於thymeleaf的自動配置類ThymeleafAutoConfiguration，可以看到綁定了一個ThymeleafProperties類，該類的部分原始碼如下
@ConfigurationProperties( prefix = "spring.thymeleaf" ) public class ThymeleafProperties { private static final Charset DEFAULT_ENCODING; public static final String DEFAULT_PREFIX = "classpath:/templates/"; public static final String DEFAULT_SUFFIX = ".html"; private boolean checkTemplate = true; private boolean checkTemplateLocation = true; private String prefix = "classpath:/templates/"; private String suffix = ".html"; private String mode = "HTML"; private Charset encoding; private boolean cache; private Integer templateResolverOrder; private String[] viewNames; private String[] excludedViewNames; private boolean enableSpringElCompiler; private boolean renderHiddenMarkersBeforeCheckboxes; private boolean enabled; private final ThymeleafProperties.Servlet servlet; private final ThymeleafProperties.Reactive reactive; public ThymeleafProperties() { this.encoding = DEFAULT_ENCODING; this.cache = true; this.renderHiddenMarkersBeforeCheckboxes = false; this.enabled = true; this.servlet = new ThymeleafProperties.Servlet(); this.reactive = new ThymeleafProperties.Reactive(); }從上面程式碼可以看到關於模板的解析屬性配置，有預設前後綴，跟之前我們配置檢視解析器配置的前後綴一樣
我們檢視一下thymeleaf的幫助文件，如下
一些基本使用的表示式如下
(https://img2020.cnblogs.com/blog/2432278/202106/2432278-20210617142104924-654772761.png)
語法使用如下
測試各個語法
-
測試讀取普通文字
首先我們在templates目錄中建立一個模板頁面text.html，然後匯入標頭檔案
@Controller public class ThymeleafController { @RequestMapping("/thymeleaf") public String myThymeleaf(Model model){ model.addAttribute("msg","<h1>hello,springboot<h1>"); return "test"; } }<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--測試獲取後臺文字資料--> <div th:text="${msg}"></div><!--進行轉義的取文字資料--> <div th:utext="${msg}"></div><!--不進行轉義的取文字資料--> </body> </html>再啟動測試的時候出現了一個錯誤，由於主啟動類被預設放進了一個自建立的包中，我們建立的controller包和這個包同級，所以沒有掃描controller包中的類，容器中沒有處理器類的元件。所以我們在進行訪問的時候一直是404
我們把主配置類提出到study包下。執行專案，訪問。結果如下
-
測試遍歷資料的語法
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--測試獲取後臺文字資料--> <div th:text="${msg}"></div><!--進行轉義的取文字資料--> <div th:utext="${msg}"></div><!--不進行轉義的取文字資料--> <!--從後臺獲取集合資料，通過迴圈遍歷進行處理--> <h3 th:each="user:${users}" th:text="${user}"></h3> </body> </html>@Controller public class ThymeleafController { @RequestMapping("/thymeleaf") public String myThymeleaf(Model model){ model.addAttribute("msg","<h1>hello,springboot<h1>"); //建立一個數組 String[] arr = {"Smith","Calibre"}; model.addAttribute("users",Arrays.asList(arr));//將陣列轉換成集合，並且放到model物件中 return "test"; } }結果如下