文章: 阅读:

Thymeleaf

JavaJ2EE

前言

  • 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>

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-12-06 23:04


评论


文章目录
  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 热更新
隐藏目录