一、引入
使用Thymeleaf首先需引入命名空间
头部加
<html xmlns:th="http://www.thymeleaf.org">
二、基本使用方法
1.引用web静态资源
Thymeleaf通过”@{}”来引用web静态资源,例:
<script th:src="@{bootstrap/js/boostrap.min.js}"></script>
上下文相关URL
<a th:href="@{/order/list}">
如果应用程序访问URL为:http://localhost:8080/myapp,则此URL将输出:
<a href="/myapp/order/list">
与服务器相关URL
服务器相关的URL与上下文相关的URL非常相似,只是它们不假定URL要链接到应用程序上下文中的资源,因此允许链接到同一服务器中的不同上下文:
<a th:href="@{~/billing-app/showDetails.html}">
当前应用程序的上下文将被忽略,因此尽管应用程序部署在http:// localhost:8080 / myapp,但该URL将输出:
<a href="/billing-app/showDetails.html">
协议相关URL
与协议相关的URL实际上是绝对的URL,它将保持用于显示当前页面的协议(HTTP,HTTPS)。 它们通常用于包括样式,脚本等外部资源:
<script th:src="@{//scriptserver.example.net/myscript.js}">...</script>
它将呈现与上面一致的URL(URL重写除外),如:
<script src="//scriptserver.example.net/myscript.js">...</script>
添加参数
<a th:href="@{/order/details(id=3)}">
上面示例代码,最终将输出为:
<a href="/order/details?id=3">
也可以添加几个参数,用逗号分隔它们:
<a th:href="@{/order/details(id=3,action='show_all')}">
上面代码将输出结果为:
<!-- 注意&符号在标签属性中进行HTML转义... -->
<a href="/order/details?id=3&action=show_all">
2.访问model模型中的数据,例如访问一个user对象的name属性
<span th:text="${user.name}"></span>
3.数据迭代
例如迭代一个userlist集合
<tr th:each="user : ${userlist}">
<td th:text="${user.name}">tyrone</td>
<td th:text="${user.age}">18</td>
</tr>
使用th:each做循环迭代,并使用${对象.属性}来访问具体的值
4.判断
<tr th:if="${messages.empty}">
<td colspan="3">No messages</td>
</tr>
5.在Javascript中访问model模型数据
<script th:inline="javascript">
var user = [[${user}]]
console.log(user.name + "\t" + user.age);
</script>
网友评论