thymeleaf 基本语法

最近加班不多，回宿舍闲的无聊，所以就将原先写的项目进行了一次大的改造，顺便学习一下thymeleaf模板语言，改造过程中还是遇到了许多的问题。二次开发等于重新开发，这句话还是很有道理的。现在项目已经改造的差不多了，所以写篇博客记录下在使用thymeleaf过程中所遇到的问题。

基本语法

thymeleaf是spring boot官方强烈推荐的模板语言,两者的理念是很接近的，spring boot强调的是快速开发，而thymeleaf又是原型即页面。另外thymeleaf更适合前后端分离的项目，值绑定都是基于html的DOM元素属性的，适合前后连调。

基本用法

页面上引入thymeleaf 语法

1 2	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">

直接输出文本

1	<span th:text=${user.userName}>Tom</span>

将userName的值打印出来，替换掉文本域中的Tom。如果userName不存在，直接输出Tom.

基本的赋值

1	<span th:value=${user.userName}></span>

将userName的值给value，在浏览器中被解析成”“

if unless条件判断

<span th:if=(${userName}==Tom)
    <div>......</div>
</span>
<span th:unless=(${userName}==Tom)
    <div>......</div>
</span>

判断userName是否为Tom,如果是则执行上面一个div,否则执行下面的div

页面内容的替换

1	<head th:replace="common/header::header">

引入common文件夹中的header文件中的header模块，此功能主要是抽取出页面中的公共部分，然后替换到所需要使用页面中。
功能相同的用法还有两种：th:include、th:insert 三者主要的区别在于：

th:include: 保留自己的主标签，不要th:fragment的主标签(thymeleaf 3.0之后不再推荐)。
th:insert: 保留自己的主标签，保留th:fragment的主标签。
th:replace: 不保留自己的主标签，保留th: fragment的主标签。

时间格式的输出

1	th:text="${#dates.format(item.operateTime,'yyyy-MM-dd HH:mm:ss')

将操作时间格式化成yyyy-MM-dd HH:mm:ss的形式输出。

url用法

1	<li><a th:href="@{/loginOut}">退出</a></li>

文件的引入

1	<script type="text/javascript" th:src="@{/js/application.js}"></script>

将application.js文件引入到thymeleaf页面中

th:block
1
<th:block th:text=${user.userName}>

区块操作主要用于便捷操作,比如循环,可以在dom外部形成包裹,解析之后block模块会被注释掉.

中级用法

集合的遍历

1	<tr th:each="item:${lists}">......</tr>

将lists集合遍历拆分成对象，用item接收。当使用这种用法时，同时还会产生一个itemStat的对象，itemStat称为状态变量，主要属性包括：

index: 当前迭代对象的index(从0开始计算)
count: 当前迭代对象的index(从1开始计算)
current: 当前迭代变量
even/odd: boolean值，判断是不是奇偶行
size: 被迭代对象的大小
first: 布尔值，判断循环是否是第一个
last: 布尔值，判断循环是否是最后一个

th:onClick用法

1 2	<a th:onclick="'javascript:layer_update(\''+${item.userId}+'\')'">.......</a> <a th:onclick="'javascript:admin_del(\''+${item.userId}+'\')'">......</a>

以上用法主要是将变量值传到调用的方法中，也可以传整个对象。
** 注意写法必须是以上形式，javascript:不能少也不能写错，起一个声明的作用，后面的(\’’+${item.userId}+’\’)字符斜杠也必须要写对，表示转义字符。

th:attr 用法

1	th:attr="data-href=${menuItem.menuUrl},data-title=${menuItem.menuName}

经浏览器解析后输出结果: data-href=”…” data-title=”…”,…表示对应的url、name数据。

th:line用法

1	<script th:src="@{/js/permission/user/userAdd.js}" th:inline="javascript"/>

使用以上用法引用js文件，在js中就可以使用当前html页面中的对象了。在js中使用”varpage=[[${lists.pages}]];”即可调用lists对象。

用法实例

循环输出语法

<tr class="text-c" th:each="item:${lists}">
					<td><input type="checkbox" th:attr="value=${item.logId}" name="subCheck" /></td>
					<td th:text="${itemStat.count}"></td>
					<td th:text="${item.typeName}"></td>
					<td th:text="${item.userName}"></td>
</tr>

将lists集合遍历，然后输出所需要的值，一般在页面中构造表格经常用到。

2.条件判断

<td class="td-manage" th:switch="${item.status}">
	 <span th:case="1">
		  <a style="text-decoration:none" th:onClick="'javascript:admin_stop(this,\''+${item.userId}+'\')'" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>
	 </span>
 	 <span th:case="0">
			<a style="text-decoration:none" th:onClick="'javascript:admin_start(this,\''+${item.userId}+'\')'" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe615;</i></a>
	 </span>
</td>

以上用法中status表示用户是否已经启用，当status等于1时，表示用户已启用，所以在操作框中应该显示是停用的按钮。反之同理。