前端渲染模板（一）：Thymeleaf

一、使用

　　本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法。

　　1 资源文件的约定目录结构

Maven的资源文件目录：/src/java/resources
spring-boot项目静态文件目录：/src/java/resources/static
spring-boot项目模板文件目录：/src/java/resources/templates
spring-boot静态首页的支持，即index.html放在以下目录结构会直接映射到应用的根目录下：

classpath:/META-INF/resources/index.html
classpath:/resources/index.html
classpath:/static/index.html
calsspath:/public/index.html

　　因此，SpringBoot默认的静态资源文件应该放在resources/tatic下，而静态页面应该放在resources/templates文件夹下，这两个文件不会自动创建，需要手动创建，如下图所示：

　　2 Maven依赖：

1         <!-- thymeleaf 前端渲染模板依赖 -->
2         <dependency>
3             <groupId>org.springframework.boot</groupId>
4             <artifactId>spring-boot-starter-thymeleaf</artifactId>
5             <version>2.0.0.RELEASE</version>
6         </dependency>

　　3 html页面中（<html>标签处）：

1 <html xmlns="http://www.w3.org/1999/xhtml"
2       xmlns:th="http://www.thymeleaf.org"
3       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

　　4 application.properties配置（application.yml则根据格式相应变化即可）：

 1 # THYMELEAF (ThymeleafAutoConfiguration)  
 2 #开启模板缓存（默认值：true）  
 3 spring.thymeleaf.cache=true   
 4 #Check that the template exists before rendering it.  
 5 spring.thymeleaf.check-template=true  
 6 #检查模板位置是否正确(默认值:true)  
 7 spring.thymeleaf.check-template-location=true  
 8 #Content-Type的值（默认值：text/html）  
 9 spring.thymeleaf.content-type=text/html  
10 #开启MVC Thymeleaf视图解析(默认值：true)  
11 spring.thymeleaf.enabled=true  
12 #模板编码  
13 spring.thymeleaf.encoding=UTF-8  
14 #要被排除在解析之外的视图名称列表，用逗号分隔  
15 spring.thymeleaf.excluded-view-names=  
16 #要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)  
17 spring.thymeleaf.mode=HTML5  
18 #在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）  
19 spring.thymeleaf.prefix=classpath:/templates/  
20 #在构建URL时添加到视图名称后的后缀（默认值：.html）  
21 spring.thymeleaf.suffix=.html  
22 #Thymeleaf模板解析器在解析器链中的顺序。默认情况下，它排第一位。顺序从1开始，只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。  
23 spring.thymeleaf.template-resolver-order=  
24 #可解析的视图名称列表，用逗号分隔  
25 spring.thymeleaf.view-names=

　　配置好以上的代码，此时在html模板文件中动态的属性使用th:命名空间修饰，就可以使用Thymeleaf了。

二、语法

　　1 引用静态资源文件：

　　　　比如CSS和JS文件，语法格式为“@{}”，如@{/js/blog/blog.js}会引入/static目录下的/js/blog/blog.js文件。

　　2 访问spring-mvc中model的属性：

　　　　语法格式为“${}”，如${user.id}可以获取model里的user对象的id属性，类似JSTL。

　　3 循环：

　　　　在html的标签中，加入th:each=“value:${list}”形式的属性，如<span th:each=”user:${users}”></span>可以迭代users的数据

　　4 判断：　　　　

在html标签中，加入th:if=”表达式”可以根据条件显示html元素

1 <span th:if="${not #lists.isEmpty(blog.publishTime)}"> 
2 　　<span id="publishtime" th:text="${#dates.format(blog.publishTime, 'yyyy-MM-dd HH:mm:ss')}"></span> 
3 </span>

以上代码表示若blog.publishTime时间不为空，则显示时间。

5 时间格式化：

1 ${#dates.format(blog.publishTime,'yyyy-MM-dd HH:mm:ss')} //表示将时间格式化为”yyyy-MM-dd HH:mm:ss”格式化写法与Java格式化Date的写法是一致的。

　　6 字符串拼接：

　　　　有两种形式，比如拼接这样一个URL:/blog/delete/{blogId}

第一种：th:href="'/blog/delete/' + ${blog.id }"
第二种：th:href="${'/blog/delete/' + blog.id }"

7 为CSS样式的某些路径使用thyemleaf表达式：

1 <div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

　　8 使用th:utext="@{}" 可以让变量里面的html标签被解析

三、表达式

　　1 简单表达式（simple expressions）

1 　　${...} 变量表达式
2 
3 　　*{...} 选择变量表达式
4 
5 　　#{...} 消息表达式
6 
7 　　@{...} 链接url表达式

　　2 字面量

1 　　'one text','another one!',... 文本
2 
3 　　0,34,3.0,12.3,... 数值
4 
5 　　true false 布尔类型
6 
7 　　null 空
8 
9 　　one,sometext,main 文本字符

　　3 文本操作

1 　　+ 字符串连接
2 
3 　　|The name is ${name}| 字符串连接

　　4 算术运算

1 　　+ , - , * , / , % 二元运算符
2 
3 　　- 负号（一元运算符）

　　5 布尔操作

1 　　and,or 二元操作符
2 
3 　　!,not 非（一元操作符）

　　6 关系操作符

1 　　> , < , >= , <= (gt , lt , ge , le)
2 
3 　　== , != (eq, ne)

　　7 条件判断

1 (if) ? (then) if-then
2 
3 (if) ? (then) : (else) if-then-else
4 
5 <tr th:class="${row.even}? 'even' : 'odd'">
6 ...
7 </tr>

条件表达式中的三个部分自身也可以是表达式，也可以是变量(${...}, *{...}), 消息(#{...}), URL (@{...}) 或字面量 ('...')
条件表达式也可以使用括号来嵌套：

1 <tr th:class="${row.even}? (${row.first}? 'first' : 'even') : 'odd'">
2 ...
3 </tr>

　　else表达式也可以省略，当条件为false时，会返回null：

1 <tr th:class="${row.even}? 'alt'">
2 ...
3 </tr>
4 (value) ?: (defaultvalue) Default

　　只有在第一个表达式返回null时，第二个表达式才会运算

　　8 表达式工具对象

 1 #dates 与java.util.Date对象的方法对应，格式化、日期组件抽取等等
 2 #calendars 类似#dates，与java.util.Calendar对象对应
 3 #numbers 格式化数字对象的工具方法
 4 #strings 与java.lang.String对应的工具方法：contains、startsWith、prepending/appending等等
 5 #objects 用于对象的工具方法
 6 #bools 用于布尔运算的工具方法
 7 #arrays 用于数组的工具方法
 8 #lists 用于列表的工具方法
 9 #sets 用于set的工具方法
10 #maps 用于map的工具方法
11 #aggregates 用于创建数组或集合的聚合的工具方法
12 #messages 用于在变量表达式内部获取外化消息的工具方法，与#{…}语法获取的方式相同
13 #ids 用于处理可能重复出现（例如，作为遍历的结果）的id属性的工具方法

　　9 链接URL

URL在web模板中是一级重要元素，使用@{…}表示

URL的类型：

　　绝对URL：

http://www.thymeleaf.org

　　相对URL：

1 页面相对： user/login.html
2 上下文相对：/itemdetails?id=3 (服务器上下文名称会被自动添加)
3 服务器相对：~/billing/processInvoice（允许调用同一服务器上的另一个上下文中的URL）
4 协议相对：//code.jquery.com/jquery-2.0.3.min.js

Thymeleaf在任何情况下都可以处理绝对URL，对于相对URL，则需要使用一个实现了IWebContext接口的上下文对象，这个对象包含了来自HTTP请求的信息，这些信息用于创建相对链接。

1 <!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
2 <a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
3 
4 <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
5 <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
6 
7 <!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
8 <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

　　10 预处理
　　Thymeleaf提供预处理表达式的功能。

它是在表壳式正常执行前执行的操作，允许修改最终将要被执行的表达式。

预处理表达式跟正常的一样，但被两个下划线包围住，例如：__${expression}__

假设有一个i18n消息文件Message_fr.properties，里面有一个条目包含了一个调用具体语言的静态方法的OGNL表达式：

article.text=@myapp.translator.Translator@translateToFrench({0})

　　Messages_es.properties中的等价条目：

article.text=@myapp.translator.Translator@translateToSpanish({0})

　　可以根据locale先创建用于运算表达式的标记片段，本例中，先通过预处理选择表达式，然后让Thymeleaf处理这个选择出来的表达式：

<p th:text="${__#{article.text('textVar')}__}">Some text here...</p>

　　对于locale为French的情况，上面的表达式经过预处理后，得出的等价物如下：

<p th:text="${@myapp.translator.Translator@translateToFrench(textVar)}">Some text here...</p>

四、设置属性值

　　1 th:attr 任何属性值

1 <form action="subscribe.html" th:attr="action=@{/subscribe}">
2 　　<fieldset>
3 　　　　<input type="text" name="email" />
4 　　　　<input type="submit" value="Subscribe me!" th:attr="value=#{subscribe.submit}"/>
5 　　</fieldset>
6 </form>

　　多个属性一起设置，用逗号隔开

<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

　　2 设置指定属性

th:abbr
th:accept
th:accept-charset
th:accesskey
th:action
th:align
th:alt 
th:archive 
th:audio
th:autocomplete 
th:axis 
th:background
th:bgcolor 
th:border 
th:cellpadding
th:cellspacing 
th:challenge 
th:charset
th:cite 
th:class 
th:classid ...

1 <input type="submit" value="Subscribe me!" th:value="#{subscribe.submit}"/>
2 <form action="subscribe.html" th:action="@{/subscribe}">
3 <li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>

　　设置多个属性在同一时间有两个特殊的属性可以这样设置： th:alt-title 和 th:lang-xmllang

th:alt-title 设置 alt 和 title
th:lang-xmllang 设置 lang 和 xml:lang

1 <img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
2 
3 <img src="../../images/gtvglogo.png"th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />
4 
5 <img src="../../images/gtvglogo.png"th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

　　前置和后置添加属性值 th:attrappend 和 th:attrprepend

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

　　编译后：

<input type="button" value="Do it!" class="btn warning" />

　　还有两个特定的添加属性 th:classappend 和 th:styleappend

<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

　　3 修复的布尔属性

<input type="checkbox" name="active" th:checked="${user.active}" />

　　所有修复的布尔属性：

th:async 
th:autofocus
th:autoplay
th:checked
th:controls
th:declare
th:default
th:defer
th:disabled
th:formnovalidate
th:hidden
th:ismap
th:loop
th:multiple
th:novalidate
th:nowrap
th:open
th:pubdate
th:readonly
th:required
th:reversed
th:scoped
th:seamless
th:selected

　　HTML5友好的属性及元素名

1 <table>
2 <tr data-th-each="user : ${users}">
3 <td data-th-text="${user.login}">...</td>
4 <td data-th-text="${user.name}">...</td>
5 </tr>
6 </table>

　　注：data-{prefix}-{name}是编写HTML5自定义属性的标准语法，不需要开发者使用th:*这样的命名空间，Thymeleaf让这种语法自动对所有dialect都可用。

五、遍历

　　1 基础

1 <tr th:each="prod : ${prods}">
2 　　<td th:text="${prod.name}">Onions</td>
3 　　<td th:text="${prod.price}">2.41</td>
4 　　<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
5 </tr>

　　可遍历的对象：实现java.util.Iterable、java.util.Map（遍历时取java.util.Map.Entry）、array、任何对象都被当作只有对象自身一个元素的列表

　　2 状态

当前遍历索引，从0开始，index属性
当前遍历索引，从1开始，count属性
总元素数量，size属性
每一次遍历的iter变量,current属性
当前遍历是even还是odd，even/odd布尔属性
当前遍历是第一个，first布尔属性
当前遍历是最后一个，last布尔属性

1 <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
2 　　<td th:text="${prod.name}">Onions</td>
3 　　<td th:text="${prod.price}">2.41</td>
4 　　<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
5 </tr>

若不指定状态变量，Thymeleaf会默认生成一个名为“变量名Stat”的状态变量：

1 <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
2 　　<td th:text="${prod.name}">Onions</td>
3 　　<td th:text="${prod.price}">2.41</td>
4 　　<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
5 </tr>

六、条件运算

1 <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
2 　　<td th:text="${prod.name}">Onions</td>
3 　　<td th:text="${prod.price}">2.41</td>
4 　　<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
5 　　<td>
6 　　　　<span th:text="${#lists.size(prod.comments)}">2</span> comment/s
7 　　　　<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>
8 　　</td>
9 </tr>

<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>

　　th:if 不只运算布尔条件，它对以下情况也运算为true:

　　值不为null
　　　　值为boolean且为true
　　　　值为数字且非0
　　　　值为字符且非0
　　　　值是字符串且不是：“false”,“off”，“no”
　　　　值不是boolean、数字、字符、字符串
　　如果值为null，则th:if运算结果为false

　　th:if的反面是th:unless

 1 <a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a>
 2 th:switch 和 th:case
 3 
 4 <div th:switch="${user.role}">
 5 　　<p th:case="'admin'">User is an administrator</p>
 6 　　<p th:case="#{roles.manager}">User is a manager</p>
 7 </div>
 8 
 9 <div th:switch="${user.role}">
10 　　<p th:case="'admin'">User is an administrator</p>
11 　　<p th:case="#{roles.manager}">User is a manager</p>
12 　　<p th:case="*">User is some other thing</p>
13 </div>

七、坑

　　总结一下在使用过程中遇到的坑：

　　1 获取项目根目录，很多时候我们都需要获取本项目的根目录，但是使用的代码是以下代码才能获得：

<script th:inline="javascript" type="text/javascript">
    var ctx=[[${#httpServletRequest.getContextPath()}]];
</script>

　　注意以上代码，如果需要在自定义的javascript中使用thymeleaf表达式，则需要将script声明一下：th:inline="javascript"。

　　2 获取图片路径，当我们使用thymeleaf的时候一定要注意单、双引号的区别，不然是无法获取到对应的值或者路径的：

<span class="img" th:style="'background-image: url('+@{/images/news/}+${top4News[2].originArticleId}+'/1.jpg'+');'"></span>

　　请注意以上代码：当我们要在backgroud-image这个标签下引用对应路径的img时：

　　　　首先使用th:style进行修饰。

　　　　然后在background-image标签前后一定要加单引号，否则不会起作用：

'background-image:xxx'

　　　　接着就是在url里面拼接你的img路径，请注意url('xxx')，也有单引号！

　　　　最后才能通过此路径获取到相应的图片。

八、总结

　　在使用thymeleaf的过程中，遇到了一些坑，希望大家在这样的坑中少走一些弯路。