什么是thymeleaf框架
- 簡介： thymeleaf就是一個模板引擎
- 模板引擎：實現頁面內容動態化的技術思想（前端開發后端開發都在用）
- 較流行：
a) Freemarker
b) Velocity
c) Thymeleaf
- 最大特點
a) 原型即界面的美學
- 本質
jsp+jstl的替代方案
thymeleaf整合
導入依賴包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置文件全部默認
開發階段：禁用緩存
thymeleaf標簽的使用
th:text
文本替換 注：字符串拼接符+
th:utext
文本替換，支持html
th:if
如果if的條件成立，顯示當前標簽，否則不顯示
th:unless 如果 取反 除非
Unless正好相反
th:each
遍歷
th:style
表達式
${}（OGNL表達）
獲取不同作用域中的值
內置對象
Dates
Calendars
Numbers
Strings
Objects
…
本質：就是封裝工具類中的一些方法
url表達式
基本屬性（替換）
th:text
th:utext
th:style
注：配合表達式使用${}
字符串拼接兩種方式
+運算符
把拼接的內容放到|中，例如|hello ${world}|
流程判斷屬性
th:if
th:unless (和if相反)
th:switch
th:case
注：當前標簽是否顯示
循環屬性
th:each
特性屬性
th:object
注：配合*表達式來取值，例如*{userName}
*表達式和$表達式的區別
作用域不同，
*表達式作用范圍是子節點
$表達式是整個頁面
th:inline:指定當前標簽內容的類型
None: 什么都不是
Text: 指定標簽內部的是文本
Javascript: 指定標簽內部的是js代碼
鏈接屬性
Th:src
Th:href
Th:action
注：配合url表達式屬性 例如@{}
代碼復用屬性
th:include 把碎片節點中的內容插入當前節點
th:replease 把碎片節點替換掉當前節點
th:insert 把碎片節點插入到當前節點
th:fragment //碎片
測試Thymeleaf中的標簽
1.controller類
package com.seecen.thymeleaf.thymeleaf.controller; import com.seecen.thymeleaf.thymeleaf.pojo.User; import lombok.Data; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpSession; import java.util.ArrayList; import java.util.Date; import java.util.List; import java.util.Random; @Controller public class HelloController { @RequestMapping("hello") public String hello(Model model, HttpSession session){ int age = (int) (Math.random()*3+18); User user = new User(); user.setUserId(1); user.setUserName("林大大"); user.setAge(age); user.setCreateTime(new Date()); User user2 = new User(); user2.setUserId(2); user2.setUserName("嚶嚶嚶"); user2.setAge(19); user2.setCreateTime(new Date()); List<User> list = new ArrayList<>(); list.add(user); list.add(user2); session.setAttribute("user",user); model.addAttribute("list",list); model.addAttribute("name","2333"); model.addAttribute("msg","w(ﾟДﾟ)w"); return "hello"; } }
2.html頁面（
xmlns:th="http://www.thymeleaf.org" 記住加
）
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<head th:include="component::head('歡迎頁面')">-->
<!--</head>-->
<body>
<h2>thymeleaf</h2>
<p th:text="'hello,'+ ${session.user.userName} + '!!'">嚶嚶嚶</p> <!--文本替換-->
<p th:text="|hello,${session.user.userName}, 另一種拼接方法 |">嚶嚶嚶</p>
<p th:utext="|<a href='#'>hello, ${session.user.userName}</a>|"></p>
<div>
<span th:text="|歡迎 [${session.user.userName}] 使用xxx系統|" th:if="${session.user!=null}"
>歡迎，[嚶嚶嚶] 使用xxx系統</span>
<!-- if的反轉-->
<a th:unless="${session.user==null}">退出</a>
</div>
<div>
<table border="1">
<tr>
<td>編號</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</tr>
<tr th:each="user, S : ${list}" th:style="'background-color:'+${S.even?'blue':'aqua'}" style="background-color: aqua">
<td th:text="${S.count}">編號</td>
<td th:text="${user.userName}">姓名</td>
<td th:text="${user.age}">年齡</td>
<td>
<a href="#" th:href="@{'/update/'+${user.userId}}">修改</a>
<a href="#" th:href="@{|/update/${user.userId}}">修改</a>
<a href="#" th:href="@{/update/(id=${user.userId},age=${user.age})}">修改</a>
<a href="#">刪除</a>
</tr>
</table>
</div>
<div>
<h2>thymeleaf內置對象</h2>
<div th:text="${#dates.format(session.user.createTime,'yyyy-MM-dd')}">2000-1-1</div>
<div th:text="${#dates.createNow()}"></div>
<div th:text="${#dates.createToday()}"></div>
<div th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm:ss')}"></div>
<!-- 字符串相關的-->
<div th:text="'name屬性的長度'+${#strings.length(name)}"></div>
<div th:text="'world=WORLD?:'+${#strings.equalsIgnoreCase(name,'WORLD')}"></div>
<div th:text="${#strings.randomAlphanumeric(6)}"></div>
<!-- 數字相關-->
<div th:text="${#numbers.formatDecimal(6666.666,1,2)}">0.99</div>
<!-- 集合相關-->
<div th:text="'#lists.size'+${#lists.size(list)}"></div>
<!-- url表達式-->
<a href="#" th:href="@{/user/list}">用戶列表頁面</a>
<!-- 流程判斷-->
<ul th:switch="${session.user.age}">
<li th:case="${18}">18歲</li>
<li th:case="${19}">19歲</li>
<li th:case="20">20歲</li>
</ul>
<!-- 修改頁面-->
<div th:object="${session.user}">
<table>
<tr>
<td>用戶名</td>
<td><input type="text" th:value="*{userName}"></td> <!--臨時變量-->
<td><input type="text" th:value="${session.user.userName}"></td>
</tr>
<tr>
<td>編號</td>
<td><input type="password" th:value="*{userId}"></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" th:value="*{age}"></td>
</tr>
</table>
</div>
<div>
<p>hello [[${name}]]</p>
<p th:inline="none">hello [[${name}]]</p>
<script th:inline="text"> //<!--指定標簽類型 text javascrpit-->
// var msg = [[${msg}]];
// var msg = '[[${msg}]]';
alert(msg); </script>
</div>
<div th:include="component/commons::copy"></div> <!--引入-->
<div th:replace="component/commons::copy"></div> <!--替換-->
<div th:insert="component/commons::copy"></div> <!--插入-->
</div>
</body>
</html>
還一些標簽不好展示 如（
<div th:include="component/commons::copy"></div> <!--引入-->
<div th:replace="component/commons::copy"></div> <!--替換-->
<div th:insert="component/commons::copy"></div> <!--插入-->
這幾個
）
3.效果
還有很多標簽
