1 Thymeleaf介绍
- 在spring的官方中并不支持jsp的渲染模板，对jsp并不友好，推荐使用Thymeleaf、FreeMarker等模板引擎
- .html（不能取域对象的值）
- 能写Java代码的HTML，但是thymsleaf可以取值存值
- 特点：
- 动静结合：Thymeleaf页面可以独立运行，不依赖与服务器(jsp不可以)
- 开箱即用：支持标准的模板语言，无需导入第三方配置
- SpringBoot完美整合：SpringBoot支持Thymeleaf的启动器
2 Thymeleaf入门
2.1 导入依赖
- 创建导入web起步依赖
- Thymeleaf模板起步依赖
<!-- Thymeleaf模板起步依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.2 编写Thymeleaf页面
页面默认情况下必须定义在templates文件夹中
templates文件夹默认不能直接访问（不是静态资源），必须通过Controller转发访问
- xmlns:th xml name space ：Thymeleaf 必须导入Thymeleaf名称空间
- msg即为后端的key
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello,Thymeleaf</h1>
<h1 th:text="${msg}"></h1>
</body>
</html>
2.3 编写Controller
Thymeleaf默认的视图解析器前缀和后缀
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
@Controller
public class TestController {
@RequestMapping("hello")
public String test(Model model){
model.addAttribute("msg","Hello,Thymeleaf！！！！");
return "hello";
}
}
3 Thymeleaf语法
3.1 th:text 标签
th:text 标签：表示获取域对象中的内容
- 简单类型
- 对象类型
- Map集合
<h1>th:text标签取值</h1>
<!--简单类型-->
<span th:text="${name}"></span>
<span th:text="${age}"></span>
<span th:text="${money}"></span><br>
<!--对象类型-->
<span th:text="${user.username}"></span>
<span th:text="${user.password}"></span>
<span th:text="${user.salary}"></span><br>
<!--Map集合-->
<span th:text="${k1}"></span>
<span th:text="${k2}"></span>
<span th:text="${k3}"></span><br>
3.2 th:each标签
th:each标签 用于获取集合中的值
<h1>th:each标签遍历</h1>
<!--集合类型-->
<table width="80%" align="center" border="1px" cellspacing="0px">
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>工资</th>
</tr>
<tr th:each="u:${userList}">
<td th:text="${u.id}"></td>
<td th:text="${u.username}"></td>
<td th:text="${u.password}"></td>
<td th:text="${u.salary}"></td>
</tr>
</table>
3.3 th:if标签
th:if标签 用于做if判断
<h1>th:if标签判断</h1>
<span th:if="${age<18}">未成年</span>
<span th:unless="${age<18}">成年</span>
3.4 th:inline标签
th:inline 内联标签，嵌套在标签内部使用
<h1>th:inline标签内联</h1>
<!--html内联-->
<span th:inline="text">姓名为：[[${name}]]</span>
<!-- css内联(css中取值) -->
<style th:inline="css">
span{
color:[[${color}]]
}
</style>
<!-- javascript内联(javascript中取值) -->
<script th:inline="javascript">
console.log([[${name}]]);
</script>
3.5 碎片标签
<!--定义碎片-->
<div th:fragment="header" style="height: 200px;background-color: #889988">
网页头部
</div>
<div th:fragment="footer" style="height: 200px;background-color: red">
网页底部
</div>
直接引入页面
- 引入头部页面
- 引入尾部页面
<!-- 引入头部页面 -->
<div th:include="header"></div>
<h1>页面正文内容</h1>
<!-- 引入尾部页面 -->
<div th:include="footer"></div>
引入页面中的碎片
注意：如果引入碎片那么css样式会失效，那么需要使用th:replace标签
th:replace="header::header" 前面的header表示页面名，后面表示碎片名称文章来源：https://www.toymoban.com/news/detail-430391.html
<!-- 引入头部片段-->
<div th:replace="header::header"></div>
<h1>页面正文内容</h1>
<!-- 引入尾部片段 -->
<div th:replace="footer::footer"></div>
3.日期处理
日期处理接近于固定格式
<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span>文章来源地址https://www.toymoban.com/news/detail-430391.html
<!--日期处理-->
<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span>
到了这里，关于SpringBoot -04 Thymeleaf入门与基础语法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
