SpringBoot---Thymeleaf

最新推荐文章于 2024-07-22 08:30:00 发布

庄～

最新推荐文章于 2024-07-22 08:30:00 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/m0_63629191/article/details/124806184

版权

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

1 、Thymeleaf简介

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

静：能查看页面效果
动：可以显示数据

2 Thymeleaf的使用

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

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目录就是用来存放页面模板的
说明：1、static目录下的资源被定义静态资源，SpringBoot应用默认放行；如果将HTML页面创建static目录是可以直接访问的

2、templates目录下的文件会被定义为动态网页模板，Springboot应用会拦截templates中定义的资源；如果将HTML文件定义在templates目录，则必须通过控制器跳转访问

在templates创建HTML页面模板
创建PageCotronller，用于转发允许“直接访问”的页面请求

 @Controller
 @RequestMapper("/p")
 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://ww.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> <br/>
<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: aqua;
         }
</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:if="${b.bookPrice}<=40" style="color: aquamarine">建议购买</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}/10">
     <label th:case="M">男</label>
     <label th:case="F">女</label>
     <label th:case="*">性别不详</label>
   </td>