Thymeleaf模板引擎使用
# Thymeleaf模板引擎的使用
Thymeleaf 模板引擎功能强大,使用简单,Spring Boot推荐使用。
# 1、配置Thymeleaf
# 步骤一:导入thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1
2
3
4
2
3
4
# 步骤二:在yml中配置thymeleaf
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
encoding: UTF-8
cache: false
1
2
3
4
5
6
2
3
4
5
6
# 步骤三:处理静态资源
html静态页面放在路径classpath:/templates下,在静态页面中导入thymeleaf的名称空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
步骤四:使用thymeleaf语法渲染数据即可
<!DOCTYPE html>
<!--名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 语法</title>
</head>
<body>
<h2>hymeleaf 语法</h2>
<!--th:text 设置当前元素的文本内容,常用,优先级不高-->
<p th:text="${thText}" />
<p th:utext="${thUText}"/>
<!--th:value 设置当前元素的value值,常用,优先级仅比th:text高-->
<input type="text" th:value="${thValue}" />
<!--th:object 声明变量,和*{} 一起使用-->
<div th:object="${thObject}">
<p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
<p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
<p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
</div>
<!--th:each 遍历列表,常用,优先级很高,仅此于代码块的插入-->
<!--th:each 修饰在div上,则div层重复出现,若只想p标签遍历,则修饰在p标签上-->
<div th:each="message : ${thEach}"> <!-- 遍历整个div-p,不推荐-->
<p th:text="${message}" />
</div>
<!--只遍历p,推荐使用-->
<div>
<p th:each="user : ${ulist}" th:object="${user}">
<span th:text="*{id}"></span>
<span th:text="*{name}"></span>
<span th:text="*{phone}"></span>
</p>
</div>
<!--th:if 条件判断,类似的有th:switch,th:case,优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
<p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
<!--th:insert 把代码块插入当前div中,优先级最高,类似的有th:replace,th:include,~{} :代码块表达式 -->
<div th:insert="~{template/footer :: copy}"></div>
<div th:replace="~{template/footer :: copy}"></div>
<div th:include="~{template/footer :: copy}"></div>
</body>
</html>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
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
36
37
38
39
40
41
42
43
44
45
46
47
48
后台给负责给变量赋值,和跳转页面。
@RequestMapping("/admin")
public String toAdmin(Model model){
PageHelper.startPage(1,10);
PageHelper.orderBy("id desc");
List<InterUser> ulist = interUserService.selectInterUserList();
model.addAttribute("ulist",ulist);
model.addAttribute("thText","thText1");
model.addAttribute("thUText","thUText1");
model.addAttribute("thValue","thValue1");
model.addAttribute("thEach", Arrays.asList("th:each", "遍历列表"));
model.addAttribute("thIf", "msg is not null");
model.addAttribute("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));
return "/admin/admin";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
官方文档:https://www.thymeleaf.org/documentation.html
# 2、常用th属性解读
html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。
th:text
: 设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。th:value
: 设置当前元素的value值,类似修改指定html标签属性的还有th:src,th:href。th:each
: 遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细看后文。th:if
: 条件判断,类似的还有th:unless,th:switch,th:case。th:insert
: 代码块引入,类似的还有th:replace,th:include,三者区别很大,若使用不恰当会破坏html结构,常用于公共代码块的提取复用。th:fragment
: 定义代码块,方便被th:insert引用。th:object
: 声明变量,一般和*{}一起配合使用,达到偷懒的效果。th:attr
: 修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙。
作者:荆辰曦 链接:https://www.jianshu.com/p/5bbac20348ec 来源:简书
# 3、标准表达式语法
变量表达式:
${...}
1
链接表达式:
@{...}
1
消息表达式:
#{...}
1
代码块表达式:
~{...}
1
选择变量表达式
*{...}
1
作者:荆辰曦 链接:https://www.jianshu.com/p/5bbac20348ec 来源:简书
编辑 (opens new window)