03.Thymeleaf介绍.txt
UP 返回
1.Thymeleaf 是java模板引擎，能处理HTML XML JS CSS或者纯文本 ，类似JSP Freemarker
自然模板
支持OGNL SpringEL表达式
遵从Web标准，支持html5
2.标准方言
<span th:text="..."> 需要引入命名空间
eg: <html xmlns:th="http://www.thymeleaf.org">
<head>
...
</head>
<body>
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
</body>
</html>
<span data-th-text="..."> 属于html5里的标准，自定义自己的属性，省去引入命名空间
2.1.变量表达式：${...}
<span th:text="${book.author.name}">
2.2.消息表达式：#{...}
<th th:text="#{header.address.city}">...</th>
也称为文本外部化，国际化或i18n
2.3.选择表达式：*{...}
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
指的是选择book的title属性的值(当前选择的对象，而变量表达式则是整个上下文变量映射中执行。只需在选择的对象遍历，效率快)
2.4.链接表达式：@{...}
2.4.1 相对链接(应用程序上下文不会作为URL的前缀)
<a th:href="@{../documents/report}">...</a>
2.4.2 服务器相对(同样没有应用程序上下文前缀)
<a th:href="@{~/documents/main}">...</a>
2.4.3 协议相对(就像绝对URL，但浏览器将使用在显示的页面中使用相同的HTTP或HTTPS协议)
<a th:href="@{//static.mycompany.com/res/initial}">...</a>
2.4.4 绝对地址
<a th:href="@{http://www.mycompany.com/main}">...</a>
2.5.分段表达式：th:insert 或 th:replace
比如有片段：
<div th:fragment="copy">
©2017<a href="https://hahaha.com">hahaha.com</a>
</div>
在别处要引用这个片段时:
<div th:insert="~{footer::copy}"></div>
replace与之类似
2.6.字面量
2.6.1 文本
<p>
Now you are looking at a <span th:text=" 'working web application' ">template file</span>.
</p>
2.6.2 数字
<p>The year is <span th:text="2019">1949</span>.</p>
<p>In two years,it will be <span th:text="2019+2">1949</span>.</p>
2.6.3 字面量(文字)
布尔：
<div th:if="${user.isAdmin()}==false">...
null：
<div th:if="${variable.something}==null">...
算术操作： + - * / %
<div th:with="isEven=(${prodStat.count}%2==0)">...
比较：> < >= <= (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-value=“${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>
3.设置属性值
3.1 设置任意属性值 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>
3.2 设置指定的属性的值（有很多，基本囊括了html里常用的属性，比如th:border th:class等等）
<form action="subscribe.html" th:action="@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}" />
</fieldset>
</form>
(注意两个设置方式有什么不同)
3.3 固定值布尔属性（有很多，比如th:nowrap th:readonly th:hidden th:selected等等）
<input type="checkbox" name="option2" checked /> <!-- HTML -->
<input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->
在thymeleaf中的表达方式:
<input type="checkbox" name="active" th:checked="${user.active}" />
4.迭代器
4.1 基本的迭代
<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>
4.2 状态变量
index 当前对象索引
count 当前对象索引(与上面的区别是从0开始)
size 迭代器元素总数
current 当前对象
even/odd 奇数/偶数
first 判断当前迭代器是否是第一个
last 判断当前迭代器是否是最后一个
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${prods}" 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>
5.条件语句：th:if th:unless switch
<th:if="${not #lists.isEmpty(prod.comments)}">view</a>
<th:unless="${#lists.isEmpty(prod.comments)}">view</a>
<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>
6.模板布局
6.1
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
©2017<a href="https://hahaha.com">hahaha.com</a>
</div>
</body>
</html>
引用模板:
<body>
...
<div th:insert="~{footer::copy}"></div>
</body>
6.2 不使用th:fragment
...
<div id="copy-section">
© 2019 <a href="https://hahaha.com">hahaha.com</a>
</div>
...
使用时：
<body>
...
<div th:insert="~{footer::#copy-section}"></div>
</body>
6.3 th:insert th:replace th:include
th:insert 简单地插入指定的片段作为正文的主标签
th:replace 用指定实际片段来替换其主标签
th:include 类似于th:insert，但不是插入片段，他只插入此片段的内容(3.x版本以后不在推荐使用)
eg:
对于片段：
<footer th:fragment="copy">
© 2019 <a href="https://hahaha.com">hahaha.com</a>
</footer>
使用三种方式引入模板：
<body>
...
<div th:insert="footer::copy"></div>
<div th:replace="footer::copy"></div>
<div th:include="footer::copy"></div>
</body>
最终的表现效果是：
<body>
...
<div>
<footer th:fragment="copy">
© 2019 <a href="https://hahaha.com">hahaha.com</a>
</footer>
</div>
<footer th:fragment="copy">
© 2019 <a href="https://hahaha.com">hahaha.com</a>
</footer>
<div>
© 2019 <a href="https://hahaha.com">hahaha.com</a>
</div>
</body>
7.属性优先级(由高到低)
1 th:insert th:replace 引入(Fragment inclusion)
2 th:each 迭代(Fragment iteration)
3 th:if th:unless th:switch th:case 条件判断(Conditional evaluation)
4 th:object th:with 局部变量(Local variable definition)
5 th:attr th:attrprepend th:attrappend 一般属性修改(General attribute modification)
6 th:value th:href th:src 特定属性修改(Specific attribute modification)
7 th:text th:utext Text(tag body modification)
8 th:fragment Fragment specification
9 th:remove Fragment removal
8.注释
除了传统的注释方式，还有Thymeleaf解析器级注释块，删除<!--/*和*/-->之间的所有内容
<!--/*-->
<div>
you can see me only before Thymeleaf processes me !
</div>
<!--/*-->
原型注释块：当模板静态打开时（比如原型设计），原型注释块所注释的代码将被注释，而在模板执行时，这些注释的代码就能被显示出来
<span>hello!</span>
<!--/*/
<div th:text="${...}">
...
</div>
/*/-->
<span>goodbye!</span>
9.内联：[[...]] [(...)]分别对应于th:text th:utext（前者会对一些特殊符号转译，后者不会）
<p>The message is "[(${msg})]"</p> → <p>The message is “This is <b>great!</b>”</p>
<p>The message is "[[${msg}]]"</p> → <p>The message is “This is <b>great!</b>”</p>
禁用内联：有时需要禁用内联这种机制，比如想输出[[...]] [(...)]文本内容
<p th:inline="none">A double array looks like this: [[1,2,3],[4,5]]!</p>
JS内联：
<script th:inline="javascript">
...
var username= /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
...
</script>
↓(模板解析如下)
<script th:inline="javascript">
...
var username= "Sebastian \"Fruity\" Applejuice";
...
</script>
CSS内联：
classname='main elems'
align='center'
<style th:inline="css">
.[[${classname}]]{
text-align:[[${align}]];
}
</style>
↓(模板解析如下)
<style th:inline="css">
.main\ elems{
text-align:center;
}
</style>
10.表达式基本对象(Thymeleaf模板初始化时就已经初始化好了，可以随时被访问)
10.1 基本对象：
#ctx 上下文对象。是org.thymeleaf.context.IContext或者org.thymeleaf.context.IWebContext的实现(java或者javaweb程序里用到的对象)
#local 直接访问与java.util.Locale关联的当前的请求
eg:
/**See javadoc API for class org.thymeleaf.context.IContext**/
${#ctx.locale}
${#ctx.variableNames}
/**See javadoc API for class org.thymeleaf.context.IWebContext**/
${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}
${#locale}
10.2 request/session等属性
param 用于检索请求参数
session 用于检索session参数
application 用于检索application/servlet上下文属性
eg:
${param.foo} ${param.size()} ${param.isEmpty()} ${param.containsKey('foo')} ...
${session.foo} ${session.size()} ${session.isEmpty()} ${session.containsKey('foo')} ...
${application.foo} ${application.size()} ${application.isEmpty()} ${application.containsKey('foo')} ...
10.3 Web上下文对象
#request 直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象
#session 直接访问与当期请求关联的javax.servlet.http.HttpSession对象
#servletContext 直接访问与当期请求关联的javax.servlet.ServletContext对象
eg:
${#request.getAttribute('foo')} ${#request.getParameter('foo')} ${#request.getContextPath()} ${#request.getRequestName()} ...
${#session.getAttribute('foo')} ${#session.id} ${#session.lastAccessedTime} ...
${#servletContext.getAttribute('foo')} ${#servletContext.contextPath} ...
11.eclipse引入Thymeleaf
参：https://blog.csdn.net/love_everybody/article/details/79870035
视频中修改gradle的方法完全不想记下来了！！！（辣鸡）
注：eclipse中添加资源目录的方法参：https://jingyan.baidu.com/article/77b8dc7fb733356174eab6ed.html
记得修改Thymeleaf的版本，否则有些标签一直报解析出错org.thymeleaf.exceptions.TemplateInputException
pom文件中：
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
</properties>
默认的版本为2.1.x
DOWN 返回