1、在html页面中引入模板。
<html xmlns:th="http://www.thymeleaf.org">
2、需要引入css时,代码如下:(js与其类似)
<link th:href="@{/css/a.css}" type="text/css" rel="stylesheet">
3、对于某些页面,我们需要引入其他公共页面的话,在需要引入的区域使用include,如下:
<div th:include="img::${frag}"></div>
//img表示另一个页面的(/路径/文件名去掉后缀),
${frag}表示后台动态传入的fragment名字,我传入的是img,他是另一个页面的fragment名,传入的页面img.html如下:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">//注:这句引入必须要有。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="img">//${frag}的值为fragment的值
这是模板图片:
<img th:src="@{/img/a.png}">
</div>
</body>
</html>
4、如果需要对后台传过来的时间进行格式化,如下:
<p th:text="${#dates.format(time,'yyyy-MM-dd hh:mm:ss')}"></p>
//结果为 2019-04-01 12:55:24
如果不进行格式化,代码如下:
<h3 th:text="${time}"></h3>
//结果为Mon Apr 01 12:55:24 CST 2019 显然可读性差
5、对文本进行替换,两种方式,任选:
<span th:text="'welcome to our application, '+${user.phone}"></span>
<span th:text="|welcome to our application,${user.phone}|"></span>
6、后台传过来list集合的话,如何循环遍历呢?
<table>
<tr th:each="li:${list}">//li为别名,${list}为后台传过来的集合名
<td th:text="${li.phone}"></td>
<td th:text="${li.password}"></td>
</tr>
</table>
7、对数据判断,根据不同的数据类型使用不同的方法,如:对后台传过来的string类型,我们用strings:
<p th:text="${#strings.isEmpty(user.password)?'暂无信息':user.password}"></p>
//为空显示前者:‘暂无信息’,不为空显示string字段。
对于list或者set,代码类似
<p th:if="${#lists.isEmpty(list)}"></p>
<p th:if="${#sets.isEmpty(list)}"></p>
8、根据后台传过来的数据进行区分,分别显示不同的内容,可以用if或者switch。
(1)if 后面跟的内容为真,显示对应的,unless刚好相反。
<div th:if="${user.phone=='18438595560'}">//判断为真显示
不错不错
</div>
<div th:unless="${user.phone=='18438595560'}">//判断为假显示
不错不错
</div>
如果user.phone从后台传过来是‘18438595560’(我的手机号),则前者显示,后者不显示。
(2)if多条件与switch类型。
<div th:if="${aaa>5}">正确</div>
<div th:if="${aaa<5}">错误</div>
(3)switch的用法如下,肯定需要与case搭配。
<div th:switch="${user.phone}">
<p th:case="18438595562">
是健康女朋友的号码
</p>
<p th:case="18438595560">
是健康的号码
</p>
<p>
当然,我们也可以加default
<P th:default>
是其他健康不认识的人的号码
</P>
上面可以用下面的替换,与default效果一致:
<P th:case="*">
是其他健康不认识的人的号码
</P>
9、select语句,动态加载。
<select>
<option th:each="u:${list}" //遍历的集合,u为别名
th:value="${u.phone}" //select的值,此时的optiion值为电话
th:text="${u.phone}" //页面显示的文本
th:selected="${u.phone==user.phone}"> //默认选择的内容
</option>
</select>
实际效果如下:
10、动态加载图片,语法如下:
<img th:src="@{/img/{img}(img=${img})}">
如果图片没有拿到,我们为了美观需要默认的图片。可以这样:
<img th:src="@{/{img}(img=${img})}"
th:"'this.src=\'' + @{'/img/ss.gif'} + '\''">
th:onerror语法是当前面的图片,从后台拿不到时,我们使用ss.gif替换。
11、提交form表单,我们我们也可以用thymeleaf的语法。
<form th:action="@{/bb}" th:object="${user}" method="post" th:method="post">
<input type="text" th:field="*{phone}"/>//field上传的字段名字
<input type="text" th:field="*{password}">
<input type="submit">
</form>
th:object="${user}",表示我们提交的内容为user对象,在后台直接接收user就行了,下面的字段phone,password都能拿到。
12、为了避免冲突,在前端,一下符合也需要改动。(注:分号不可省)
(1)< ;小于
(2)>;大于
(3)&equals 等于
(4)&le; 小于等于
(5)&ge; 大于等于
<h2>This is <小于</h2>
<h2>This is >大于/h2>
<h2>This is =;等于/h2>
<h2>This is ≤,小于等于/h2>
<h2>This is ≥大于等</h2>
13、数据格式化实例
(1)保留两位小数,整数位自动:
<span th:text="${#numbers.formatDecimal(price,0,2)}">34</span>
//结果为 11.00
(2)保留两位小数,整数位三位。
<span th:text="${#numbers.formatDecimal(price,3,2)}">34</span>
结果为: 011.00