Thymeleaf学习
理解Thymeleaf
- Java模板引擎。能够处理HTML、XML，JavaScript、CSS甚至纯文本。类似JSP、Freemarker
- 自然模板。原型即页面
- 语法优雅易懂。OGNL、SpringEl
- 遵从Web标准。支持HTML5
Thymeleaf标准方言
如何识别标准方言
<span th:text="...">
<span data-th-text="...">
变量表达式
语法：${...}
<span th:text="${book.author.name}">
消息表达式
语法：#{...}
<table>
...
<th th:text"#{header.address.city}"">...</th>
...
</table>
- 也称为文本外部话、国际化或i18n
选择表达式
语法：*{...}
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
- 与变量表达式区别：他们是在当前选择的对象而不似乎整个上下文变量映射上执行
链接表达式
语法：@{...}
链接表达式可以是相对的，在这种情况下，应用程序上下文将不会作为URL的前缀。
<a th:href="@{../documents/report}">...</a>
也可以是服务器相对（同样，没有应用程序上下文前缀）：
<a th:href="@{~/documents/report}">...</a>
和协议相对（就像绝对URL，但浏览器将使用在显示的页面中使用的相同的HTTP或HTTPS协议）：
<a th:href="@{//static.mycompany.com/res/initial}">...</a>
当然，Link表达式可以是绝对的：
<a th:href="@{http://www.mycompany.com/main}">...</a>
分段表达式
语法：th:insert或th:replace
字面量（文字）
文本
<p>
Now you are looking at a <span th:text = "'working web application'">template file</span>
</p>
数字
<p>The year is <span th:text="2013">1492</span>.</p>
布尔
<div th:if="${user.isAdmin()} == false">...</div>
null
<div th:if="${variable.something} == null">...
算术操作
+、-、*、/、%
比较和等价
比较：>、<、>=、<= (gt、lt、ge、le)
<ul class="pagination" data-th-if="${page.totalPages le 7}" >
等价：== ,!= (eq、ne)
<option data-th-each="i : ${#arrays.toIntegerArray({5,10,40,100})}" data-th-calue="${i}" data-th-selected="${i eq page.size}" data-th-text="${i}"></option>
条件运算符
<tr th:class="${row.even} ? 'even' : 'odd'">
...
</tr>
无操作
_
<span th:text"${user.name} ? : _">no user authenticated<?span>
设置属性值
设置任意属性值th:attr
<form action="subscribe.html" th:attr="action=@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}" />
</fieldset>
<form>
设置值到指定的属性
<form action="subscribe.html" th:action="@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}" />
</fieldset>
<form>
固定值布尔属性
<input type="checkbox" name="active" th:checked="${user.active}">
迭代器
基本的迭代th:each
<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>
状态变量
- index,count,size,current,even/odd.first,last
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${pords}" th:class="${iterStat.odd? 'odd'}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">Yes</td>
</tr>
</table>
条件语句
th:if 、th:unless
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>
条件语句
switch
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
模板布局
定义和引用片段
<!DOCTYPE html>
<body>
<div th:fragment="copy">
©2017<a href="https://waylau.com">waulau.com</a>
</div>
</body>
</html>
<body>
...
<div th:insert="~{footer :: copy}"></div>
</body>
不使用th:fragment
...
<div id="copy-section">
©2017<a href="https://waylau.com">waulau.com</a>
</div>
...
<body>
...
<div th:insert="~{footer :: #copy-section}"></div>
</body>
th:insert、th:replace、th:include三者区别
- th:insert它将简单地插入指定的片段作为正文的主标签
- th:replace用指定实际片段来替换其主标签
- th:include类似于th:insert,但不插入片段它只插入此片段的内容。（3.x版本后，不再推荐使用）
注释
Thymeleaf解析器级注释块
- 删除<!--/和/--!>之间的所有内容
<!--/*-->
<div>
you can see me onlu before Thymeleaf processes me!
</div>
<!--*/-->
原型注释块
- 当模块静态打开时（比如原型设计），原型注释块所注释的代码将被注释，而在模板执行时，这些注释的代码，就能被显示出来。
<span>hello!</span>
<!--/*/
<div th:text="${...}">
...
</div>
/*/-->
<span>goodbye!</span>
内联
内联表达式
- [[...]]或[(...)]分别对应于th:text和th:utext
<p>The message is "[(${msg})]"</p>
禁用内联
- 有时需要金庸这种机制，比如，想输出[[...]]或[(...)]文本内容
<p th:inline="none">A double array looks like this : [[1,2,3],[4,5]]!</p>
JavaScript内联
<script th:inline="javascript">
...
var username = /*[[${session.uer.name}]]*/ "Gertrud Kiwifruit"
...
</script>
CSS内联
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
表达式基本对象
基本对象
-
ctx:上下文对象。是org,thymeleaf.context.IContext后者org.thymeleaf.context.IWebContext的实现
-
locale:字节访问与java.util.Locale关联的当前的请求
request/session等属性
- param:用于检索请求参数
- session:用于减速session属性
- application：用于检索application/servlet上下文属性
Web上下文对象
-
request:直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象
-
session：直接访问与当前请求关联的javax.servlet.http.HttpSession对象
-
servletContext：直接访问与当前请求关联的javax.servlet.ServletContext对象