1、在html页面中引入thymeleaf命名空间,即<html xmlns:th=http://www.thymeleaf.org></html>,此时在html模板文件中动态的属性使用th:命名空间修饰
2、引用静态资源文件,比如CSS和JS文件,语法格式为“@{}”,如@{/js/blog/blog.js}会引入/static目录下的/js/blog/blog.js文件
3、访问spring-mvc中model的属性,语法格式为“${}”,如${user.id}可以获取model里的user对象的id属性
4、循环,在html的标签中,加入th:each=“value:${list}”形式的属性,如<span th:each=”user:${users}”></span>可以迭代users的数据
5、判断,在html标签中,加入th:if=”表达式”可以根据条件显示html元素
<span th:if="${not #lists.isEmpty(blog.publishTime)}">
<span id="publishtime" th:text="${#dates.format(blog.publishTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
</span>
以上代码表示若blog.publishTime时间不为空,则显示时间
6、时间的格式化,
${#dates.format(blog.publishTime,'yyyy-MM-dd HH:mm:ss')}
表示将时间格式化为”yyyy-MM-dd HH:mm:ss”格式化写法与Java格式化Date的写法是一致的。
7、字符串拼接,有两种形式
比如拼接这样一个URL:/blog/delete/{blogId}
第一种:th:href="'/blog/delete/' + ${blog.id }"
第二种:th:href="${'/blog/delete/' + blog.id }"
模板:
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>生日</th>
<th>薪资</th>
</tr>
<tr th:each="user : ${userList}">
<img th:src="${}"/>
<td th:text="${user.id}">0</td>
<td th:text="${user.name}">zhansan</td>
<td th:text="${user.birthday}">1988-06-01</td>
<td th:text="${user.salary}">12345</td>
</tr>
</table>
<select>
<option th:each="user:${userList}" th:value="${user.id}" th:text="${user.name}">我是默认值</option>
</select>
</body>
</html>
关于Controller 方法可以接收参数使用@RequestBody、@RequestParam、@ModelAttribute、JSONObject、HttpEntity 等方式,皆与Spring的使用一样
变量表达式和星号表达有什么区别吗?
如果不考虑上下文的情况下,两者没有区别;星号语法评估在选定对象上表达,而不是整个上下文
什么是选定对象?就是父标签的值,如下:
<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>
th:action 表单提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">
th:remove 删除某个属性 <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。
th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。
th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick 点击事件 th:οnclick="'getCollect()'"
th:fragment 布局标签,定义一个代码片段,方便其它地方引用 <div th:fragment="alert">
使用thymeleaf布局非常的方便
定义代码片段
<footer th:fragment="copy">
© 2016
</footer>
在页面任何地方引入:
<body>
<div th:include="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
</body>
th:include 和 th:replace区别,include只是加载,replace是替换
讲述Thymeleaf中的内置对象(list解析、日期格式化、数字格式化等)、定义变量、获取URL的参数和在页面标签中自定义属性的应用。
如果对Thymeleaf的基本使用、maven依赖等不清楚的可以先阅读我的另一篇文章《Thymeleaf 之 初步使用》。
- Controller部份
@Controller
public class IndexController {
@GetMapping(value = "index")
public String index(Model model, HttpServletRequest request) {
List<String> datas = new ArrayList<String>();
datas.add("知识林");
datas.add("http://www.zslin.com");
datas.add("393156105");
model.addAttribute("datas", datas);
model.addAttribute("curDate", new Date());
model.addAttribute("money", Math.random()*100);
return "index";
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
在这个控制器的Model中存放了这样几个数据:一个String类型的列表、一个日期对象和一个数值,这些东西在实际应用开发过程中应用非常广泛,下面具体看一下在Thymeleaf中是如何解析这些数据的。
- 日期格式化
<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>
- 1
说明: 使用内置对象dates
的format
函数即可对日期进行格式化,在format
函数中,第一个参数是日期对象,对二两个参数为日期格式(规则跟SimpleDateFormat
一样)
需要注意的是:
· 内置对象一般都以s
结尾,如dates
、lists
、numbers
等
· 在使用内置对象是在对象名前都需要加#
号。
- 数字格式化
<span th:text="${#numbers.formatDecimal(money, 0, 2)}"></span>
- 1
说明: 此示例表示保留两位小数位,整数位自动;
<span th:text="${#numbers.formatDecimal(money, 3, 2)}"></span>
- 1
说明: 此示例表示保留两位小数位,3位整数位(不够的前加0)
- 获取列表长度
<span th:text="${#lists.size(datas)}"></span>
- 1
说明: 使用#lists.size
来获取List的长度。
- 获取URL参数值
<span th:text="${#httpServletRequest.getParameter('page')}"></span>
- 1
说明: 当访问http://localhost:1105/index?page=5
时页面将会得到page
对应的值:5
。
- 定义变量
<div th:with="curPage=${#httpServletRequest.getParameter('page')}">
<h3>当前页码:<span th:text="${curPage}"></span></h3>
</div>
- 1
- 2
- 3
说明: 同样,当访问http://localhost:1105/index?page=5
时,页面将显示:当前页码:5
,说明用th:with
来定义变量,多个用,
号隔开,使用范围在当前标签内。
- 自定义标签属性
在Thymeleaf中可以使用th:
加上标签的任何属性进行赋值,但有些时候会遇到自定义的属性,再用th:
加自定义的属性则会无效。比如:需要对<span>
标签增加objName
和objId
这样的属性,在非Thymeleaf情况下是这样:
<span objId="1" objName="知识林"></span>
- 1
变量情况是:
<span objId="${obj.id}" objName="${obj.name}"></span>
- 1
在Thymeleaf下则是:
<span th:attr="myDate=${#dates.format(curDate, 'yyyy-mm-dd')}, myMoney=${money}"></span>
- 1
说明: 在页面上查看源代码可以看到:<span myMoney="91.6059494319957" myDate="2016-31-02"></span>
,说明自定义属性用:th:attr
,多个属性用,
隔开。
- 内置对象
上面简单描述了比较常用的dates
、lists
、numbers
这几个内置对象,在Thymeleaf还有很多的内置对象,像strings
也非常常用,用法跟java.lang.String
类的用法一样。
在Thymeleaf中的内置对象有:
#dates
:日期格式化内置对象,具体方法可以参照java.util.Date
;
#calendars
:类似于#dates
,但是是java.util.Calendar
类的方法;
#numbers
: 数字格式化;
#strings
:字符串格式化,具体方法可以参照java.lang.String
,如startsWith
、contains
等;
#objects
:参照java.lang.Object
;
#bools
:判断boolean类型的工具;
#arrays
:数组操作的工具;
#lists
:列表操作的工具,参照java.util.List
;
#sets
:Set操作工具,参照java.util.Set
;
#maps
:Map操作工具,参照java.util.Map
;
#aggregates
:操作数组或集合的工具;
#messages
:操作消息的工具。
示例代码:https://github.com/zsl131/thymeleaf-study/tree/master/study05
本文章来自【知识林】