Thymeleaf是一个用于web和独立环境的现代服务器端Java模板引擎。
Thymeleaf的模板不能直接通过url访问，需要经过控制器才可以
thymeleaf的使用步骤
1. 集成Thymeleaf模板
引入依赖
<!--使用thymelaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2. 编写配置
spring:
thymeleaf:
cache: false # 关闭缓存
prefix: classpath:/templates/ #指定模板位置
suffix: .html #指定后缀
3. 编写控制器测试
@Controller //一定要是@Controller 不能再使用@RestController注解
@RequestMapping("hello")
public class HelloController {
@GetMapping("hello")
public String hello(){
System.out.println("测试与 thymeleaf 的集成");
return "index";
}
}
模板的基本语法
使用时必须在页面中加入thymeleaf如下命名空间:
<html lang="en" xmlns:th="http://www.thymeleaf.org">
获取数据 存入request域
<span th:text="${name}"/>
获取并解析带有html标签的字符串
<span th:utext="${url}"/>
将数据赋值给表单元素
<input type="text" th:value="${username}"/>
- 1.使用 th:text="${属性名}" 获取对应数据,获取数据时会将对应标签中数据清空,因此最好是空标签
- 2.使用 th:utext="${属性名}" 获取对应的数据,可以将数据中html先解析在渲染到页面
- 3.使用 th:value="${属性名}" 获取数据直接作为表单元素value属性
展示对象数据
id:<span th:text="${user.id}"></span>
name:<span th:text="${user.name}"></span>
age:<span th:text="${user.age}"></span>
bir: <span th:text="${user.bir}"></span> ==== <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd HH:mm:ss')}"></span> 日期格式化
条件展示数据
<span th:if="${user.age == 23}">
青年
</span>
展示多条数据
<ul th:each="user:${users}">
<li th:text="${user.id}"></li>
<li th:text="${user.name}"></li>
<li th:text="${user.age}"></li>
<li th:text="${#dates.format(user.bir,'yyyy-MM-dd')}"></li>
</ul>
<ul th:each="user,userStat:${users}">
<li><span th:text="${userStat.count}"/>-<span th:text="${user.id}"/></li> 获取遍历次数count从1开始 index从0开始
<li><span th:text="${userStat.odd}"/>-<span th:text="${user.name}"/></li> 获取当前遍历是否是奇数行
<li><span th:text="${userStat.even}"/>-<span th:text="${user.age}"/></li> 获取当前遍历是否是偶数行
<li><span th:text="${userStat.size}"/>-<span th:text="${user.bir}"/></li> 获取当前集合的总条数
</ul>
引入静态资源
# 使用thymeleaf模板项目中静态资源默认放在resources路径小static目录中
页面中引入
<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/jquery-min.js}"></script>
注意: @{/}代表通过thymeleaf语法动态获取应用名
在js代码中获取项目名
<script>
const ctx = '[[@{/}]]';
</script>
注意:[[书写thymeleaf语法]],这里[[]]是thymeleaf内嵌表达式