1. 引入

在以前，我們通常將前端交給我們的html頁面轉成jsp頁面，通過jsp輕松實作資料的顯示，及前后端互動等，

jsp支持非常強大的功能，能寫Java代碼，但是springboot默認是不支持jsp的

如果直接用純靜態頁面的方式，開發會十分麻煩，這就引入了模板引擎

2. 什么是模板引擎？

模板引擎是為了使用戶界面與業務資料（內容）分離而產生的，它可以生成特定格式的檔案，用于網站的模板引擎就會生成一個標準的[HTML]檔案；SpringBoot推薦使用模板引擎

模板引擎有非常多，過去的jsp就是一個模板引擎，還有用的比較多的freemarker，包括SpringBoot給推薦的Thymeleaf
模板引擎很多，但原理都是如下所示：
當我們寫一個頁面模板，有些值是我們在后臺封裝的一些資料，是動態的，我們會寫一些運算式取出這些值，模板引擎按照這些資料幫你把這運算式決議、填充到我們指定的位置，最終把這個資料生成一個我們想要的內容寫出
所有的模板引擎原理都一致，只是不同模板引擎的語法會不同
模板技術并不是什么神秘技術，干的是拼接字串的體力活，模板引擎就是利用正則運算式識別模板標識，并利用資料替換其中的識別符號

常用模板引擎對比：

3. Thymeleaf

1. 簡介

Thymeleaf 的主要目標是將優雅的自然模板帶到您的開發作業流程中—HTML能夠在瀏覽器中正確顯示，并且可以作為靜態原型，從而在開發團隊中實作更強大的協作，Thymeleaf能夠處理HTML，XML，JavaScript，CSS甚至純文本，

thymeleaf可處理六種模板，每種模板稱為模板模式：

有兩種標記模板模式（HTML、XML）

三個文本模板模式（TEXT、JAVASCRIPT、CSS）

無操作模板模式（RAW）

Thymeleaf 官網：https://www.thymeleaf.org/

Github地址：https://github.com/thymeleaf/thymeleaf

官網檔案：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process

可以去https://www.thymeleaf.org/documentation.html下載官方檔案

2. 匯入Thymeleaf

當前版本為3.x，只需匯入下方一個依賴即可

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

匯入依賴后，查看jar包是否匯入

可以發現自動匯入了下面兩個包（2.x的版本需要單獨匯入以下兩個依賴）

<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
	<groupId>org.thymeleaf.extras</groupId>
	<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

3. 使用Thymeleaf

我們首先得按照SpringBoot的自動配置原理看一下我們這個Thymeleaf的自動配置規則，在按照那個規則，我們進行使用，

我們去找一下Thymeleaf的自動配置類：ThymeleafProperties

可以看到默認的前綴和后綴，就是Thymeleaf的視圖決議器

總結：使用thymeleaf只需要匯入對應的依賴，然后將html頁面放在resource下的templates目錄即可，thymeleaf就可以幫我們自動渲染了

4. 簡單測驗

1、撰寫一個TestController

package com.zsr.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
    @RequestMapping("/test")
    public String TestThymeleaf(Model model) {
        model.addAttribute("msg", "Hello,Thymeleaf");
        return "test";
    }
}

2、撰寫一個測驗頁面 test.html 放在 templates 目錄下

首先引入thymeleaf命名空間約束

xmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>測驗Thymeleaf</title>
</head>
<body>
<!--th:text就是將div中的內容設定為它指定的值-->
<div th:text="${msg}"></div>
</body>
</html>

3、啟動專案請求測驗

訪問http://localhost:8080/test

成功取到值

5. thymeleaf語法

參考：https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html

https://www.cnblogs.com/jnba/p/10832878.html

1、th屬性

th:text：文本替換；

th:utext：支持html的文本替換，

th:value：屬性賦值

th:each：遍歷回圈元素

th:if：判斷條件，類似的還有th:unless，th:switch，th:case

th:insert：代碼塊引入，類似的還有th:replace，th:include，常用于公共代碼塊提取的場景

th:fragment：定義代碼塊，方便被th:insert參考

th:object：宣告變數，一般和*{}一起配合使用，達到偷懶的效果，

th:attr：設定標簽屬性，多個屬性可以用逗號分隔

2、標準運算式語法

${...} 變數運算式，Variable Expressions

#常用的內置物件
`ctx` ：背景關系物件
`vars` ：背景關系變數
`locale`：背景關系的語言環境
`request`：（僅在web背景關系）的 HttpServletRequest 物件
`response`：（僅在web背景關系）的 HttpServletResponse 物件
`session`：（僅在web背景關系）的 HttpSession 物件
`servletContext`：（僅在web背景關系）的 ServletContext 物件

#常用的內置方法
`strings`：字串格式化方法，常用的Java方法它都有，比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等
`numbers`：數值格式化方法，常用的方法有：formatDecimal等
`bools`：布爾方法，常用的方法有：isTrue，isFalse等
`arrays`：陣列方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等
`lists`,`sets`：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等
`maps`：物件方法，常用的方法有：size，isEmpty，containsKey，containsValue等
`dates`：日期方法，常用的方法有：format，year，month，hour，createNow等

@{...} 鏈接運算式，Link URL Expressions

#{...} 訊息運算式，Message Expressions

~{...} 代碼塊運算式，Fragment Expressions

*{...} 選擇變數運算式，Selection Variable Expressions

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/125101.html

標籤：其他

上一篇：Vue3.0.0 is coming !

下一篇：JavaScript 技術篇-一段js代碼展示可以隨滑鼠移動變換樣式的卡通人物，動態女生眼睛跟著鼠轉動

SpringBoot-web開發(三): 模板引擎Thymeleaf

目錄