6. 模板引擎 Thymeleaf
Thyme leaf 英譯為 百里香的葉子。
模板引擎
? 以前開發(fā)中使用的jsp就是一個模板引擎，但是springboot 以jar的方式，并且使用嵌入式的tomcat，所以默認(rèn)不支持jsp。
? Springboot推薦使用模板引擎，除了jsp，還有用的比較多的freemarker，包括springboot推薦的Thymeleaf。它們的思想都是一樣的，如下：
模板引擎的作用：
? 寫一個頁面模板，加上后臺封裝好的數(shù)據(jù)，交給模板引擎。它按照我們的數(shù)據(jù)進(jìn)行表達(dá)式解析，填充到指定位置，最終生成想要的內(nèi)容再寫出去。
引入Thymeleaf
? 怎么引入呢，對于springboot來說，只是一個start的事情。我們在項目中引入一下。
? 提供三個網(wǎng)址：
? Thymeleaf官網(wǎng):https://www.thymeleaf.org/
? Thymeleaf 在Github 的主頁:https://github.com/thymeleaf/thymeleaf
? Spring官方文檔:https://docs.spring.io/spring-boot/docs/2.3.2.RELEASE/reference/htmlsingle/#using-boot-starter
找到對應(yīng)的pom依賴：
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring5 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf.extras/thymeleaf-extras-java8time -->
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
<version>3.0.4.RELEASE</version>
</dependency>
Maven會自動下載jar包，我們可以看到：
[圖片上傳失敗...(image-c4ee3-1602317987865)]
Thymeleaf分析
? 我們首先按照springboot的自動配置原理看一下Thymeleaf的自動配置規(guī)則，找到自動配置類：ThymeleafProperties
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
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 = DEFAULT_PREFIX;
private String suffix = DEFAULT_SUFFIX;
private String mode = "HTML";
private Charset encoding = DEFAULT_ENCODING;
}
? 我們可以看到默認(rèn)的前后綴！
? 因此我們只需要把html頁面放到類路徑下的templates下，thymeleaf就可以幫我們自動渲染了。
? 使用Thymeleaf什么都不需要配置，只需要將他放在指定的文件夾下即可！
測試
測試步驟：
-
編寫一個TestController
@Controller public class TestController { @RequestMapping("/test") public String test(){ return "test"; } } -
編寫一個測試頁面 test.html放在templates目錄下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>test</h1> </body> </html> 啟動項目請求測試
小結(jié)：
如果使用thymeleaf，只需要導(dǎo)入對應(yīng)的依賴即可！
-
html放在templates目錄下。
public static final String DEFAULT_PREFIX = "classpath:/templates/"; public static final String DEFAULT_SUFFIX = ".html";
Thymeleaf語法學(xué)習(xí)
? 要學(xué)習(xí)語法，參考官網(wǎng)文檔為準(zhǔn)，我們找到對應(yīng)的版本看看：
【做一個簡單的練習(xí)：我們需要查出一些數(shù)據(jù)，在頁面中展示】步驟如下：
-
修改測試請求，增加數(shù)據(jù)傳輸
model.addAttribute("msg","hello thymeleaf"); -
我們要使用thymeleaf，需要在html文件中導(dǎo)入命名空間的約束，方便提示。我們可以去官方文檔#3看一下命名空間：
<html xmlns:th="http://www.thymeleaf.org"> -
編寫前端頁面
<div th:text="${msg}"> </div> 啟動測試
Thymeleaf的使用語法：
-
我們可以使用任意的th:attr來替換html中原生屬性的值
在這里插入圖片描述
-
我們可以寫哪些表達(dá)式？
在這里插入圖片描述
練習(xí)測試
-
編寫一個controller，放一些數(shù)據(jù)
@Controller public class TestController { @RequestMapping("/test") public String test(Model model) { model.addAttribute("msg","<h1>hello thymeleaf</h1>"); model.addAttribute("users", Arrays.asList("111","222","333")); return "test"; } } -
測試頁面取出數(shù)據(jù)
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>test</h1> <!--所有的html元素都可以被thymeleaf替換接管，th:+元素名，如th:class="" --> <div th:text="${msg}"></div> <div th:utext="${msg}"></div> <hr> <!--建議第一種寫法--> <h3 th:each="user : ${users}" th:text="${user}"></h3> <hr> <h3 th:each="user : ${users}" >[[${user}]]</h3> </body> </html> -
啟動項目測試！
在這里插入圖片描述
記住一句話：
? 需要使用什么，根據(jù)官方文檔來查詢，才是最重要的，要熟練使用官方文檔！
