• Thymeleaf

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

    1 Thymeleaf简介

    • JSP 必须依赖Tomcat运行，不能直接运行在浏览器中

    • HTML可以直接运行在浏览器中，但是不能接收控制器传递的数据

    • Thymeleaf是一种既保留了HTML的后缀能够直接在浏览器运行的能力、又实现了JSP显示动态数据的功能——静能查看页面效果、动则可以显示数据

    2 Thymeleaf的使用

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

    2.1 添加thymeleaf的starter

    1. <dependency>
    2.     <groupId>org.springframework.bootgroupId>
    3.     <artifactId>spring-boot-starter-thymeleafartifactId>
    4. dependency>

    2.2 创建Thymeleaf模板

    Thymeleaf模板就是HTML文件

    • SpringBoot应用中 resources\templates目录就是用来存放页面模板的

    • 重要说明：

      • static 目录下的资源被定义静态资源，SpringBoot应用默认放行；如果将HTML页面创建static目录是可以直接访问的

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

    • 在templates创建HTML页面模板

    • 创建PageController，用于转发允许"直接访问"的页面请求

    1. @Controller
    2. @RequestMapping("/page")
    3. public class PageController {
    4. ​
    5.     @RequestMapping("/test.html")
    6.     public String test(){
    7.         return "test";
    8.     }
    9. ​
    10. }

    3 Thymeleaf基本语法

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

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

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>Titletitle>
    6.     head>
    7.     <body>
    8. ​
    9.     body>
    10. html>

    3.2 th:text

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

    using thymeleaf.pdf
    zip 0星 超过10%的资源 540KB
    下载
    1. <label th:text="${price}">label>
    2. <div th:text="${str}">div>
    3. <p th:text="${book.bookName}">p>

    3.3 th:inline 内联

    • HTML内联

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

    • CSS内联

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

    • JavaScript内联

      1. <script type="css/javascript" th:inline="javascript">
      2.    
      3. script>

    3.4 th:object 和 *

    1. <div th:object="${book}">
    2.     <p th:text="*{bookId}">p>
    3.     <p th:text="*{bookName}">p>
    4.     <p th:text="*{bookAuthor}">p>
    5. div>

    4 流程控制

    4.1 th:each 循环

    1. <table style="width: 600px" border="1" cellspacing="0">
    2.     <caption>图书信息列表caption>
    3.     <thead>
    4.         <tr>
    5.             <th>图书IDth>
    6.             <th>图书名称th>
    7.             <th>作者th>
    8.         tr>
    9.     thead>
    10.     <tbody>
    11.         <tr th:each="b:${books}">
    12.             <td th:text="${b.bookId}">td>
    13.             <td th:text="${b.bookName}">td>
    14.             <td th:text="${b.bookAuthor}">td>
    15.         tr>
    16.     tbody>
    17. table>

    4.2 分支

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

      1. <td th:if="${b.bookPrice}>40" style="color:red">太贵！！！td>
      2. <td th:unless="${b.bookPrice}>40" style="color:red">太贵！！！td>
      3. ​
      4. <td th:if="${b.bookPrice}<=40" style="color:green">推荐购买td>

    • th:switch 和 th:case

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

    5 碎片使用

    5.1 碎片的概念

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

    5.2 碎片使用案例

    • 定义碎片 th:fragment

      • header.html

        1. html>
        2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
        3. <head>
        4.     <meta charset="UTF-8">
        5.     <title>Titletitle>
        6. head>
        7. <body>
        8. ​
        9. <div th:fragment="fragment1" style="width: 100%; height: 80px;background: deepskyblue; color:white; font-size: 25px; font-family:文鼎霹雳体">
        10.     千锋武汉Java2010班，六六六！！！
        11. div>
        12. ​
        13. body>
        14. html>

      • footer.html

        1. html>
        2. <html lang="en"  xmlns:th="http://www.thymeleaf.org">
        3. <head>
        4.     <meta charset="UTF-8">
        5.     <title>Titletitle>
        6. head>
        7. <body>
        8. ​
        9. <div th:fragment="fragment2" style="width: 100%; height: 30px;background: lightgray; color:white; font-size: 16px;">
        10.     千锋教育 武汉校区
        11. div>
        12. ​
        13. body>
        14. html>

    • 引用碎片 th:include 和 th:replace

      • a.html

        1. html>
        2. <html lang="en"  xmlns:th="http://www.thymeleaf.org">
        3. <head>
        4.     <meta charset="UTF-8">
        5.     <title>Titletitle>
        6. head>
        7. <body>
        8. ​
        10.     <div th:replace="header::fragment1">div>
        11. ​
        12.     <div style="width: 100%; height: 500px">
        13.         定义内容
        14.     div>
        15. ​
        17.     <div th:replace="footer::fragment2">div>
        18. body>
        19. html>

  • 相关阅读:
    关于微信学习的网站
    03 【布局之Aspect-Ratio Container Box-Decoration-Break Object-Fit Object-Position】
    七、监听器
    简化路径[中等]
    网站全灰，仅需一行css代码
    windows通过gitstats-master+gnuplot统计代码量
    雷达基础系列文章之五：雷达调制样式的功能
    【21天学习挑战赛】折半插入排序
    浅谈与 DBA 息息相关的 Database Plus 理念
    oracle使用regexp_substr来拆分，CONNECT BY LEVEL查询卡死，速度慢的问题。
  • 原文地址：https://blog.csdn.net/zs1972551648/article/details/126256254