一、基础理论
1、概念
SpringBoot推荐使用Thymeleay来代替jsp进行动态页面展示,和jsp不同,它不需要编译就能运行,所以效率更高。
Thymeleay是基于html的,只要会html,thymeleaf很简单。
2、springboot集成thymeleaf
A.在新建springboot项目时,需要在templates engines中勾选thymeleaf。
这样的话pom文件中就有thymeleaf的起步依赖了。
你也可以不勾选,直接在pom文件中添加thymeleaf的起步依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
B、在resources的templates目录下新建thymeleaf文件,以.html结尾。
在<html>的头标签中添加:
<html lang="en" xmlns:th="http://www.thymeleaf.org">
这样就可以在html文件在使用thymeleaf的标签了。
C、缓存
thymeleaf是有缓存的,thymeleaf文件修改后,浏览器再次访问,还是原有的未修改的内容。
解决:
在properties文件中:
spring.thymeleaf.cache=false
idea设置:
edit configurations --> 选中项目 -->将“on update action”和“on frame
deactivation”的属性值设置为“update resources”。
如图A。
D、thymeleay的视图解析器(默认即是如此,可不配)
#thymeleaf的师徒解析器
spring.thymeleaf.prefix=classpath:/templates
spring.thymeleay.suffix=.html
二、Thymeleay语法
1、变量表达式
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
变量表达式:标准变量表达式
和EL表达式一样,需要使用model.addAttribute将键值对设置进去,这儿就可以取出来
-->
<h1 th:text="${student}"></h1><br />
<h2 th:text="${student.sid}">编号</h2><br />
<h2 th:text="${student.sname}">姓名</h2><br />
<!--
变量表达式:选择变量表达式
* 用来代替父标签中的${student}
-->
<div th:object="${student}">
<h2 th:text="*{sid}">编号</h2><br />
<h2 th:text="*{sname}">年龄</h2>
</div>
<!--
变量表达式:路径变量表达式
带参数跳转相对路径,
传统风格和RESTful风格
在form表单中也可以使用
-->
<a th:href="@{back1(sid=${student.sid},sname=${student.sname})}">传统风格</a><br />
<a th:href="@{'back2/'+${student.sid}+'/'+${student.sname}}">RESTful风格</a>
</body>
</html>
2、常见属性
和html标签的属性没任何区别,只不过要加一个“th”前缀而已,但是一般只有从后台取值的时候,需要加上th,否则无法解析。
当然,在<script>中通过src引入js文件是无法引入的,需要通过th:src来引入。
一些比较重要的属性:
A、循环遍历 th:each
<!--
循环遍历:th:each
遍历list、map、数组
-->
<div th:each="student:${list}">
<span th:text="${studentStat.index}"></span>
<span th:text="${student.sid}"></span>
<span th:text="${student.sname}"></span>
</div>
<div th:each="student:${map}">
<span th:text="${studentStat.index}"></span>
<span th:text="${student.key}"></span>
<span th:text="${student.value}"></span>
<span th:text="${student.value.sname}"></span>
</div>
<div th:each="student:${stus}">
<span th:text="${studentStat.index}"></span>
<span th:text="${student.sid}"></span>
<span th:text="${student.sname}"></span>
</div>
B、条件判断 th:if th:switch
<!--
条件判断 th:if th:switch
-->
<div th:if="${flag == true}">条件为真则显示这句话</div>
<div th:switch="${flag}">
<span th:case="true">是true哦</span>
<span th:case="false">是false哦</span>
<span th:case="*">上述情况都不满足的时候生效</span>
</div>
C、内敛表达式 th:inline
<!--
内敛表达式 th:inline
有三个取值:
text:
内敛文本 取值不用依托于标签
th:inline="text" 一般放在<body>标签上
javascript:
内敛脚本
写js的时候<script>标签一般都要加
这样的话在js代码中也可以[[${student}]]取值
none 没啥用
-->
<div th:inline="text">
[[${student}]]内敛文本
</div>
<script type="text/javascript" th:inline="javascript">
function showData(){
alert([[${student.sid}]]);
}
</script>
<button onclick="showData()">展示数据</button>
D、字符串拼接
<!--字符串拼接-->
<span th:text="|sid是${student.sid},sname是${student.sname}|"></span>
E、运算符
算术运算符:+ - * \ %
逻辑运算符:< > <= >= == !=
三目运算符: 表达式?正确结果:错误结果
F、基本对象/功能对象
基本对象:
以#开头:#session #request
<!--
基本对象:#session #rerquest
当然咯,你代码肯定要在session和request中把数据放进去
-->
<span th:text="${#session.getAttribute('session')}"></span>
<span th:text="${#request.getAttribute('request')}"></span>
功能对象:
见图B。