Thymeleaf

前言

  • Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理 HTML,XML,JavaScript,CSS 甚至纯文本。

  • Thymeleaf 的主要目标是提供一种优雅且高度可维护的模板创建方式。

  • 为此,它以 “自然模板” 的概念为基础,以不影响模板用作设计原型的方式将其逻辑注入模板文件。这样可以改善设计沟通,并缩小设计团队与开发团队之间的差距。

  • Thymeleaf 官网

  • Thymeleaf 教程

  • Thymeleaf 快速入门

1、Thymeleaf

  • Thymeleaf 跟 JSP 一样,就是运行之后,就得到纯 HTML 了。区别在与,不运行之前,Thymeleaf 也是 纯 HTML。

  • 所以 Thymeleaf 不需要服务端的支持,就能够被以 HTML 的方式打开,这样就方便前端人员独立设计与调试, JSP 就不行了,不启动服务器 JSP 都没法运行出结果来。

  • Thymeleaf 可以配合 Servlet 运行,但是比较常见的是配合 Spring Boot 来运行。当然本质上也是配合 Spring Boot 里的 Spring MVC 来运行的。

  • 修改 pom.xml, 增加了对 thymeleaf 的支持。

    1
    2
    3
    4
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  • application.properties 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # thymeleaf 配置
    spring.thymeleaf.mode=HTML5
    spring.thymeleaf.encoding=UTF-8
    spring.thymeleaf.content-type=text/html

    # 缓存设置为 false, 这样修改之后马上生效,便于调试
    spring.thymeleaf.cache=false

    # 上下文
    server.context-path=/thymeleaf
  • 新建 html 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
    <p th:text="${name}" >name</p>
    <p th:text="'Hello! ' + ${name} + '!'" >hello world</p>
    <p th:text="|Hello! ${name}!|" >hello world</p>
    </body>
    </html>

2、URL

  • URL 通过 th:href="@{/static../../../css/style.css}"th:src="@{/static../../../js/thymeleaf.js}" 引入 css 和 js 文件。

    1
    2
    <link rel="stylesheet" type="text/css" media="all" href="../../webapp/static../../../css/style.css" th:href="@{/static../../../css/style.css}"/>
    <script type="text/javascript" src="../../webapp/static../../../js/thymeleaf.js" th:src="@{/static../../../js/thymeleaf.js}">

3、表达式

  • 表达式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- 显示 转义和非转义的 html 文本 -->
    <p th:text="${htmlContent}" ></p>
    <p th:utext="${htmlContent}" ></p>

    <!-- 显示对象以及对象属性 -->
    <p th:text="${currentProduct}" ></p>
    <p th:text="${currentProduct.name}" ></p>
    <p th:text="${currentProduct.getName()}" ></p>

    <!-- *{} 方式显示属性 -->
    <p th:text="*{name}" ></p>

    <!-- 算数运算 -->
    <p th:text="${currentProduct.price + 999}" ></p>

4、包含

  • 包含另一个页面的内容。

    1
    2
    3
    4
    5
    6
    <footer th:fragment="footer1"> 
    <p >All Rights Reserved</p>
    </footer>
    <footer th:fragment="footer2(start, now)">
    <p th:text="|${start} - ${now} All Rights Reserved|"></p>
    </footer>
    1
    2
    <div th:replace="include::footer1" ></div>
    <div th:replace="include::footer2(2015, 2018)" ></div>

5、条件

  • 条件判断,不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false。

    1
    2
    3
    4
    5
    <!-- 条件判断 -->
    <p th:if="${testBoolean}" >如果 testBoolean 是 true,本句话就会显示</p>
    <p th:if="${not testBoolean}" >取反 ,所以如果 testBoolean 是 true ,本句话就不会显示</p>
    <p th:unless="${testBoolean}" >unless 等同于上一句,所以如果 testBoolean 是 true ,本句话就不会显示</p>
    <p th:text="${testBoolean} ? '当 testBoolean 为真的时候,显示本句话,这是用三相表达式做的' : ''" ></p>

6、遍历

  • 普通遍历:使用 th:each 遍历。

    1
    2
    3
    4
    5
    6
    7
    <tbody>
    <tr th:each="p: ${ps}">
    <td th:text="${p.id}"></td>
    <td th:text="${p.name}"></td>
    <td th:text="${p.price}"></td>
    </tr>
    </tbody>
  • 带状态的遍历:使用 th:each="p, status: ${ps}" 方式遍历,把状态放在 status 里面了,同时还用 3 元表达式判断奇偶。

    1
    2
    3
    4
    5
    6
    7
    8
    <tbody>
    <tr th:class="${status.even} ? 'even' : 'odd'" th:each="p, status: ${ps}">
    <td th:text="${status.index}"></td>
    <td th:text="${p.id}"></td>
    <td th:text="${p.name}"></td>
    <td th:text="${p.price}"></td>
    </tr>
    </tbody>
  • 结合 select:还是用 th:each,但是放在 option 元素上,就可以遍历出多个下拉框出来了。其中 th:selected 表示被选中的项。

    1
    2
    3
    <select size="3">
    <option th:each="p: ${ps}" th:value="${p.id}" th:selected="${p.id==currentProduct.id}" th:text="${p.name}"></option>
    </select>
  • 结合 单选框:其中 th:checked 用于判断是否选中。

    1
    <input name="product" type="radio" th:each="p: ${ps}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="${p.name}" />

7、内置工具

  • 内置工具

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 直接输出日期 ${now}: -->
    <p th:text="${now}"></p>

    <!-- 默认格式化 ${#dates.format(now)}: -->
    <p th:text="${#dates.format(now)}"></p>

    <!-- 自定义格式化 ${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}: -->
    <p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
内置工具 介绍
Execution Info
Messages
URIs/URLs
Conversions
Dates 格式化日期
Calendars
Numbers
Strings
Objects
Booleans
Arrays
Lists
Sets
Maps
Aggregates
IDs

8、CRUD 和 分页

  • CRUD 和分页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!-- mybatis -->
    <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>1.1.1</version>
    </dependency>

    <!-- mysql -->
    <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.21</version>
    </dependency>

    <!-- pageHelper -->
    <dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>4.1.6</version>
    </dependency>

9、Vue.js Restful

10、IDEA 热更新

  • IDEA 热更新:进行相关设置,以达到修改 html 之后,马上就可以看到效果。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
    </dependency>

    <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
文章目录
  1. 1. 前言
  2. 2. 1、Thymeleaf
  3. 3. 2、URL
  4. 4. 3、表达式
  5. 5. 4、包含
  6. 6. 5、条件
  7. 7. 6、遍历
  8. 8. 7、内置工具
  9. 9. 8、CRUD 和 分页
  10. 10. 9、Vue.js Restful
  11. 11. 10、IDEA 热更新
隐藏目录