天天看點
傳回

Spring Boot 架構（四）—— Spring Boot 之 Thymeleaf 頁面模闆引擎一、Thymeleaf 頁面模闆概述

Spring Boot 之 Thymeleaf 頁面模闆引擎

  • 一、Thymeleaf 頁面模闆概述
    • 1.1 Thymeleaf 頁面模闆概述
    • 1.2 Spring Boot 內建 Thymeleaf 模闆
    • 1.3 Thymeleaf 模闆常用文法

一、Thymeleaf 頁面模闆概述

1.1 Thymeleaf 頁面模闆概述

1.1.1 Thymeleaf 介紹

freemaker 是一種模闆引擎技術，其工作原理是在伺服器響應html之前，先将html模闆檔案中的插值替換為真實的資料，然後在将html響應到用戶端。使用模闆引擎可以替代JSP實作動态網頁。Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模闆引擎。

Thymeleaf是當今比較流行的模闆架構，并且是Spring Boot官方推薦使用的模闆架構。

1.2 Spring Boot 內建 Thymeleaf 模闆

1.2.1 建立項目引入Thymeleaf 依賴

Thymeleaf 的依賴如下

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

另外，由于Thymeleaf對HTML的校驗特别嚴格，比如标簽沒有結束等可能會對不熟悉者造成未知的困惑，是以我們還需要加入nekohtml的依賴來避免這種情況。

<dependency>
   <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

1.2.2 在配置檔案中配置Thymeleaf

## thymeleaf緩存是否開啟，開發時建議關閉，否則更改頁面後不會實時展示效果
spring.thymeleaf.cache=false
## thymeleaf編碼格式
spring.thymeleaf.encoding=UTF-8
## thymeleaf對HTML的校驗很嚴格，用這個去除thymeleaf嚴格校驗
spring.thymeleaf.mode=LEGACYHTML5
## thymeleaf模闆檔案字首
spring.thymeleaf.prefix=classpath:/templates/
## thymeleaf模闆檔案字尾
spring.thymeleaf.suffix=.html

配置結果

Spring Boot 架構（四）—— Spring Boot 之 Thymeleaf 頁面模闆引擎一、Thymeleaf 頁面模闆概述

1.2.3 測試Thymeleaf

建立Controller類

@Controller
public class ThymeleafController {

    @GetMapping("/")
    public String test(ModelMap modelMap){
        modelMap.addAttribute("code","This is Thymeleaf");
        return "index";
    }
}

在

src/mian/resources/templates

下建立一個

index.html

（需要結合配置檔案中

spring.thymeleaf.prefix

的配置資訊存放HTML），使用

th:text="${code}"

來接收背景傳來的資料。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf</title>
</head>
<body>
    <h1 th:text="${code}"></h1>
</body>
</html>

啟動項目并在浏覽器通路``，得到如下結果

Spring Boot 架構（四）—— Spring Boot 之 Thymeleaf 頁面模闆引擎一、Thymeleaf 頁面模闆概述

完整的pom.xml檔案

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.test</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-thymeleaf-demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- Thymeleaf 依賴-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 去除HTML的嚴格校驗-->
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
        </dependency>
        <!-- 熱部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

1.3 Thymeleaf 模闆常用文法

1.3.1 内容替換指令

  • th:text

     ：設定目前元素的文本内容，替換标簽的文本内容

  • th:utext

     ：支援html标簽的内容替換

  • th:value

     ：設定目前元素的值，替換表單控件的value值

  • th:attr

     ：設定目前元素的屬性，文法

    th:attr="屬性名稱=值或者表達式"

     ,可用于設定單選款或者多選款選中，例如：

    th:attr="checked=${user.sex==1}"

  • th:checked

     ：設定單選框是否選中

    th:checked="${實體屬性==單選框的value值}"

  • th:selected

     ：設定下拉框選中，文法

    th:selected="${user.majorid eq major.id}"

     。

  • th:onclick

    ：添加點選事件，在點選事件的函數中可以使用表達式傳參

    除了上述指令外，還可以使用th:屬性名稱設定html的屬性值，例如超連結的 href、圖檔的src等等

1.3.2 内容拼接

要講動态資料與字元串進行拼接的方式：

th:onclick="|del(${user.id})|"

，寫在兩個豎線之間的内容可以直接進行靜态資料和動态資料的拼接

1.3.3 代碼塊引入指令

  • th:insert

     ：代碼塊引入，一般用作提取公共檔案，或者引用公共靜态檔案等。

  • th:replace

     ：代碼塊引入，一般用作提取公共檔案，或者引用公共靜态檔案等。

  • th:incloud

     ：代碼塊引入，一般用作提取公共檔案，或者引用公共靜态檔案等。

1.3.4 條件判斷指令

  • th:if

     ：

    th:if="${條件表達式}

     "：條件成立渲染該标簽

  • th:unless

     ：

    th:unless="${條件表達式}

     "：條件不成立渲染該标簽

  • th:switch

     ：用作條件判斷

  • th:case

     ：用作條件判斷

1.3.5 循環指令

  • th:each

     ：

    th:each

     =“變量名 狀态值名稱:集合”，例如：

    th:each="user ,i:${list}"

     ，其中user表示循環産生的對象，i表示狀态值，狀态值中包含了序号，集合長度等資訊：

  • i.index

     ：目前疊代對象的 index（從0開始計算）

  • i.count

     ：目前疊代對象的 index(從1開始計算)

  • i.size

     ：被疊代對象的大小

  • i.current

     ：目前疊代變量

  • i.even/odd

     ：布爾值，目前循環是否是偶數/奇數（從0開始計算）

  • i.first

     ：布爾值，目前循環是否是第一個

  • i.last

     ：布爾值，目前循環是否是最後一個

1.3.6 Thymeleaf 内置方法

  • #numbers

     ：數字方法。

  • #dates

     ：日期方法。

  • #calendars

     ：月曆方法。

  • #strings

     ：字元串方法。

  • #lists

     ：集合方法。

  • #maps

     ：對象方法。
SpringBoot 架構 spring boot架構 Thymeleaf模闆引擎 Thymeleaf頁面模闆 java springbot
上一篇: thymeleaf 國際化
下一篇: hdu1312-Red and Black（深度搜尋）Red and Black

繼續閱讀