整合thymeleaf
demo项目：G:\学习资料\java\a-study\springboot\com.xufei.springboot\com-xufei-springboot-thymeleaf
# 1、Thymeleaf 是什么
Thymeleaf是一个模板引擎、 这个模板引擎在进行的运行的时候 就类似于jsp一样要进行翻译、翻译之后才能运行
Thymeleaf简单的说他就类似于咋们的jsp、jsp能干的事情咋们的模板引擎一样能够搞定而且最关键的是 Thymeleaf 中 所有的方法的使用方式跟jsp几乎一样
可以认为是一个jsp的升级版
# 2、Thymeleaf 能干什么
页面的展示 跟咋们的jsp的功能是一样的 页面的展示 数据的渲染
# 3、Thymeleaf 的使用
# 3.1、导包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1
2
3
4
2
3
4
# 3.2、编写配置文件
#编写thymeleaf的配置文件
spring.thymeleaf.cache=true
spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.enabled=true
1
2
3
4
5
6
7
2
3
4
5
6
7
3.3、编写controller
@Controller //如果要跳转到Thymeleaf这个页面下面只能写@Controller 不能写@RestController
public class UserController {
@RequestMapping("toTestPage")
public String toBoboPage(){
return "test";
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.4、编写HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
this is xf page!
</body>
</html>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 4、thymeleaf 语法
查看语法
thymeleaf语法
文本显示
${}的使用和jsp的el表达式很类似，我们在后台绑定了一个user对象那么我们可以通过${user.name}获取用户名，相当于user.getName();但是注意这个只能放到th表达式里面
th:text就相当于把里面的渲染主来的值放到aaa的位置上，如果th:text里面的值只有${user.name},并且为null，那么就会显示aaa
<span th:text="'用户名：' +${user.name}">aaa</span>
#或者下面的这种方式，|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等
<span th:text="|用户名：${user.name}|"></span>
运算符
在表达式中可以使用各类算术运算符，例如+, -, *, /, %
<span th:text="'年龄*2='+ ${user.age}*2 "></span>
逻辑运算符
在表达式中可以使用逻辑运算符，但是除了==其他的要使用转义字符
>, <, >=, <= != 对应(gt, lt, ge, le, ne)
<span th:text="(${user.age} eq 22)">aaa</span> //输出true
#可以使用二元表达式
<span th:text="(${user.age} ge 23?'超过年纪':'ok')"></span>
条件判断
th:if条件成立才会显示
th:unless条件不成立才会显示
<span th:if="(${user.age} gt 21)">年龄超过21才会显示</span>
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
Switch
* 代表default，其他都没匹配到会显示带*的
<div th:switch="${user.role}">
<p th:case="'admin'">用户是管理员</p>
<p th:case="*">用户是普通人员</p>
</div>
循环
第二个参数称作状态变量，属性有
- index:当前迭代对象的index（从0开始计算）
- count: 当前迭代对象的index(从1开始计算)
- size:被迭代对象的大小
- current:当前迭代变量
- even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
- first:布尔值，当前循环是否是第一个
- last:布尔值，当前循环是否是最后一个
<table>
<tr>
<th>index</th>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr th:each="user,iterStat: ${userList}" >
<td th:text="${iterStat.index}">1</td>
<td th:text="${user.id}">1</td>
<td th:text="${user.name}">王五</td>
<td th:text="${user.age}">55</td>
</tr>
</table>
* 号和$符号共用
*{}里面的值就是上层th:object对象里面对应的属性
<div th:object="${user}">
<p>Name: <span th:text="*{name}">wangwu</span>.</p>
<p>AGE: <span th:text="*{age}">22</span>.</p>
</div>
Utilities
Utilities为了模板更加易用，Thymeleaf还提供了一系列Utility对象（内置于Context中），可以通过#直接访问
- dates ： java.util.Date的功能方法类。
- calendars : 类似#dates，面向java.util.Calendar
- numbers : 格式化数字的功能方法类
- strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
- objects: 对objects的功能类操作。
- bools: 对布尔值求值的功能方法。
- arrays：对数组的功能类方法。
- lists: 对lists功能类方法
- sets
- maps
表达式基本对象
- #ctx: 上下文对象.
- #vars: context中的变量们.
- #locale: context中的locale.
- #httpServletRequest: (只在web context中) HttpServletRequest对象.
- #httpSession: (只在web context中) HttpSession对象.
将date渲染成后面的格式
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
得到当前时间
${#dates.createNow()}
得到当前时间并显示
<span th:text=" ${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')} "></span>
utilities其他使用链接，很详细
内联
Text inlining
后面[[]]里面的值是从域中获取的text文本，跟使用th:text效果类似
<span th:inline="text">[[${user.name}]]</span>
JavaScript inlining
<script th:inline="javascript">
var name = [[${user.name}]];
</script>
下面这个意思是如果没有跑在服务器，name就会是我们的lisi，如果在服务器上，会取出user.name的值，忽略lisi
var name = /*[[${user.name}]]*/"lisi";
CSS inlining
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
none inlining
但是如果我么就要显示[[${user.name}]]不需要他转换呢，就会用到none inlining
<span th:inline="none">[[${user.name}]]</span>
--------------------------------------------------------------------------------
嵌套
在当前home.html路径下有个footer.html,内容如下
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
</body>
</html>
在home.html引用这个footer，footer代表html的名称，copy代表fragmen的值
<div th:replace="footer:: copy"></div>
<div th:include="footer:: copy"></div>
展现的源码：
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
得出结论：
- th:replace会将当前div整个替换成foot的元素
- th:include只是将footer里面的内容拷贝进来
--------------------------------------------------------------------------------
链接
链接一般用th:href="@{地址}"，“@{}”表达式，用来计算相对于URL的路径,在html ==<a href="/register"></a>
<a th:href="@{/register}">register</a>
常用标签
--------------------------------------------------------------------------------
回到顶部
springboot简化配置
当然在springboot中，上面的视图解析器等注册都不需要我们做了，因为springboot都默认帮我们做了，（只要我们将Thymeleaf maven依赖添加到项目的pom文件下，就启用了Spring Boot的自动配置。当应用运行时，Spring Boot将会探测到类路径中的Thymeleaf，然后会自动配置视图解析器、模板解析器以及模板引擎）
如果什么都不配置，springboot会默认查找类跟目录下的templates文件夹下的模板，home.html放到src/main/ resources/templates目录下
如果我们要在home的html中引入一些静态资源怎么办呢，这点springboot也帮我们考虑到了
springboot它会将“/**”映射到几个资源路径中
● META-INF/resources/
● resources
● static
● public
也就是说我们在有一个static/css/home.css
那么我们这样引入就可以了。
<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}"></link>
当然，我们还是可以配置前缀后缀，以及是否缓存等，只需要一个简单的配置即可
#配置前缀
#spring.thymeleaf.prefix=classpath:/templates/
#配置后缀
#spring.thymeleaf.suffix=.html
#spring.thymeleaf.mode=HTML5
#spring.thymeleaf.encoding=UTF-8
#spring.thymeleaf.content-type=text/html
#是否开启缓存
spring.thymeleaf.cache=false
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
最近更新: 2024/12/27, 16:46:15
