SpringBoot集成Thymeleaf
使用Spring Initializr創建項目時勾選Thymeleaf，如果不使用Spring Initializr，需要手動添加Thymeleaf的依賴：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Thymeleaf以html為原型，文件后綴是.html，使用Thymeleaf時創建html文件即可。
SpringBoot開箱即用，提供了大量的默認配置，一般使用默認配置即可。
SpringBoot的默認配置中，Thymeleaf的默認前綴是classpath:/resources/templates，默認后綴是.html。
開發、調試時關閉Thymeleaf的頁面緩存：
#默認為true，使用頁面緩存
spring.thymeleaf.cache=false
上線時改為true，或者刪掉、注釋掉。
Thymeleaf語法
1、th:text 顯示普通文本
<!-- 常量 --> <p th:text="hello"></p> <!-- "hello"會覆蓋原來的內容"你好" --> <p th:text="hello">你好</p> <!-- 標簽體中沒有內容時，可以寫成單標簽 --> <p th:text="hello" /> <!-- 可以進行數學運算 --> <!-- 3 --> <p th:text="1+2"></p> <!-- 1+2=3 --> <p th:text="'1+2=' + (1+2)"></p> <!-- 可以進行三元運算 --> <p th:text="${user.age}>=18 ? 已成年 : 未成年"></p> <!-- OGNL表達式${}可以取出controller傳遞的數據 --> <!-- 使用點號取屬性值時，底層是調用getter方法 --> <p th:text="'用戶名：' + ${user.username}"></p> <!-- OGNL表達式${}中可以調用方法 --> <p th:text="'用戶名：' + ${user.getUsername()}"></p> <p th:text="'轉換為全大寫：' + ${user.username.toUpperCase()}"></p> <!-- 用'xxx'+'xxx'這種方式拼接字符串很麻煩，Thymeleaf簡化了字符串拼接，字符串放在| |中即可 --> <p th:text="|用戶名：${user.username}|"></p>
Thymeleaf所有的指令都以th:開頭，th即Thymeleaf的前2個字母。
controller可以使用Model、ModelAndView來傳遞數據。
2、th:utext 具有th:text的功能，且可以解析標簽
//controller傳遞的數據中帶有html標簽 model.addAttribute("msg", "<h2>user</h2>");
<!-- th:text會把標簽作為普通字符串處理，不解析 --> <p th:text="${msg}"></p> <!-- th:utext會解析里面的標簽 --> <p th:utext="${msg}"></p>
注意：是controller向html傳遞的數據中有html標簽，不是直接在utext中寫標簽，如果是 <p th:utext="<h2>hello</h2>"></p> 這種直接在th:utext中寫標簽的，肯定會出錯。
3、th:object 處理對象
比如說controller傳了一個user對象，在html中要多處使用user對象，${user.xxx}，每次都要寫user，很麻煩，可以這樣：
<!-- th:object用${}直接取對象 --> <div th:object="${user}"> <!-- 后續用*{}來操作，把$換成*，省略對象名 --> <p th:text="'用戶名：'+*{username}"></p> <p th:text="'年齡：'+*{age}"></p> <p th:text="'手機號：'+*{tel}"></p> <p th:text="'住址：'+*{address}"></p> </div>
4、th:src、th:href、th:action 分別相當於html的src、href、action
<!-- 在SpringBoot中，比如我把圖片、js文件、css文件分別放在static下的img、js、css文件夾中，引用時路徑要寫成img/xxx,js/xxx,css/xxx --> <script src="js/vue.js"></script> <!-- 路徑放在@{}中 --> <script th:src="@{js/vue.js}"></script> <img src="img/mac_pro.png" /> <img th:src="@{img/mac_pro.png}" />
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入static/css下的css文件 --> <link href="css/a.css" type="text/css" rel="stylesheet" /> <link th:href="@{css/a.css}" type="text/css" rel="stylesheet" /> </head> <body> <!-- 訪問controller --> <a href="/user">訪問靜態頁面</a> <a th:href="@{/user}">訪問controller方法</a> </body> </html>
<form action="/login"></form> <form th:action="@{/login}"></form>
都是把路徑放在@{ }中。
5、Thymeleaf常用的內置對象
|
|
HttpServletRequest對象 |
|
|
HttpServletReponse對象 |
|
|
HttpSession對象 |
|
|
HttpServletContext對象 |
示例：
<!-- 內置對象要在${}中使用，訪問內置對象的屬性、方法時，不能像寫一句java代碼一樣，末尾不能加分號 --> <p th:text="'用戶名：' + ${#request.getParameter('username')}"></p>
6、th:if 條件判斷
<!-- 條件為true才顯示此元素，為false則不顯示 --> <p th:if="3>2">3>2</p> <p th:if="3>4">3>4</p> <!-- 可以用英文字母表示 --> <p th:if="3 gt 2">3 gt 2</p> <!-- 與、或只能用and、or，不能用&&、|| --> <p th:if="2>1 and 3>2">2>1 and 3>2</p> <!-- 非可以用!或者not--> <p th:if="! false">! false</p> <p th:if="not false">not false</p>
> gt 即greater than
< lt 即less than
>= ge 即greater equals
<= le 即less equals
== eq 即equals
!= ne 即not equals
7、th:each 迭代Array、List、Map
controller傳給html的數據：
//數組 String[] arr = {"蘋果", "李子", "梨子"}; model.addAttribute("arr", arr); //List ArrayList<String> list = new ArrayList<>(); list.add("語文"); list.add("數學"); list.add("英語"); model.addAttribute("list", list); //Map HashMap<String,Double> map = new HashMap<>(); map.put("香蕉", 4.0); map.put("菠蘿", 5.0); map.put("芒果", 6.0); model.addAttribute("map", map);
html：
<!-- Array，ele是一個臨時變量，代表一個元素 --> <table> <tr th:each="ele:${arr}"> <!-- 要用${}取，這是html不是jsp，${}要放在th指令中才行 --> <td th:text="${ele}"></td> </tr> </table> <!-- List --> <table> <tr th:each="ele:${list}"> <td th:text="${ele}"></td> </tr> </table> <!-- Map，entity是一個臨時變量，打代表一個鍵值對 --> <table> <tr th:each="entity:${map}"> <!-- 直接以key=value的形式顯示 --> <td th:text="${ele}"></td> </tr> </table> <!-- Map --> <table> <tr th:each="entity:${map}"> <!--key、value是關鍵字，不能任意取 --> <td th:text="${entity.key}"></td> <td th:text="${entity.value}"></td> </tr> </table> <!-- Array、List、Map都可以再有一個臨時變量，第一臨時變量表示一個元素，第二個臨時變量表示當前迭代元素的信息 --> <table> <tr th:each="entity,status:${map}"> <td th:text="${entity}"></td> <td th:text="${status}"></td> </tr> </table>
第二個臨時變量是一個對象，包含以下屬性，可用點號訪問：
- index 當前元素是迭代的第幾個元素，從0開始
- count 當前元素是迭代的第幾個元素，從1開始
- size 總的元素個數
- current 當前元素（如果是map，則是entity）
- odd|even 返回是否第奇|偶數個元素，返回boolean值。odd是奇，even是偶，跟字符數一致。
- first|last 是否為第一個|最后一個元素，返回Boolean值
8、th:switch 、th:case 相當於java的switch語句
<!-- 只顯示匹配的元素 --> <div th:switch="${role}"> <p th:case="common">普通用戶</p> <p th:case="manager">vip</p> <p th:case="svip">svip</p> <!-- *相當於default --> <p th:case="*">其它</p> </div>
9、th:include、th:include、th:replace 頁面引入
我們經常需要在一個頁面中引入另一個頁面，比如引入header.html，引入footer.html。
比如引入templates/footer.html：
<!-- @{}中寫路徑，/表示模板的根目錄templates，絕對路徑 --> <div th:include="@{/footer.html}"></div> <div th:insert="@{/footer.html}"></div> <div th:replace="@{/footer.html}"></div> <!-- 也可以使用相對路徑--> <div th:include="@{footer.html}"></div> <div th:insert="@{footer.html}"></div> <div th:replace="@{footer.html}"></div> <!-- Thymeleaf的后綴名是.html，可以省略后綴，直接寫文件名 --> <div th:include="@{footer}"></div> <div th:insert="@{footer}"></div> <div th:replace="@{footer}"></div>
3個指令的使用方法完全相同，不過th:include是把內容、效果包含進來，th:replace是用包含頁面的代碼替換當前標簽。
Thymelead 3.0以后，官方推薦用 th:insert 代替 th:include 。
只包含頁面的一部分
有時候只想包含頁面的某一部分，比如只包含header.html的nav，
比如把header.html、footer.html、aside.html等集中放在一個commons.html中：
<!-- 用th:fragment給片段起一個名字 --> <header th:fragment="header"> <div>header</div> </header> <footer th:fragment="footer"> <div>footer</div> </footer> <aside th:fragment="aside"> <div>aside</div> </aside>
引用：
<!-- 不是放在@{}中，沒有@{}，頁面、片段之間冒號隔開 --> <!-- 頁面寫成/commons.html、commons.html、commons都行 --> <div th:include="commons :: header"></div> <div th:insert="commons :: aside"></div> <div th:replace="commons :: footer"></div>
如果引用的片段就是本頁面中的，可以缺省頁面，直接寫成 ::片段
可以傳遞參數
<header th:fragment="info(name,age)"> <p th:text="${name}"></p> <p th:text="${age}"></p> </header>
<div th:include="commons :: info('chy',20)"></div> <div th:insert="commons :: info('chy',20)"></div> <div th:replace="commons :: info('chy',20)"></div>
10、th:remove 移除元素
經常需要自動移除元素，比如controller從數據庫查詢商品，把商品信息傳遞給html展示出來，
有時候沒有滿足條件的商品，傳遞的是null，這時候光禿禿地顯示一個<thead>表頭是不合適的，數據為空時應該自動移除表格|表頭，給出提示。
<!-- 有數據就什么都不移除（顯示table），沒數據就移除整個table --> <table th:remove="${goods_list}?none:all"> </table>
th:remove的值可以是：
- all 移除整個元素
- none 不移除什么（顯示整個元素）
- tag 只移除標簽。比如<table th:remove="tag"></table>是移除<table></table>這個東西，里面的<thead>、<tbody>、<tr>、<td>等標簽還在
- body 只移除body。<xxx>、</xxx>之間的東西叫做body，移除body后，<xxx>是空殼的
- all-but-first 移除所有子元素，只保留第一個子元素
說明
Thymeleaf是在html的基礎上擴展的，原型是html，擴展名也是.html，
所有在html可以寫的代碼，都可以寫在Thymeleaf中，
如果不想用Thymeleaf的語法，可以使用html的語法。