thymeleaf是基于HTML的
1. 坐标
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2. 在文件夹templates下创建html文件
在文件的html根标签上添加命名空间
<!DOCTYPE html>
<html lang="ch" xmlns:th="wwww.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span th:text="用户列表"></span>
</body>
</html>
3. 基础语法
th:text = "" 文本输出 : 可替换标签间的文本内容
th:value = "" 只能用在intput元素
- $ {x}将返回存储在Thymeleaf上下⽂中的变量x或作为请求属性。
- $ {param.x}将返回⼀个名为x的请求参数(可能是多值的)。
- $ {session.x}将返回⼀个名为x的会话属性。
- $ {application.x}将返回⼀个名为x的servlet上下⽂属性。
3.1 内置对象strings
使用内置对象用#引用
大多数内置对象都以s结尾
方法 | 含义 |
${#strings.isEmpty()} | 判断是否为空,空为true |
${#strings.contains(msg,‘T’)} | 判断msg中是否包含字符(串)T |
${#strings.startsWith(msg,子串)} | 判断msg中是否以字符(串)开头 |
${#strings.endsWith(msg,字串)} | 判断msg中是否以字符(串)结尾 |
${#strings.length(字符串)} | 返回字符串长度 |
${#strings.indexOf(msg,字串)} | 查找子串的位置,返回该字串下标,没有返回-1 |
${#strings.substring(msg,2)} | 截取msg从2到结束 |
${#strings.substring(msg,2,5)} | 截取msg从2到5 |
${#strings.toUpperCase(msg)} | msg大写 |
${#strings.toLowerCase(msg)} | msg小写 |
3.2 内置对象dates
<html lang="ch" xmlns:th="http://wwww.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>FOREACH</title>
</head>
<body>
<div style="float:right;height: 30px" align="right">
<span th:text="${#dates.format(data)}"></span><br>
<span th:text="${#dates.format(data,'yyyy MM dd')}"></span>
</div>
<table border="1">
<caption th:text="${#dates.year(data)}"></caption>
<caption th:text="${#dates.month(data)}"></caption>
<caption th:text="${#dates.day(data)}"></caption>
</table>
</body>
3.2 条件判断
th:if
在controller的方法中
model.addAttribute("sex","男");
在html中
<div>
<span th:if="${sex} == '男‘ ">
性别 : 男
</span>
<span th:if="${sex} == '女' ">
性别 : 女
</span>
</div>
th:switch / th:case
注意
在<th:case="*"> 表示java中switch中的default,即没有case值为true时,显示<th:case="*">的内容 |
在controller的方法中
model.addAttribute("id","1");
// model.addAttribute("id",1); 二者都行 , thymeleaf最终都会转为字符串类型
在html中
<div th:switch="${id}">
<span th:case="1"> ID : 1 </span>
<span th:case="2"> ID : 2 </span>
<span th:case="3"> ID : 3 </span>
<span th:case="*"> ID : * </span>
</div>
3.3 迭代遍历
th:each
迭代器,用于循环迭代集合
创建User实体类
@Data
public class User {
public int id;
public String userName;
public String job;
}
在controller的方法中
List<User> list = new ArrayList<>();
list.add(new User(... , ... , ... ));// 添加多个User对象
list.add(new User(... , ... , ... ));
list.add(new User(... , ... , ... ));
model.addAttribute("list",list);
在html中
<table border="1">
<caption th:text="${#dates.year(data)}"></caption>
<caption th:text="${#dates.month(data)}"></caption>
<caption th:text="${#dates.day(data)}"></caption>
<tr>
<th>id</th>
<th>用户名</th>
<th>职业</th>
<th>index</th>
<th>count</th>
<th>size</th>
<th>odd</th>
<th>even</th>
<th>first</th>
<th>last</th>
</tr>
<tr th:each="u,iterator : ${list}"> // 迭代对象 , 迭代器 : 集合
<td th:text="${u.id}"></td>
<td th:text="${u.userName}"></td>
<td th:text="${u.job}"></td>
<td th:text="${iterator.index}"></td> // int
<td th:text="${iterator.count}"></td> // int
<td th:text="${iterator.size}"></td> // int
<td th:text="${iterator.odd}"></td> // boolean 奇数行为true
<td th:text="${iterator.even}"></td> // boolean 偶数行为true
<td th:text="${iterator.first}"></td> // boolean 第一行为true
<td th:text="${iterator.last}"></td> // boolean 最后一行为true
</tr>
</table>
注意
迭代遍历 List与Set 是一致的 |
3.4 迭代Map
th:each
在controller的方法中
Map<String,User> map = new HashMap<>();
map.put("user1",new User(... , ... , ... ));// 添加多个User对象
map.put("user2",new User(... , ... , ... ));
map.put("user3",new User(... , ... , ... ));
model.addAttribute("map",map);
在html中
<table border="1">
<tr>
<th>id</th>
<th>用户名</th>
<th>职业</th>
<th>键名</th>
</tr>
<tr th:each="u : ${map}"> // 迭代对象 : 集合
<td th:text="${u.value.id}"></td> // 想获取键名 , 使用 th:text="${u.key}"
<td th:text="${u.value.userName}"></td>
<td th:text="${u.value.job}"></td>
<td th:text="${u.key}"></td>
</tr>
</table>
3.5 操作域对象
HttpServletRequest 、HttpSession 、 ApplicationContext
在controller的方法中
request.setAttribute("req","HttpServletRequest");
request.getSession().setAttribute("sess","HttpSession");
request.getSession().getServletContext().setAttribute("application","ApplicationContext");
在html中
<div>
<p>HttpServletRequest 获取方式一 :<span th:text="${#request.getAttribute('req')}"></span></p>
<p>HttpServletRequest 获取方式二 :<span th:text="${#httpServletRequest.getAttribute('req')}"></span></p>
<p>HttpSession 获取方式一 :<span th:text="${session.sess}"></span></p>
<p>HttpSession 获取方式二 :<span th:text="${#httpSession.getAttribute('sess')}"></span></p>
<p>ApplicationServletContext 获取方式一 :<span th:text="${application.app}"></span></p>
<p>ApplicationServletContext 获取方式二 :<span th:text="${#servletContext.getAttribute('app')}"></span></p>
</div>
4. URL表达式
语法格式为@{ } |
4.1 绝对路径
<a th:href="@{www.baidu.com}"></a>
<a th:href="@{/[当前项目的controller的RequestMapping]}">相对于当前项目的根</a>
<a th:href="@{~/[与当前项目平级的项目]/[该项目的controller的RequestMapping]}">相对于tomcat服务器的根</a>
4.2 相对路径
<a th:href="@{/[当前项目的controller的RequestMapping]}">相对于当前项目的根</a>
<a th:href="@{~/[与当前项目平级的项目]/[该项目的controller的RequestMapping]}">相对于tomcat服务器的根</a>
- 相对于tomcat服务器的根 :
- 当前项目的目录 的上一级目录
4.3 在URL中传递参数
@GetMapping("/show")
public String show(String username,String password){
// ...
return "";
}
4.3.1 普通风格
<a th:href="@{/show?username=zhangsan&password=123}"></a>
<a th:href="@{/show(username=zhangsan,password=123)}"></a>
<a th:href="@{'/show?username' + ${username} + '&password=' + ${password} }"></a>
<a th:href="@{ /show ( username=${username},password=${password} ) }"></a>
4.3.2 Restful风格
方式一
```java @GetMapping("/show/{username}") public String show(@PathVariable String username){ // ... return ""; } ```
<a th:href="@{ /show/{username}(username=zhangsan) }"></a>
http://127.0.0.1:8080/show/zhangsan
方式二
@GetMapping("/show/{username}/{password}")
public String show(@PathVariable String username,@PathVariable String password){
// ...
return "";
}
<a th:href="@{ /show/{username}/{password}(username=zhangsan,password=123) }"></a>
http://127.0.0.1:8080/show/zhangsan/123
方式三
@GetMapping("/show/{username}")
public String show(@PathVariable String username,String password){
// ...
return "";
}
<a th:href="@{ /show/{username}(username=zhangsan,password=123) }"></a>
http://127.0.0.1:8080/show/zhangsan?password=123
方式四
@GetMapping("/show/{username}")
public String show(@PathVariable String username,String password){
// ...
return "";
}
<a th:href="@{ /show/{username}( username=${username},password=${password} ) }"></a>
http://127.0.0.1:8080/show/zhangsan?password=123
5. 配置文件
默认
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
model: HTML # 默认为HTML4, 可修改为HTML5
动态页面放在templates目录的子目录下
spring:
thymeleaf:
prefix: classpath:/templates/子目录/
suffix: .html