Thymeleaf


Thymeleaf模板引擎

Thymeleaf 應該是目前最受歡迎的模板引擎技術了,Spring Boot 官方也推薦 Java web 開發中使用該技術來替代 JSP 技術,主要由於其“原型即頁面”的理念與 Spring Boot 倡導的快速開發非常契合,同時 Thymeleaf 模板引擎技術也確實擁有其他技術所不具備的優點。

Thymeleaf 3

Thymeleaf 於 2016 年 5 月 8 日正式發布了 thymeleaf-3.0.0.RELEASE 版本,目前的大部分項目開發過程中也是使用 Thymeleaf 3.0 及以上版本,因此在這里簡單的介紹一下 Thymeleaf 3 的特性。

  • 完整的 HTML5 標記支持,全新的解析器

  • 自帶多種模板模式,也可擴展支持其他模板格式。

  • 在 web 和非 web 環境(離線)下都可以正常工作

  • 對 Spring web 開發的支持非常完善

  • 獨立於 Servlet API

Thymeleaf快速上手

新建一個項目

  • 導入thymeleaf依賴
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

導入約束

  • 在 resources/templates 目錄新建模板文件 thymeleaf.html ,Thymeleaf 模板引擎的默認后綴名即為 html,新增文件后,首先在模板文件的 標簽中導入 Thymeleaf 的名稱空間
  • 導入該名稱空間主要是為了 Thymeleaf 的語法提示和 Thymeleaf 標簽的使用
<html lang="en" xmlns:th="http://www.thymeleaf.org">

新建一個Controller

  • 后端通過Model對象存數據
@Controller
public class ThymeleafController {

    @RequestMapping("/tc")
    public String tc(Model model){
        model.addAttribute("msg","Hello Thymeleaf");
        return "thymeleaf";
    }
}

thymeleaf.html

  • 前端通過thymeleaf語法取出數據
  • 直接打開該頁面顯示內容是:默認
  • 啟動項目,通過請求訪問內容是:Hello Thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--取出后端存的數據-->
<div>
    <h2 th:text="${msg}">默認</h2>
</div>

</body>
</html>

Thymeleaf屬性

th:text 對應的是 HTML5 中的 text 屬性,除 th:text 屬性外,Thymeleaf 也提供了其他的標簽屬性來替換 HTML5 原生屬性的值,屬性節選如下:

  • th:background 對應 HTML5 中的背景屬性
  • th:class 對應 HTML5 中的 class 屬性
  • th:href 對應 HTML5 中的鏈接地址屬性
  • th:id 和 th:name 分別對應 HTML5 中的 id 和 name 屬性...
  • th:block 比較特殊,它是 Thymeleaf 提供的唯一的一個 Thymeleaf 塊級元素,其特殊性在於 Thymeleaf 模板引擎在處理th:block的時候會刪掉它本身,而保留其內容。

可以使用ModelMap存放多個數據

Thymeleaf 語法規則


表達式語法

  • 變量表達式: ${...}
  • 選擇變量表達式: *{...}
  • 信息表達式: #{...}
  • 鏈接 URL 表達式: @{...}
  • 分段表達式: ~{...}

字面量

  • 字符串: 'one text', 'Another one!' ...
  • 數字: 0, 34, 3.0, 12.3 ...
  • 布爾值: true, false
  • Null 值: null
  • 字面量標記:one, sometext, main ...

文本運算

  • 字符串拼接: +
  • 字面量置換: |The name is ${name}|

算術運算

  • 二元運算符: +, -, *, /, %
  • 負號(一元運算符): (unary operator): -

布爾運算

  • 二元運算符: and, or
  • 布爾非(一元運算符): !, not

比較運算

  • 比較: >, <, >=, <= (gt, lt, ge, le)
  • 相等運算符: ==, != (eq, ne)
  • 比較運算符也可以使用轉義字符,比如大於號,可以使用 Thymeleaf 語法 gt 也可以使用轉義字符>

條件運算符

  • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else)
  • Default: (value) ?: (defaultvalue)

特殊語法

  • 無操作: _

Thymeleaf 模板引擎使用注意事項


必須引入名稱空間

  • 即使不引入以上名稱空間,靜態資源訪問以及模板動態訪問都不會報錯,因此有些開發者可能會忽略這個事情。但是建議在開發過程中最好引入該名稱空間,因為引入之后會有 Thymeleaf 代碼的語法提示,能夠提升開發效率,也減少人為造成的低級錯誤。
<html lang="en" xmlns:th="http://www.thymeleaf.org"></html>

禁入模板引擎

  • Thymeleaf 的默認緩存設置是通過配置文件的 spring.thymeleaf.cache 配置屬性決定的,通過如上 Thymeleaf 模板的配置屬性類 ThymeleafProperties 可以發現該屬性默認為 true,因此 Thymeleaf 默認是使用模板緩存的,該設置有助於改善應用程序的性能,因為模板只需編譯一次即可,但是在開發過程中不能實時看到頁面變更的效果,除非重啟應用程序,因此建議將該屬性設置為 false,在配置文件中修改如下:
spring.thymeleaf.cache=false

IDEA 中通過 Thymeleaf 語法讀取變量時爆紅問題

  • 如下圖所示,在剛開始使用 Thymeleaf 開發時可能會碰到這種問題,在模板文件中通過 Thymeleaf 語法讀取變量時,該變量名稱下會出現紅色波浪線,也就是錯誤的標志。

在這里插入圖片描述

  • 只是由於 IDEA 中默認開啟了表達式參數驗證,即使在后端的 model 數據中添加了該變量,但是對於前端文件是無法感知的,因此會報這個錯誤,可以在 IDEA 中默認將驗證關閉或者將提示級別修改掉也可以。
    在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM