快捷導(dǎo)航

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

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

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

前言

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

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

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

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

SpringBoot項(xiàng)目中沒(méi)有WebApp目錄，只有src目錄。在src/main/resources 下面有 static 和 templates 兩個(gè)文件夾。SpringBoot默認(rèn)在static 目錄中存放靜態(tài)資源，而 templates 中放動(dòng)態(tài)頁(yè)面。
static目錄
SpringBoot通過(guò) /resources/static 目錄訪問(wèn)靜態(tài)資源

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

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

templates目錄
在SpringBoot中不推薦使用JSP作為動(dòng)態(tài)頁(yè)面，而是默認(rèn)使用Thymeleaf編寫(xiě)動(dòng)態(tài)頁(yè)面。templates目錄是存放Thymeleaf頁(yè)面的目錄。

二、變量輸出

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)頁(yè)面顯示程序員，動(dòng)態(tài)頁(yè)面使用后端傳來(lái)的msg數(shù)據(jù)代替 -->
    <h1 th:text="${msg}">程序員</h1>
</body>

2.2 創(chuàng)建對(duì)應(yīng)的Controller

因?yàn)閠emplate中的html文件不能直接訪問(wèn)，需要編寫(xiě)Controller跳轉(zhuǎn)到頁(yè)面中。代碼如下：

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

2.3 在視圖展示model中的值

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

運(yùn)行結(jié)果：

果然返回成功。OK，讓我們進(jìn)行下一項(xiàng)的測(cè)試

三、操作字符串和時(shí)間

3.1 操作字符串

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

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

使用方法

<hr>
<hr>
<hr>

運(yùn)行結(jié)果

3.2 操作時(shí)間

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

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

準(zhǔn)備數(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>

運(yùn)行結(jié)果