在上一篇中，我們已經講了，SpringBoot 如何構建項目，和SpringBoot的HelloWorld，
那這一節我們繼續講 Thymeleaf
Thymeleaf
官網: Thymeleaf
Thymeleaf是跟Velocity、FreeMarker類似的模板引擎，它可以完全替代JSP，相較與其他的模板引擎，它主要有以下幾個優勢：
-
Thymeleaf在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型，然後在 html 標籤裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以thymeleaf的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
-
Thymeleaf開箱即用的特性。它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、OGNL表達式效果，避免每天套模板、改jstl、改標籤的困擾。同時開發人員也可以擴展和創建自定義的方言。
-
Thymeleaf提供spring標準方言和一個與SpringMVC完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。
簡單點說:就是爲我們要渲染的界面
自動配置
自動給我們默認分配了模版的前綴和後綴，我們只需要按部就班的將模版丟進去即可，
SpringBoot天生就帶自動配置，這也是爲什麼，我們直接丟進去就可以了，
相比於SpringMVC，他會自動拼接到templates頁面
Thymeleaf整合SpringBoot
- 在pom.xml文件引入thymeleaf1
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
</dependencies>
- 在application.properties（application.yml）文件中配置thymeleaf
spring.thymeleaf.
prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false
- 新建編輯控制層代碼HelloController，在request添加了name屬性，返回到前端hello.html再使用thymeleaf取值顯示。
@Controller
public class HelloController {
@RequestMapping("/hello")
public String hello(HttpServletRequest request, @RequestParam(value = "name", defaultValue = "springboot-thymeleaf") String name) {
request.setAttribute("name", name);
return "hello";
}
}
- 新建編輯模板文件，在resources文件夾下的templates目錄，用於存放HTML等模板文件，在這新增hello.html，添加如下代碼。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>springboot-thymeleaf demo</title>
</head>
<body>
<p th:text="'hello, ' + ${name} + '!'" />
</body>
</html>
以後，我們所有的 代碼 都是上面 這三板斧 ,這也是SpringBoot的優勢
- 寫 pom
- 寫配置
- 業務類
切記：使用Thymeleaf模板引擎時，必須在html文件上方添加該行代碼使用支持Thymeleaf。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
- 啓動項目，訪問http://localhost:8080/hello，看到如下顯示證明SpringBoot整合Thymeleaf成功。
![在這裏插入圖片描述]()
Thyemeleaf 的常用語法
Thymeleaf的主要作用是把model中的數據渲染到html中，因此其語法主要是如何解析model中的數據。從以下方面來學習：
- 變量、方法、條件判斷、循環、運算 [ 邏輯運算、布爾運算、比較運算、條件運算 ]
- 其他 大家可以去官網: Thymeleaf詳解
變量_變量案列
我們先新建一個實體類：User
public class User {
String name;
int age;
User friend;// 對象類型屬性
}
然後在Controller中添加數據
@GetMapping("test2")
public String test2(Model model){
User user = new User();
user.setAge(21);
user.setName("Jackson");
user.setFriend(new User("李小龍", 30));
model.addAttribute("user", user);
return "hello2";
}
·語法解釋·
Thymeleaf通過
${}來獲取model中的變量，注意這不是el表達式，而是ognl表達式，但是語法非常像。
我們在頁面獲取user數據：
<h1>
你好：<span th:text="${user.name}">請跟我來</span>
</h1>
感覺跟el表達式差不多的。區別在於，我們的表達式寫在一個名爲：th:text的標籤屬性中，這個叫做指令
向下兼容
但是要注意，如果瀏覽器不支持Html5怎麼辦？
如果不支持這種th:的命名空間寫法，那麼可以把th:text換成 data-th-text，Thymeleaf也可以兼容。
如果想要不進行格式化輸出，而是要輸出原始內容，則使用th:utext來代替.
變量_ognl表達式的語法
剛纔獲取變量值，我們使用的是經典的對象.屬性名方式。但有些情況下，我們的屬性名可能本身也是變量，怎麼辦？
ognl提供了類似js的語法方式：
例如：${user.name} 可以寫作${user['name']}
看下面案例
<h2>
<p>Name: <span th:text="${user.name}">Jack</span>.</p>
<p>Age: <span th:text="${user.age}">21</span>.</p>
<p>friend: <span th:text="${user.friend.name}">Rose</span>.</p>
</h2>
我們獲取用戶的所有信息，分別展示。
當數據量比較多的時候，頻繁的寫user.就會非常麻煩。
因此，Thymeleaf提供了自定義變量來解決：
示例
<h2 th:object="${user}">
<p>Name: <span th:text="*{name}">Jack</span>.</p>
<p>Age: <span th:text="*{age}">21</span>.</p>
<p>friend: <span th:text="*{friend.name}">Rose</span>.</p>
</h2>
- 首先在 h2上 用 th:object="${user}"獲取user的值，並且保存
- 然後，在h2內部的任意元素上，可以通過 *{屬性名}的方式，來獲取user中的屬性，這樣就省去了大量的user.前綴了
循環遍歷
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>歡迎訪問thymeleaf頁面</h1>
<h4>
<span th:each="user:${user}"> [[${user}]] </span>
</h4>
</body>
</html>
歐克 ，好了，就總結到這裏 ，喜歡的話，記得點個關注哦！