1 Thymeleaf介紹
- 在spring的官方中并不支持jsp的渲染模板，對jsp并不友好，推薦使用Thymeleaf、FreeMarker等模板引擎
- .html（不能取域?qū)ο蟮闹担?/li>
- 能寫Java代碼的HTML，但是thymsleaf可以取值存值
- 特點(diǎn)：
- 動靜結(jié)合：Thymeleaf頁面可以獨(dú)立運(yùn)行，不依賴與服務(wù)器(jsp不可以)
- 開箱即用：支持標(biāo)準(zhǔn)的模板語言，無需導(dǎo)入第三方配置
- SpringBoot完美整合：SpringBoot支持Thymeleaf的啟動器
2 Thymeleaf入門
2.1 導(dǎo)入依賴
- 創(chuàng)建導(dǎo)入web起步依賴
- Thymeleaf模板起步依賴
<!-- Thymeleaf模板起步依賴 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.2 編寫Thymeleaf頁面
頁面默認(rèn)情況下必須定義在templates文件夾中
templates文件夾默認(rèn)不能直接訪問（不是靜態(tài)資源），必須通過Controller轉(zhuǎn)發(fā)訪問
- xmlns:th xml name space ：Thymeleaf 必須導(dǎo)入Thymeleaf名稱空間
- msg即為后端的key
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello,Thymeleaf</h1>
<h1 th:text="${msg}"></h1>
</body>
</html>
2.3 編寫Controller
Thymeleaf默認(rèn)的視圖解析器前綴和后綴
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
@Controller
public class TestController {
@RequestMapping("hello")
public String test(Model model){
model.addAttribute("msg","Hello,Thymeleaf?。。?！");
return "hello";
}
}
3 Thymeleaf語法
3.1 th:text 標(biāo)簽
th:text 標(biāo)簽：表示獲取域?qū)ο笾械膬?nèi)容
- 簡單類型
- 對象類型
- Map集合
<h1>th:text標(biāo)簽取值</h1>
<!--簡單類型-->
<span th:text="${name}"></span>
<span th:text="${age}"></span>
<span th:text="${money}"></span><br>
<!--對象類型-->
<span th:text="${user.username}"></span>
<span th:text="${user.password}"></span>
<span th:text="${user.salary}"></span><br>
<!--Map集合-->
<span th:text="${k1}"></span>
<span th:text="${k2}"></span>
<span th:text="${k3}"></span><br>
3.2 th:each標(biāo)簽
th:each標(biāo)簽 用于獲取集合中的值
<h1>th:each標(biāo)簽遍歷</h1>
<!--集合類型-->
<table width="80%" align="center" border="1px" cellspacing="0px">
<tr>
<th>id</th>
<th>用戶名</th>
<th>密碼</th>
<th>工資</th>
</tr>
<tr th:each="u:${userList}">
<td th:text="${u.id}"></td>
<td th:text="${u.username}"></td>
<td th:text="${u.password}"></td>
<td th:text="${u.salary}"></td>
</tr>
</table>
3.3 th:if標(biāo)簽
th:if標(biāo)簽 用于做if判斷
<h1>th:if標(biāo)簽判斷</h1>
<span th:if="${age<18}">未成年</span>
<span th:unless="${age<18}">成年</span>
3.4 th:inline標(biāo)簽
th:inline 內(nèi)聯(lián)標(biāo)簽，嵌套在標(biāo)簽內(nèi)部使用
<h1>th:inline標(biāo)簽內(nèi)聯(lián)</h1>
<!--html內(nèi)聯(lián)-->
<span th:inline="text">姓名為：[[${name}]]</span>
<!-- css內(nèi)聯(lián)(css中取值) -->
<style th:inline="css">
span{
color:[[${color}]]
}
</style>
<!-- javascript內(nèi)聯(lián)(javascript中取值) -->
<script th:inline="javascript">
console.log([[${name}]]);
</script>
3.5 碎片標(biāo)簽
<!--定義碎片-->
<div th:fragment="header" style="height: 200px;background-color: #889988">
網(wǎng)頁頭部
</div>
<div th:fragment="footer" style="height: 200px;background-color: red">
網(wǎng)頁底部
</div>
直接引入頁面
- 引入頭部頁面
- 引入尾部頁面
<!-- 引入頭部頁面 -->
<div th:include="header"></div>
<h1>頁面正文內(nèi)容</h1>
<!-- 引入尾部頁面 -->
<div th:include="footer"></div>
引入頁面中的碎片
注意：如果引入碎片那么css樣式會失效，那么需要使用th:replace標(biāo)簽
th:replace="header::header" 前面的header表示頁面名，后面表示碎片名稱文章來源：http://www.zghlxwxcb.cn/news/detail-430391.html
<!-- 引入頭部片段-->
<div th:replace="header::header"></div>
<h1>頁面正文內(nèi)容</h1>
<!-- 引入尾部片段 -->
<div th:replace="footer::footer"></div>
3.日期處理
日期處理接近于固定格式
<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span>文章來源地址http://www.zghlxwxcb.cn/news/detail-430391.html
<!--日期處理-->
<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span>
到了這里，關(guān)于SpringBoot -04 Thymeleaf入門與基礎(chǔ)語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
