Thymeleaf作用:生成动态的HTML
模板文件包含了HTML静态页面和一些表达式,这些表达式可以被model中的数据替换,model传进去不同的数据,HTML就可以动态变化
官网:https://www.thymeleaf.org/
文档:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process
语法文档上都有,常用语法:标准表达式(对应文档小标题4)、判断与循环(6、7)、模板布局(8)
1 标准表达式
目前用到的有:
网址链接表达式:@{}
变量:${}
组合:|文本${}|
举例:
1.1 @{}
html里经常有很多链接,就用@{}
包裹
1.2 ${}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>邮件</title>
</head>
<body>
<p>欢迎你,<span th:text="${username}">xxx</span>!</p>
</body>
</html>
username是个变量,它是什么值,动态模板就拼成什么值
1.3 |文本${}|
有时候需要变量和文字拼在一起,就用||
<a class="page-link" th:href="@{|${page.path}?current=1|}">首页</a>
2 判断与循环
2.1 循环
比方说页面分页,下面这几个数字是循环展示的,只用写一个就好
<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.startPage,page.endPage)}">
<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>
</li>
2.2 判断
还是用分页举例,如果是第一页,”上一页“就点不动
<li th:class="|page-item ${page.current==1?'disabled':''}|">
3 模板布局
实际开发工程中,把一个页面的头部和尾部开发好了,往往会有多个页面复用这些部分,还有比如分页这样的组件也会被复用,Thymeleaf可以实现这样的复用
比方说:register.html头部要复用index里的头部
index.html
register.html