Thymeleaf

最新推荐文章于 2023-06-27 16:22:01 发布

森！！仔

最新推荐文章于 2023-06-27 16:22:01 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/zs1972551648/article/details/126256254

版权

前段专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Thymeleaf是一种类似于JSP的动态网页技术

1 Thymeleaf简介

JSP 必须依赖Tomcat运行，不能直接运行在浏览器中
HTML可以直接运行在浏览器中，但是不能接收控制器传递的数据
Thymeleaf是一种既保留了HTML的后缀能够直接在浏览器运行的能力、又实现了JSP显示动态数据的功能——静能查看页面效果、动则可以显示数据

2 Thymeleaf的使用

SpringBoot应用对Thymeleaf提供了良好的支持

2.1 添加thymeleaf的starter

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.2 创建Thymeleaf模板

Thymeleaf模板就是HTML文件

SpringBoot应用中 resources\templates目录就是用来存放页面模板的
重要说明：
- static 目录下的资源被定义静态资源，SpringBoot应用默认放行；如果将HTML页面创建static目录是可以直接访问的
templates 目录下的文件会被定义为动态网页模板，SpringBoot应用会拦截templates中定义的资源；如果将HTML文件定义在templates目录，则必须通过控制器跳转访问。
在templates创建HTML页面模板
创建PageController，用于转发允许"直接访问"的页面请求

@Controller
@RequestMapping("/page")
public class PageController {

    @RequestMapping("/test.html")
    public String test(){
        return "test";
    }

}

3 Thymeleaf基本语法

如果要在thymeleaf模板中获取从控制传递的数据，需要使用th标签

3.1 在thymeleaf模板页面引入th标签的命名空间

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    </body>
</html>

3.2 th:text

在几乎所有的HTML双标签都可以使用 th:text属性，将接收到的数据显示在标签的内容中

<label th:text="${price}"></label>
<div th:text="${str}"></div>
<p th:text="${book.bookName}"></p>

3.3 th:inline 内联

HTML内联

<p th:inline="text">图书名称：[[${book.bookName}]]</p>

CSS内联

<style type="text/css" th:inline="css">
    .style1{
        color:[[${color}]]
    }
</style>

JavaScript内联

<script type="css/javascript" th:inline="javascript">
   
</script>

3.4 th:object 和 *

<div th:object="${book}">
    <p th:text="*{bookId}"></p>
    <p th:text="*{bookName}"></p>
    <p th:text="*{bookAuthor}"></p>
</div>

4 流程控制

4.1 th:each 循环

<table style="width: 600px" border="1" cellspacing="0">
    <caption>图书信息列表</caption>
    <thead>
        <tr>
            <th>图书ID</th>
            <th>图书名称</th>
            <th>作者</th>
        </tr>
    </thead>
    <tbody>
        <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>

4.2 分支

th:if 如果条件不成立，则不显示此标签

<td th:if="${b.bookPrice}>40" style="color:red">太贵！！！</td>
<td th:unless="${b.bookPrice}>40" style="color:red">太贵！！！</td>

<td th:if="${b.bookPrice}<=40" style="color:green">推荐购买</td>

th:switch 和 th:case

<td th:switch="${b.bookPrice}/10">
    <label th:case="3">建议购买</label>
    <label th:case="4">价格合理</label>
    <label th:case="*">价格不合理</label>
</td>
<td th:switch="${user.gender}">
    <label th:case="M">男</label>
    <label th:case="F">女</label>
    <label th:case="*">性别不详</label>
</td>

5 碎片使用

5.1 碎片的概念

碎片，就是HTML片段，我们可以将多个页面中使用的相同的HTML标签部分单独定义，然后通过th:include可以在HTML网页中引入定义的碎片

5.2 碎片使用案例

定义碎片 th:fragment

header.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="fragment1" style="width: 100%; height: 80px;background: deepskyblue; color:white; font-size: 25px; font-family:文鼎霹雳体">
    千锋武汉Java2010班，六六六！！！
</div>

</body>
</html>

footer.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: 30px;background: lightgray; color:white; font-size: 16px;">
    千锋教育 武汉校区
</div>

</body>
</html>

引用碎片 th:include 和 th:replace

a.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="header::fragment1"></div>-->
    <div th:replace="header::fragment1"></div>

    <div style="width: 100%; height: 500px">
        定义内容
    </div>

<!--    <div th:include="footer::fragment2"></div>-->
    <div th:replace="footer::fragment2"></div>
</body>
</html>