Thymeleaf 笔记

变量量表达式： ${…}

${variable}

调用后端传来的参数

字符串拼接

<p th:text="'string1 ' + ${string2} + ' string3'"></p>
<p th:text="|string1 ${string2} string3|"></p>

th:text

<div th:text="${variable}">若thymeleaf没生效则显示这个</div>

th:if

决定标签的显示与否

<div th:if="${test == 0}">根据test是否为0决定显示与否</div>

th:each

<table>
    <thead>
	    <tr>
	        <td>序号</td>
	        <td>姓名</td>
	        <td>密码</td>
	        <td>年龄</td>
	    </tr>
    </thead>
    <tbody>
	    <tr th:each="user,state:${users}">
	        <td th:text="${state.count}"></td>
	        <td th:text="${user.name}"></td>
	        <td th:text="${user.pass}"></td>
	        <td th:text="${user.age}"></td>
	    </tr>
    </tbody>
</table>

state 称作状态变量量，属性有：
1.index，当前迭代对象的 index（从 0 开始计算）；
2.count，当前迭代对象的 index（从 1 开始计算）；
3.size，被迭代对象的⼤大⼩小；
4.current，当前迭代变量量；
4.even/odd，布尔值，当前循环是否是偶数/奇数（从 0 开始计算）；
5.first，布尔值，当前循环是否是第⼀一个；
6.last，布尔值，当前循环是否是最后⼀一个

state随意命名，也可舍去：<tr th:each="user:${users}">

th:switch

<div th:switch="${sex}">
    <p th:case="woman">她是⼀一个姑娘...</p>
    <p th:case="man">这是⼀一个爷们!</p>
    <!-- *: case的默认的选项 -->
    <p th:case="*">未知性别的⼀一个家伙。 </p>
</div>

URL表达式： @{…}

@{url}

如果@{url}里面要调用后端传来的数据，还要在{}里面用${variable}

@{url}不用将url的各种字符转义

<a th:href="@{http://www.baidu.com}">百度</a>
↓
<a href="http://www.baidu.com">百度</a>

<img th:src="@{/img/{test}.jpg(test=${test})}"/>
↓
<img src="@{/img/test.jpg}"/>

<div th:style="'background:url(' + @{${imgUrl}} + ');'">
↓
<div style="background:url(http://url/img.jpg);">

<a th:href="@{/order/process(execId=${execId},execType='FAST')}">process</a>
↓
<a href="/order/process?execId=123&execType=FAST">process</a>

条件运算

if-then : if ? then
if-then-else : if ? then : else
default : value ?: defaultValue（value不是boolean；若value为null，则选择defaultValue）

gt： great than
ge：great equal
eq：equal
lt ： less than
le： less equal
ne：not equal

<div th:text="${test eq 0 ? 1 : 2}">1</div>
<input th:value="${test == 0 ? 1 : 2}"/>
<div th:if="${message eq 'Hello'}">显示</div>
<div th:text="${message != 'Hello' ? 1 : 2}">2</div>

字符串与数字比较运算，用符号还是两个字母皆可

内联：[[${…}]]

[[${variable}]]

1、使用[[${variable}]]可以在js脚本中使用后端传来的参数

需要在标签加入th:inline="javascript"

<script th:inline="javascript">
	var name = 'Dr.' + [[${name}]];
	alert(name);
</script>

2、在html中，可以少写点代码，但是不利于原型显示

不是必须在标签加入th:inline="text"，可以直接用

<div th:inline="text" >
	<p>Hello, [[${userName}]] !</p>
</div>
↓
<div>
	<p th:text="'hello,' + ${userName} + ' !'"></p>
</div>

<p>Hello, [[${userName}]] !</p>
↓
<p th:text="'hello,' + ${userName} + ' !'"></p>

3、特别注意的，还有一个th:inline="none"，是为防止thymeleaf引擎会把[[也当成了内联语句处理，例如二维数组[[],[]]

<script th:inline="none">
	var data = [["零", 0], ["一", 1]];
</script>

文字国际化表达式： #{…}

#{...}
⽂文字国际化表达式允许我们从一个外部⽂文件获取区域⽂文字信息（.properties），用 Key 索引 Value，还可以提供一组参数（可选）。

<p th:text="|This car has #{car.wheel} wheel(s)|"></p>
<p th:text="#{car.brand(${byd})}"></p>

消息属性可以是静态值：car.wheel=4

也可以带有参数声明：cra.brand=This car's brand is {0}

内嵌对象

${#...}里面调用后台参数不需要再${…}了，直接写即可

dates： java.util.Date 的功能⽅方法类
calendars：类似 #dates，⾯面向 java.util.Calendar
numbers：格式化数字的功能⽅方法类
strings：字符串串对象的功能类， contains、 startWiths、 prepending/appending 等
objects：对 objects 的功能类操作
bools：对布尔值求值的功能⽅方法
arrays：对数组的功能类⽅方法
lists：对 lists 的功能类⽅方法
sets： set 的实⽤用⽅方法
maps： map 的实⽤用⽅方法
…

<p th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:if="${#strings.isempty(userName)}" th:text="${userName}"></p>

看起来像是直接用java里类的方法在前端运行，实际上用了文字国际化表达式#{…}，消息源是.properties文件

选择表达式： *{…}

<div th:object="${book}">
	<span th:text="*{title}">...</span>
</div>

使用th:object="${book}"使book取代上下文变量容器（不知道），然后使用*{title}就可以选择调用book的title属性

选择表达式选择了父标签的对象，什么是选定对象？就是父标签的值，如下：

<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>

常用th标签

关键字	功能介绍	案例
th:id	替换id	<input th:id="'xxx' + ${collect.id}"/>
th:text	文本替换	<p th:text="${collect.description}">description</p>
th:utext	支持html的文本替换	<p th:utext="${htmlcontent}">conten</p>
th:object	替换对象	<div th:object="${session.user}">
th:value	属性赋值	<input th:value="${user.name}" />
th:with	变量赋值运算	<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style	设置样式	th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick	点击事件	th:onclick="'getCollect()'"
th:each	属性赋值	tr th:each="user,userStat:${users}">
th:if	判断条件	<a th:if="${userId == collect.userId}" >
th:unless	和th:if判断相反	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href	链接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路选择 配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一个分支	<p th:case="'admin'">User is an administrator</p>
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	<div th:fragment="alert">
th:include	布局标签，替换内容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	布局标签，替换整个标签到引入的文件	<div th:replace="fragments/header :: title"></div>
th:selected	selected选择框 选中	th:selected="(${xxx.id} == ${configObj.dd})"
th:src	图片类地址引入	<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline	定义js脚本可以使用变量	<script type="text/javascript" th:inline="javascript">
th:action	表单提交的地址	<form action="subscribe.html" th:action="@{/subscribe}">
th:remove	删除某个属性	<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。 2.body:不包含标记删除,但删除其所有的孩子。 3.tag:包含标记的删除,但不删除它的孩子。 4.all-but-first:删除所有包含标签的孩子,除了第一个。 5.none:什么也不做。这个值是有用的动态评估。
th:attr	设置标签属性，多个属性可以用逗号分隔	比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。

Thymeleaf配置

# THYMELEAF (ThymeleafAutoConfiguration)
#开启模板缓存（默认值： true）
spring.thymeleaf.cache=true
#检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
#检查模板位置是否正确（默认值:true）
spring.thymeleaf.check-template-location=true
#Content-Type的值（默认值： text/html）
spring.thymeleaf.content-type=text/html
#开启MVC Thymeleaf视图解析（默认值： true）
spring.thymeleaf.enabled=true
#模板编码
spring.thymeleaf.encoding=UTF-8
#要被排除在解析之外的视图名称列列表，⽤用逗号分隔
spring.thymeleaf.excluded-view-names=
#要运⽤用于模板之上的模板模式。另⻅见StandardTemplate-ModeHandlers(默认值： HTML5)
spring.thymeleaf.mode=HTML5
#在构建URL时添加到视图名称前的前缀（默认值： classpath:/templates/）
spring.thymeleaf.prefix=classpath:/templates/
#在构建URL时添加到视图名称后的后缀（默认值： .html）
spring.thymeleaf.suffix=.html
#Thymeleaf 模板解析器器在解析器器链中的顺序，默认情况下，它排第⼀一位，顺序从1开始，只有在定义了了额外的 TemplateResolv
er Bean 时才需要设置这个属性。
spring.thymeleaf.template-resolver-order=
#可解析的视图名称列列表，⽤用逗号分隔
spring.thymeleaf.view-names=

页面布局

/templates/layout/footer.html
作为被引入的

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>footer</title>
</head>
<body>
<footer th:fragment="footer">
<h1>footer</h1>
</footer>
</body>
</html>

/templates/layout/layout.html
模板，使用th:replace="layout/footer :: footer"引入了footer.html，同时留下layout:fragment="content"以作为模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultra
q.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8"></meta>
<title>Layout</title>
</head>
<body>
<div >
<div layout:fragment="content" > content</div>
<div th:replace="layout/footer :: footer"></div>
</div>
</body>
</html>

/templates/layout/my.html
在<html>标签使用layout:decorate="layout"将同目录（/templates/layout/）下的layout.html引入，随后用layout:fragment="content"将layout.html中的对应部分替换。

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/
web/thymeleaf/layout" layout:decorate="layout">
<head>
<meta charset="UTF-8"></meta>
<title>My</title>
</head>
<body>
<div layout:fragment="content" >
<h2>content</h2>
</div>
</body>
</html>