SpringBoot(十六) Thymeleaf模板引擎 - 基本操作

只要对MVC框架和JSTL有所了解的,在学习Thymeleaf时都不会觉得太难

简单对比

JSP表单

1
<form:input name="userName" value="${user.name}" />

Thymeleaf表单

1
<input type="text" name="userName" value="Ray" th:value="${user.name}" />

注意

Thymeleaf 3.0 不再是基于XML结构的。由于引入新的解析引擎,模板的内容格式不再需要严格遵守XML规范。即不在要求标签闭合,属性加引号等等。

构建项目

控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* @author Ray
* @date 2018/8/1 0001
*/
@Controller
@RequestMapping(value = "/test02")
public class TestController02 {

@RequestMapping(value = "/")
public String index(Model model){
model.addAttribute("name", "Ray");
model.addAttribute("age", 18);
return "test02";
}
}

数据传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf-2</title>
</head>
<body>
<h1>在非表单标签中显示内容使用:th:text</h1>
<p>你好 : <b th:text="${name}">姓名</b></p>

<h1>字符串拼接</h1>
<p th:text="'年龄:' + ${age}"></p>
</body>
</html>

输出结果

说明

  1. 在非表单标签中显示内容使用:th:text
  2. 字符串拼接:th:text="'年龄:' + ${age}"

三目运算及表单显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf-2</title>
</head>
<body>

<h1>三目运算及表单显示</h1>
<input th:value="${name}"/>
<input th:value="${age gt 20 ? '老年':'少年'}"/>

</body>
</html>

输出结果

说明

在表单标签中显示内容使用:th:value="${age gt 20 ? '老年':'少年'}表示如果age大于20则显示老年,否则显示少年。

简称 全称 说明
gt great than 大于
ge great equal 大于等于
eq equal 等于
lt less than 小于
le less equal 小于等于
ne not equal 不等于

if 判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf-2</title>
</head>
<body>

<h1>if 判断</h1>
<h3>
<b th:text="${name}"></b>
<span th:if="${age gt 20}">老年</span>
<span th:unless="${age gt 20}">少年</span>
</h3>

</body>
</html>

输出结果

说明

如果age大于20显示老年,否则显示年轻,跟上面的三目运算效果一样。使用th:if做true判断,用th:unless做false判断。

switch 选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf-2</title>
</head>
<body>

<h1>switch 选择</h1>
<div th:switch="${age}">
<p th:case="18">奔二</p>
<p th:case="*">其他</p>
</div>

</body>
</html>

输出结果

说明

  1. 和Java中的switch语句差不多,th:case="*"表示除其他指定值之外的情况
  2. 父标签和子标签是 p 情况下会报错

each 循环

实体类

1
2
3
4
5
6
7
8
9
10
11
/**
* @author Ray
* @date 2018/8/1 0001
*/
@Data
@AllArgsConstructor
public class Web {

private String name;
private String url;
}

控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* @author Ray
* @date 2018/8/1 0001
*/
@Controller
@RequestMapping(value = "/test02")
public class TestController02 {

@RequestMapping(value = "/list")
public String list(Model model){
List<Web> list = new ArrayList<>();
list.add(new Web("百度", "www.baidu.com"));
list.add(new Web("QQ", "www.qq.com"));
model.addAttribute("lists", list);
return "list";
}
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>List</title>
</head>
<body>
<table>
<tr>
<th>网站名称</th>
<th>网址</th>
</tr>
<tr th:each="web : ${lists}">
<td th:text="${web.name}">名称</td>
<td th:text="${web.url}">网址</td>
</tr>
</table>
</body>
</html>

输出结果

说明

使用th:each循环,注意循环是将当前标签一起循环,也就是这里的tr也一起被循环。

循环中的state(状态对象)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>List</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>网站名称2</th>
<th>网址2</th>
<th>state:index</th>
<th>state:count</th>
<th>state:size</th>
<th>state:current</th>
<th>state:even</th>
<th>state:odd</th>
<th>state:first</th>
<th>state:last</th>
</tr>
<tr th:each="web, webVs : ${lists}">
<td th:text="${web.name}">名称</td>
<td th:text="${web.url}">网址</td>
<td th:text="${webVs.index}">状态序号,从0开始</td>
<td th:text="${webVs.count}">状态序号,从1开始</td>
<td th:text="${webVs.size}">状态size</td>
<td th:text="${webVs.current.name}">状态 当前对象</td>
<td th:text="${webVs.even}">状态 奇数</td>
<td th:text="${webVs.odd}">状态 偶数</td>
<td th:text="${webVs.first}">状态 是否第一条</td>
<td th:text="${webVs.last}">状态 是否最后一条</td>
</tr>
</table>
</body>
</html>

输出结果

说明

属性 说明
index 列表状态的序号,从0开始
count 列表状态的序号,从1开始
size 列表状态,列表数据条数
current 列表状态,当前数据对象
even 列表状态,是否为奇数,boolean类型,从0开始
odd 列表状态,是否为偶数,boolean类型,从0开始
first 列表状态,是否为第一条,boolean类型
last 列表状态,是否为最后一条,boolean类型
-------------- 本文结束  感谢您的阅读 --------------