##简述
目前学了一半，发现他和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>