##簡述
目前學了一半，發現他和jsp是功能重疊的，即實現網頁展示數據的邏輯。但是卻比jsp有優勢，目前發現的是
- 他是靜態的，這意味着前端開發可以隨時打開thymeleaf的html文件，對頁面進行檢查。而jsp不能。
- 他的include功能在靜態模式下依然可以使用。
- 相比來說感覺thymeleaf頁面更簡介。【這個不是很重要】
反正學了一半感覺thymeleaf更好用，它可以讓前端後端用同樣的html代碼，來進行開發，這樣前後端能夠更好的協調工作。
<html xmlns:th="http://www.thymeleaf.org">
</html>
##正片
###普通數據傳入與顯示
/////////////////////////////////////////////////////////
//Controller .java
/////////////////////////////////////////////////////////
//String
String htmlContent = "<p style='color:red'> 紅色文字</p>";
m.addAttribute("htmlContent", htmlContent);
//Object
Product currentProduct =new Product(5,"product e", 200);
m.addAttribute("currentProduct", currentProduct);
//////////////////////////////////////////////////////
//Thymeleaf .html
/////////////////////////////////////////////////////////
//text 顯示原始文本
<p th:text="${htmlContent}" ></p>
//輸出和html代碼，將顯示紅色字體
<p th:utext="${htmlContent}" ></p>
//訪問對象屬性
<div class="showing">
<h2>顯示對象以及對象屬性</h2>
<p th:text="${currentProduct}" ></p>
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>
</div>
//訪問對象屬性2
<div class="showing" th:object="${currentProduct}">
<h2>*{}方式顯示屬性</h2>
<p th:text="*{name}" ></p>
</div>
###邏輯控制
#####if的使用
/////////////////////////////////////////////////////////
//Controller .java
/////////////////////////////////////////////////////////
//td的邏輯控制
boolean testBoolean = true;
m.addAttribute("testBoolean", testBoolean);
//////////////////////////////////////////////////////
//Thymeleaf .html
/////////////////////////////////////////////////////////
//if邏輯控制
<div class="showing">
<p th:if="${testBoolean}" >如果爲true 則顯示</p>
<p th:if="${not testBoolean}" >如果爲false 則顯示</p>
</div>
#####輸出ObjectList
<table>
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>price</td>
</tr>
</thead>
<tbody>
<tr th:each="p: ${ps}">
<td th:text="${p.id}">1</td>
<td th:text="${p.name}">product 1</td>
<td th:text="${p.price}">500</td>
</tr>
</tbody>
</table>
這裏面可以添加遍歷狀態變量 status ,他的屬性有
- ndex 屬性, 0 開始的索引值
- count 屬性, 1 開始的索引值
- size 屬性, 集合內元素的總量
- current 屬性, 當前的迭代對象
- even/odd 屬性, boolean 類型的, 用來判斷是否是偶數個還是奇數個
- first 屬性, boolean 類型, 是否是第一個
- last 屬性, boolean 類型, 是否是最後一個
注意:在使用的時候一定要在each裏面聲明
<tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}">
#####放入select 裏
<select size="10">
<option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==1}" th:text="${p.name}"></option>
</select>
###頁面include
#####引入其他頁面片段
<!--假設有一個html名字叫做 includeDemo -->
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">
<p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">
<p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>
<!--在主html中引入 includeDemo -->
<div class="showing">
<div th:replace="includeDemo::footer1"></div>
<div th:replace="includeDemo::footer2(2015,2018)"></div>
</div>
#####引入其他靜態資源
<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
###內置工具的使用
thymeleaf裏有很多工具,這裏只記錄一個,然後如果需要其他的可以參考
假設這裏傳入一個 new (Java類 Date
<div class="showing date">
<p th:text="${now}"></p>
<p th:text="${#dates.format(now)}"></p>
<p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
</div>
###關於鏈接的使用
使用 @{} 進行轉爲鏈接 參數的話要 寫在括號裏 eg.
<td><a th:href="@{/editCategory(id=${c.id})}">編輯</a></td>