SpringBoot（四）：Thymeleaf模板引擎使⽤详解以及
Thymeleaf相⽐f。。。
SpringBoot 推荐使⽤Thymeleaf 来代替JSP，那么Spring为什么会推荐使⽤Thymeleaf呢？
Thymeleaf使⽤了⾃然的模板技术，意味着Thymeleaf的模板语法并不会破坏⽂档结构，模板依旧是有效的XML⽂档，
Thymeleaf相⽐freemarker和velocity:
Thymeleaf会在运⾏期替换掉静态值，freemaker和velocity则是连续的⽂本处理器；
三者格式相⽐： velocity  :  <p> $message <p>
FreeMarker  :  <p>  ${message}  <p>
Thymeleaf  :  <p th:text = "${message}">Hello！！<p>
由于Thymeleaf使⽤了XML DOM 解析器，因此它并不适合处理⼤规模的xml⽂件。
Thymeleaf --URL :
<a  th:href = "@{url}">text</a>
Thymeleaf --条件求值 :
<a  th : href = “@{url}“ th:unless = ${session.user} != null}>login</a>
Thymeleaf --for循环:
<tr th:each="prod:${prods}">
<td th:text="${prod.name}">Name</td>
<td th:text="${prod.price}">2.14</td>
<td th:text="${prod.instock}?#{true}:#{false}">yes</td>
</tr>
官⽅讲解Thymeleaf的特点
1.Thymeleaf 在有⽹络和⽆⽹络的环境下皆可运⾏，即它可以让美⼯在浏览器查看页⾯的静态效果，也可以让程序员在服务器查看带
数据的动态页⾯效果。这是由于它⽀持 html 原型，然后在 html 标签⾥增加额外的属性来达到模板+数据的展⽰⽅式。浏览器解释html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运⾏；当有数据返回到页⾯时，Thymeleaf 标签会动态地替换掉静态内容，使页⾯动态显⽰。
2.Thymeleaf 开箱即⽤的特性。它提供标准和 Spring 标准两种⽅⾔，可以直接套⽤模板实现 JSTL、 OGNL表达式效果，避免每天套
模板、改 Jstl、改标签的困扰。同时开发⼈员也可以扩展和创建⾃定义的⽅⾔。
3.Thymeleaf 提供 Spring 标准⽅⾔和⼀个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等
功能。
标准表达式语法
它们分为四类：
1.变量表达式
2.选择或星号表达式
3.⽂字国际化表达式
4.URL 表达式
变量表达式
变量表达式即 OGNL 表达式或 Spring EL 表达式(在 Spring 术语中也叫 model attributes)。如下所⽰：
${session.user.name}
它们将以HTML标签的⼀个属性来表⽰：
<span th:text="${book.author.name}">
<li th:each="book : ${books}">
选择(星号)表达式
选择表达式很像变量表达式，不过它们⽤⼀个预先选择的对象来代替上下⽂变量容器(map)来执⾏，如下：
*{customer.name}
被指定的 object 由 th:object 属性定义：
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
⽂字国际化表达式
⽂字国际化表达式允许我们从⼀个外部⽂件获取区域⽂字信息(.properties)，⽤ Key 索引 Value，还可以提供⼀组参数(可选).
#{main.title}
#{reated(${entryId})}
可以在模板⽂件中到这样的表达式代码：
<table>
...
<th th:text="#{header.address.city}">...</th>
<th th:text="#{untry}">...</th>
...
</table>
URL 表达式
URL 表达式指的是把⼀个有⽤的上下⽂或回话信息添加到 URL，这个过程经常被叫做 URL 重写。
@{/order/list}
URL还可以设置参数：
@{/order/details(id=${orderId})}
相对路径：
@{../documents/report}
让我们看这些表达式：
<form th:action="@{/createOrder}">
<a href="main.html" th:href="@{/main}">
变量表达式和星号表达有什么区别吗？
如果不考虑上下⽂的情况下，两者没有区别；星号语法评估在选定对象上表达，⽽不是整个上下⽂什么是选定对象？就是⽗标签的值，如下：
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
这是完全等价于：
<div th:object="${session.user}">
<p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>
当然，美元符号和星号语法可以混合使⽤：
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
表达式⽀持的语法
字⾯（Literals）
⽂本⽂字（Text literals）: 'one text', 'Another one!',…
数字⽂本（Number literals）: 0, 34, 3.0, 12.3,…
布尔⽂本（Boolean literals）:true, false
空（Null literal）:null
⽂字标记（Literal tokens）:one, sometext, main,…
⽂本操作（Text operations）
字符串连接(String concatenation):+
⽂本替换（Literal substitutions）:|The name is ${name}|
算术运算（Arithmetic operations）
⼆元运算符（Binary operators）:+, -, *, /, %
减号（单⽬运算符）Minus sign (unary operator):-
布尔操作（Boolean operations）
⼆元运算符（Binary operators）:and, or
布尔否定（⼀元运算符）Boolean negation (unary operator):!, not
⽐较和等价(Comparisons and equality)
⽐较（Comparators）:>, <, >=, <= (gt, lt, ge, le)
等值运算符（Equality operators）:==, != (eq, ne)
条件运算符（Conditional operators）
If-then:(if) ? (then)
If-then-else:(if) ? (then) : (else)
Default: (value) ?:(defaultvalue)
所有这些特征可以被组合并嵌套：
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${pe} ?: 'Unknown'))
⼏种常⽤的使⽤⽅法
1、赋值、字符串拼接
<p  th:text="${collect.description}">description</p>
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
字符串拼接还有另外⼀种简洁的写法
<span th:text="|Welcome to our application, ${user.name}!|">
2、条件判断 If/Unless
Thymeleaf中使⽤th:if和th:unless属性进⾏条件判断，下⾯的例⼦中，<a>标签只有在th:if中条件成⽴时才显⽰：
<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>
th:unless 于 th:if 恰好相反，只有表达式中的条件不成⽴，才会显⽰其内容。
也可以使⽤ (if) ? (then) : (else)这种语法来判断显⽰的内容
3、for 循环
<tr  th:each="collect,iterStat : ${collects}">
<th scope="row" th:text="${collect.id}">1</th>
<td >
<img th:src="${collect.webLogo}"/>
</td>
<td th:text="${collect.url}">Mark</td>
<td th:text="${collect.title}">Otto</td>
<td th:text="${collect.description}">@mdo</td>
<td th:text="${terStat.index}">index</td>
</tr>
iterStat称作状态变量，属性有：
index：当前迭代对象的 index（从0开始计算）
count: 当前迭代对象的 index(从1开始计算)
size：被迭代对象的⼤⼩
current：当前迭代变量
even/odd：布尔值，当前循环是否是偶数/奇数（从0开始计算）
first：布尔值，当前循环是否是第⼀个
last：布尔值，当前循环是否是最后⼀个
4、URL
URL 在 Web 应⽤模板中占据着⼗分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 @{...}来处理的。
如果需要 Thymeleaf 对 URL 进⾏渲染，那么务必使⽤ th:href，th:src 等属性，下⾯是⼀个例⼦
<!-- Will produce 'localhost:8080/standard/unread' (plus rewriting) -->
<a  th:href="@{/standard/{type}(type=${type})}">view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
设置背景
<div th:></div>
根据属性值改变背景
<div class="media-object resource-card-image"  th: ><⼏点说明：
上例中 URL 最后的(orderId=${o.id})表⽰将括号内的内容作为 URL 参数处理，该语法避免使⽤字符串拼接，⼤⼤提⾼了可读性
@{...}表达式中可以通过{orderId}访问 Context 中的 orderId 变量
@{/order}是 Context 相关的相对路径，在渲染时会⾃动添加上当前 Web 应⽤的 Context 名字，假设 context 名字为 app，那么结果应该是 /app/order
5、内联 js
内联⽂本：[[...]] 内联⽂本的表⽰⽅式，使⽤时，必须先⽤th:inline="text/javascript/none"激活，th:inlinjstl条件标签
e可以在⽗级标签内使⽤，甚⾄作为body 的标签。内联⽂本尽管⽐th:text的代码少，不利于原型显⽰。
<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>
js 附加代码：
/*[+
var msg = 'This is a working application';
+]*/
js 移除代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。