1、認識thymeleaf
2、SpringBoot集成Thymeleaf環境配置
3、標准變量表達式 ${} 和 th:text
4、選擇變量表達式 *{} 和 th:object
5、鏈接(URL)表達式 和 th:href
6、th標簽之th:action
7、th標簽之th:each
8、其他th標簽
9、thymeleaf字面量
10、Thymeleaf的字符串拼接
11、Thymeleaf的內置對象
12、公共頁面抽取
1、認識thymeleaf <--返回目錄
thymeleaf是一個流行的模板引擎，該模板引擎采用java語言開發。
模板引擎是一個技術名詞，是跨領域跨平台的概念，在java語言體系下有模板引擎，在c#、PHP語言體系下也有模板引擎，甚至在JavaScript也會用到模板引擎技術。
java生態下的模板引擎有thymeleaf、freemarker、velocity、beetl（國產）等。
thymeleaf模板引擎既能用於web環境下，也能用於非web環境下，在非web環境下，它能直接顯示模板上的靜態數據，在web環境下，它能像jsp一樣從后台接收數據並替換掉模板上的靜態數據。
thymeleaf是基於html的，以html標簽為載體，thymeleaf要寄托在html的標簽下實現對數據的展示。
thymeleaf的官方網站：http://www.thymeleaf.org
springboot集成了thymeleaf模板技術，並且springboot官方也推薦使用thymeleaf來替代jsp技術。thymeleaf是另外一種模板技術，它本身並不屬於springboot，springboot只是很好地集成了這種模板技術，作為前端頁面的數據展示。
2、SpringBoot集成Thymeleaf環境配置 <--返回目錄
springboot使用thymeleaf作為視圖展示時，約定將模板文件放置在src/main/resources/templates目錄下，靜態資源放在src/main/resources/static目錄下。
項目結構
依賴
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
application.properties
# 開發階段，建議關閉thymeleaf的緩存
spring.thymeleaf.cache=false
#使用遺留的html5以去掉對html標簽的校驗
spring.thymeleaf.mode=LEGACYHTML5
在使用springboot的過程中，如果使用thymeleaf作為模板文件，則要求html格式必須為嚴格的html5格式，必須有結束標簽，否則會報錯；
如果不想對標簽進行嚴格的驗證，使用spring.thymeleaf.mode=LEGACYHTML5去掉驗證，去掉該驗證，則需要引入如下依賴，否則會報錯；
<dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> </dependency> <dependency> <groupId>org.unbescape</groupId> <artifactId>unbescape</artifactId> <version>1.1.5.RELEASE</version> </dependency>
NekoHTML是一個java語言的html掃描器和標簽補全器，這個解析器能夠掃描html文件並"修正"html文檔中的常見錯誤。NekoHTML能增補缺失的父元素、自動用結束標簽關閉相應的元素，修復不匹配的內嵌元素標簽等。
IndexController
@Controller public class IndexController { @RequestMapping("/hello/thymeleaf") public String hello(Model model) { model.addAttribute("msg", "springboot集成thymeleaf"); return "test"; } }
在 src/main/resources/templates 下面創建 模板文件 test.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <span th:text="${msg}">span默認文本內容</span> </body> </html>
啟動程序，訪問http://localhost:8080/hello/thymeleaf 。
3、標准變量表達式 ${} 和 th:text <--返回目錄
thymeleaf有5種表達式：
${}: 標准變量表達式
*{}: 選擇變量表達式
#{}: 消息(i18n)表達式
@{}: 鏈接(URL)表達式
~{}: 片段表達式
${}: 標准變量表達式
@Controller public class IndexController { @RequestMapping("/hello/thymeleaf") public String hello(Model model) { model.addAttribute("msg", "springboot集成thymeleaf"); User user = new User(); user.setId(1); user.setName("張三"); user.setAge(10); model.addAttribute("user", user); return "test"; } }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <span th:text="${msg}">span默認文本內容</span><br/> id: <span th:text="${user.id}">1</span> name: <span th:text="${user.name}">xxx</span> age: <span th:text="${user.age}">18</span> </body> </html>
4、選擇變量表達式 *{} 和 th:object <--返回目錄
*{}: 選擇變量表達式
標准變量表達式和選擇變量表達式可以混合使用 ; 先用 th:object來綁定 user 對象, 然后用 * 來代表這個 user 對象
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <span th:text="${msg}">span默認文本內容</span><br/> <div th:object="${user}"> id: <span th:text="*{id}">1</span> name: <span th:text="*{name}">xxx</span> age: <span th:text="*{age}">18</span> <br/> id: <span th:text="${user.id}">1</span> name: <span th:text="${user.name}">xxx</span> age: <span th:text="${user.age}">18</span> </div> </body> </html>
5、鏈接(URL)表達式 和 th:href <--返回目錄
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <a href="#" th:href="'http://localhost:8080/user?id=' + ${user.id}">a標簽文本內容</a> <a href="#" th:href="@{'http://localhost:8080/user?id=' + ${user.id}}">a標簽文本內容</a> </body> </html>
@Controller public class IndexController { @RequestMapping("/hello/thymeleaf") public String hello(Model model) { User user = new User(); user.setId(1); user.setName("張三"); user.setAge(10); model.addAttribute("user", user); return "test"; } @RequestMapping("/user") @ResponseBody public String getUserById(Integer id) { System.out.println("id=" + id); return "id=" + id; } }
訪問 http://localhost:8080/hello/thymeleaf
6、th標簽之th:action <--返回目錄
th:action 例子：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body> <form th:action="@{/user}"> id:<input type="text" name="id" value=""/> <input type="submit" value="提交" /> </form> </body> </html>
@Controller public class IndexController { @RequestMapping("/hello/thymeleaf") public String hello(Model model) { return "test"; } @RequestMapping("/user") @ResponseBody public String getUserById(Integer id) { System.out.println("id=" + id); return "id=" + id; } }
7、th標簽之th:each <--返回目錄
@RequestMapping("/hello/thymeleaf")
public String hello(Model model) {
List<User> userList = new ArrayList<>();
for (int i = 1; i <= 3; i++) {
User user = new User();
user.setId(i);
user.setName("張三" + i);
user.setAge(20 + i);
userList.add(user);
}
model.addAttribute("userList", userList);
return "test";
}
<body> <p th:each="user: ${userList}"> <span th:text="${user.id}" >xxx</span> <span th:text="${user.name}" >xxx</span> <span th:text="${user.age}" >xxx</span> </p> </body>
8、其他th標簽 <--返回目錄
th:name , th:id , th:src , th:href
th標簽之th:if
<span th:if="${sex eq 1}">男</span> <span th:if="${sex eq 2}">女</span>
th標簽之th:unless 與 th:if 相反
th標簽之th:switch/th:case
9、thymeleaf字面量 <--返回目錄
10、Thymeleaf的字符串拼接 <--返回目錄
11、Thymeleaf的內置對象 <--返回目錄
登陸錯誤消息的顯示
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
12、公共頁面抽取 <--返回目錄
1、抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2、引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}：模板名::選擇器 ~{templatename::fragmentname}:模板名::片段名 3、默認效果： insert的公共片段在div標簽中 如果使用th:insert等屬性進行引入，可以不用寫~{}： 行內寫法可以加上：[[~{}]];[(~{})]；
三種引入公共片段的th屬性：
th:insert：將公共片段整個插入到聲明引入的元素中
th:replace：將聲明引入的元素替換為公共片段
th:include：將被引入的片段的內容包含進這個標簽中
<!-- 公共片段 --> <footer th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </footer> 三種引入方式 <div th:insert="footer :: copy"></div> <div th:replace="footer :: copy"></div> <div th:include="footer :: copy"></div> 三種引入方式效果分別為 <div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> <div> copy; 2011 The Good Thymes Virtual Grocery </div>
另外，也可以在引入公共片段時傳入參數
<!‐‐引入側邊欄;傳入參數‐‐> <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
---