快捷導航

SpringBoot自帶模板引擎Thymeleaf使用示例詳解

更新時間：2023年12月11日 11:22:18 作者：會洗碗的CV工程師

Thymeleaf是一款用于渲染XML/HTML5內(nèi)容的模板引擎,類似JSP,它可以輕易的與SpringMVC等Web框架進行集成作為Web應用的模板引擎,本文給大家介紹SpringBoot自帶模板引擎Thymeleaf使用示例,感興趣的朋友一起看看吧

前言

Thymeleaf是一款用于渲染XML/HTML5內(nèi)容的模板引擎，類似JSP。它可以輕易的與SpringMVC等Web框架進行集成作為Web應用的模板引擎。在SpringBoot中推薦使用Thymeleaf編寫動態(tài)頁
面。
Thymeleaf最大的特點是能夠直接在瀏覽器中打開并正確顯示模板頁面，而不需要啟動整個Web應用。Thymeleaf在有網(wǎng)絡(luò)和無網(wǎng)絡(luò)的環(huán)境下皆可運行，它即可以讓美工在瀏覽器查看頁面的靜態(tài)效果，也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動態(tài)頁面效果。沒有數(shù)據(jù)時，Thymeleaf的模板可以靜態(tài)地運行；當有數(shù)據(jù)返回到頁面時，Thymeleaf標簽會動態(tài)地替換掉靜態(tài)內(nèi)容，使頁面動態(tài)顯示。

引入Thymeleaf起步依賴需要再pom.xml添加以下代碼

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

一、SpringBoot靜態(tài)資源相關(guān)目錄

SpringBoot項目中沒有WebApp目錄，只有src目錄。在src/main/resources 下面有 static 和 templates 兩個文件夾。SpringBoot默認在static 目錄中存放靜態(tài)資源，而 templates 中放動態(tài)頁面。
static目錄
SpringBoot通過 /resources/static 目錄訪問靜態(tài)資源

除了 /resources/static 目錄，SpringBoot還會掃描以下位置的靜態(tài)資源：

/resources/META‐INF/resources/
/resources/resources/
/resources/public/

templates目錄
在SpringBoot中不推薦使用JSP作為動態(tài)頁面，而是默認使用Thymeleaf編寫動態(tài)頁面。templates目錄是存放Thymeleaf頁面的目錄。

二、變量輸出

2.1 在templates目錄下創(chuàng)建視圖index.html

要想使用thymeleaf則必須引入他的命名空間http://www.thymeleaf.org

<!DOCTYPE html>
<!-- 引入thymeleaf命名空間，方便使用thymeleaf屬性 -->
<html lang="en"
    xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf入門</title>
</head>
<body>
    <!-- 靜態(tài)頁面顯示程序員，動態(tài)頁面使用后端傳來的msg數(shù)據(jù)代替 -->
    <h1 th:text="${msg}">程序員</h1>
</body>

2.2 創(chuàng)建對應的Controller

因為template中的html文件不能直接訪問，需要編寫Controller跳轉(zhuǎn)到頁面中。代碼如下：

@Controller
public class PageController {
  // 頁面跳轉(zhuǎn)
  @GetMapping("/show")
  public String showPage(Model model){
    model.addAttribute("msg","Hello
Thymeleaf");
    return "index";
 }
}

2.3 在視圖展示model中的值

<hr/>
<input th:value="${msg}">

運行結(jié)果：

果然返回成功。OK，讓我們進行下一項的測試

三、操作字符串和時間

3.1 操作字符串

Thymeleaf提供了一些內(nèi)置對象可以操作數(shù)據(jù)，內(nèi)置對象可直接在模板中使用，這些對象是以#引用的，操作字符串的內(nèi)置對象為strings。

strings常用方法
方法	說明
${#strings.isEmpty(key)}	判斷字符串是否為空，如果為空返回true，否則返回false
${#strings.contains(msg,'T')}	判斷字符串是否包含指定的子串，如果包含返回true，否則返回false
${#strings.startsWith(msg,'a')}	判斷當前字符串是否以子串開頭，如果是返回true，否則返回false
${#strings.endsWith(msg,'a')}	判斷當前字符串是否以子串結(jié)尾，如果是返回true，否則返回false
${#strings.length(msg)}	返回字符串的長度
${#strings.indexOf(msg,'h')}	查找子串的位置，并返回該子串的下標，如果沒找到則返回-1
${#strings.substring(msg,2,5)}	截取子串，用法與JDK的 subString 方法相同
${#strings.toUpperCase(msg)}	字符串轉(zhuǎn)大寫
${#strings.toLowerCase(msg)}	字符串轉(zhuǎn)小寫

使用方法

<hr>
<hr>
<hr>

運行結(jié)果

3.2 操作時間

操作時間的內(nèi)置對象為dates

內(nèi)置對象dates常用方法
方法	說明
${#dates.format(key)}	格式化日期，默認的以瀏覽器默認語言為格式化標準
${#dates.format(key,'yyyy/MM/dd')}	按照自定義的格式做日期轉(zhuǎn)換
${#dates.year(key)}	取年
${#dates.month(key)}	取月
${#dates.day(key)}	取日

準備數(shù)據(jù)

model.addAttribute("date",new Date());

使用示例

<span th:text="${#dates.format(date,'YYYY-MM-dd')}"></span><hr>
<span th:text="${#dates.year(date)}"></span><hr>
<span th:text="${#dates.month(date)}"></span><hr>
<span th:text="${#dates.day(date)}"></span><hr>

運行結(jié)果