Thymeleaf:是一种类似于JSP的动态网页技术
一、简介
- JSP必须依赖Tomcat运行 不能直接运载浏览器中
- HTML可以直接运行在浏览器中 但是不能接受后台传递的数据
- Thymeleaf是一种既保留html的后缀，能够直接在浏览器运行，又实现jsp显示动态数据的功能
二、使用
springboot应用对Thymeleaf提供了良好的支持
3.1、添加starter的依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3.2、创建Thymeleaf模板
Thymeleaf模板就是HTML文件
-
springboot应用中resources/templates目录就是用来存放页面模板的 -
重要说明:-
static目录下的资源被定义静态资源springboot会自动放行 html放在里面可以直接访问 -
templates目录下的文件会被定义为动态网页模板，springboot会拦截此目录下的文件，如果将html定义在此目录中 必须通过控制器转发访问
-
image.png
3.3、Thymeleaf基本语法
- 在
Thymeleaf模本中引入th标签的命名空间
image.png
- 使用
Model进行传值
image.png
-th:text
在几乎所有的HTML标签都可以使用th:text属性，将接收的数据显示在标签的内容中
<body>
价格：<label th:text="${price}"></label><br/>
字符串：<div th:text="${str}"></div>
<p th:text="${book.bookName}"></p>
</body>
-
th:inline内联
HTML内联 把内容放在html标签里面
价格：<label th:text="${price}"></label><br/>
字符串：<div th:text="${str}"></div>
<p th:text="${book.bookName}">图书名称：</p>
<p th:inline="text">图书名称：[[${book.bookName}]]</p>
th:inline = "css"
css内联取值
<style type="text/css" th:inline="css">
.style1{
color: [[${color}]],
}
</style>
- javaScript内联
<script type="javascript" th:inline="javascript">
</script>
-th:object和*的使用
<div th:object="${book}">
<p th:text="*{bookId}"></p>
<p th:text="*{bookName}"></p>
<p th:text="*{bookAuthor}"></p>
</div>
3.4、Thymeleaf流程控制语法
-
th:each循环
<table>
<caption>图书信息标题</caption>
<thead>
<tr>
<th>图示ID</th>
<th>图示名称</th>
<th>图书作者</th>
</tr>
</thead>
<tbody>
<!-- th:each会循环当前标签-->
<tr th:each="b:${books}">
<td th:text="${b.bookId}"></td>
<td th:text="${b.bookName}"></td>
<td th:text="${b.bookAuthor}"></td>
</tr>
</tbody>
</table>
th:if
条件标签 不满足条件不显示条件
<table>
<caption>图书信息标题</caption>
<thead>
<tr>
<th>图示ID</th>
<th>图示名称</th>
<th>图书作者</th>
<th>图书价格</th>
<th>图书购买建议</th>
</tr>
</thead>
<tbody>
<!-- th:each会循环当前标签-->
<tr th:each="b:${books}">
<td th:text="${b.bookId}"></td>
<td th:text="${b.bookName}"></td>
<td th:text="${b.bookAuthor}"></td>
<td th:text="${b.price}"></td>
<td th:if="${b.price}>40" style="color: red">太贵！！！</td>
<td th:if="${b.price}<=40" style="color: green">可以购买</td>
</tr>
</tbody>
</table>
-
th:switch和th:case
<tbody>
<!-- th:each会循环当前标签-->
<tr th:each="b:${books}">
<td th:text="${b.bookId}"></td>
<td th:text="${b.bookName}"></td>
<td th:text="${b.bookAuthor}"></td>
<td th:text="${b.price}"></td>
<!-- <td th:if="${b.price}>40" style="color: red">太贵！！！</td>-->
<!-- <td th:if="${b.price}<=40" style="color: green">可以购买</td>-->
<th th:switch="${b.price}/10">
<label th:case="3">建议够买</label>
<label th:case="5.4">合理</label>
<label th:case="*">不合理</label>
</th>
</tr>
</tbody>
- 碎片使用
th:include和th:fragment- 定义碎片
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="fragment1" style="width: 100%; height: 50px;background-color: blue;font-size: 25px;">
祁红旺头
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="fragment2" style="width: 100%; height: 40px;background-color: red;font-size: 25px;">
祁红旺尾
</div>
</body>
</html>
- 引用碎片
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:include="head::fragment1"></div>
<div style="width: 100%;height: 400px">
内容
</div>
<div th:include="footer::fragment2"></div>
</body>
</html>
备用
image.png
image.png
网友评论