Spring Boot 整合 Thymeleaf 實例分享

Posted on by

一、什麼是 Thymeleaf

Thymeleaf 是新一代的 Java 模板引擎，類似於 Velocity、FreeMarker 等傳統引擎，其語言和 HTML 很接近，而且擴展性更高；

Thymeleaf 的主要目的是將優雅的模板引入開發工作流程中，並將 HTML 在瀏覽器中正確顯示。同時能夠作為靜態引擎，讓開發成員之間更方便協作開發；

Spring Boot 官方推薦使用模板，而且 Spring Boot 也為 Thymeleaf 提供瞭完整的自動化 配置解決方案；

Thymeleaf 使用教程請戳 Tutorial: Using Thymeleaf，配合 Spring 使用的教程請戳 Tutorial: Thymeleaf + Spring。

二、整合過程

準備過程

正式開始整合過程之前，這裡先給出本文的搭建環境，方便大傢進行後續內容的學習。

  • JDK 11（理論上其他版本的 JDK 也是可以的，但是更為推薦 JDK 1.8 及以後的版本）
  • IDEA（這裡沒有啥要求，但我個人的話是出新的版本我就會更新，雖然臃腫，但是更新瞭確實好用 😂）
  • SpringBoot 2.x（現在主流應該都是 2.x 版本，1.x 的都是老一點的版本瞭）

添加 Thymeleaf 依賴

添加 Thymeleaf 依賴有兩種方式：

  • 第一種

在新建項目時添加，在 Templeate Engines 中勾選 Thymeleaf；

  • 第二種

對於忘記在新建項目時未添加 Thymeleaf 依賴的項目，可以直接在項目的 pom.xml 中手動添加依賴即可；

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

編寫實體類和 Controller

  • 新建實體類 User

這裡因為使用 Lombok，所以省去瞭各種 setter、getter，同時還省去瞭各種構造方法和重寫 toString() 等方法，大大簡化瞭代碼。而我們所要做的，僅僅是在 pom.xml 中添加 Lombok 的依賴，然後在我們的實體類中加入對應的註解即可。

以下是在 pom.xml 中插入 Lombok 依賴的對應代碼。

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

然後我們就可以編寫我們的實體類，這裡主要用到瞭 @Data、@Component、@AllArgsConstructor 、NoArgsConstructor 四個註解，其中各個註解的含義如下：

  • @Component：把類實例化到 Spring 容器，相當於在配置文件中配置；
  • @Data ：給類的所有屬性提供 get 和 set 方法，此外還有 equals、canEqual、hashCode、toString 方法以及 默認參數為空的構造方法；
  • @AllArgsConstructor：為類提供一個 全參構造方法，但此時不再提供默認構造方法；
  • @NoArgsConstructor：因為使用瞭 AllArgsConstructor 會導致類沒有默認空參構造方法，所以此時需要它為類提供一個 無參構造方法；
package com.cunyu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.stereotype.Component;

/**
 * @author : cunyu
 * @version : 1.0
 * @className : User
 * @date : 2020/7/29 16:20
 * @description : User 實體類
 */

@Component
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private int age;
    private String name;
    private String email;
}
  • 編寫 Controller

此時主要需要註意的是 setViewName() 和 addObject()，前者表示方法對應的前端頁面，也就是我們模板中對應文件名的 .html 文件，而後者則主要給屬性註入值，然後將屬性傳遞到前端模板。

package com.cunyu.controller;

import com.cunyu.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author : cunyu
 * @version : 1.0
 * @className : UserController
 * @date : 2020/7/29 16:22
 * @description : UserController
 */

@Controller
public class UserController {

    // 訪問 ip:port/index
    @GetMapping("/index")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView();
        // 設置跳轉的視圖，即位於 templates/index.html
        modelAndView.setViewName("index");
        modelAndView.addObject("title", "Thymeleaf 使用");
        modelAndView.addObject("desc", "Spring Boot 整合 Thymeleaf");

        User author = new User(25, "村雨遙", "[email protected]");

        modelAndView.addObject("author", author);
        return modelAndView;
    }
}

創建Thymeleaf 模板

第上面的代碼中，我們設置瞭跳轉的視圖為 index，所以我們需要在 src/main/resources/templates 中創建 index.html。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 即 Controller 中的 title 屬性 -->
    <title th:text="${title}"></title>

</head>
<body>
<!-- 即 Controller 中的 desc 屬性 -->
<h1 th:text="${desc}" th:align="center"></h1>

<!-- 即 Controller 中的 author 信息 -->
<h2 th:align="center">=====作者信息=====</h2>
<p th:text="${author?.name}"></p>
<p th:text="${author?.age}"></p>
<p th:text="${author?.email}"></p>
</body>
</html>

三、測試

啟動項目，然後在瀏覽器中訪問 http://localhost:8080/index，如果出現下圖中的信息，說明整合成功。

註意事項：

為瞭方便使用，我們在使用 Thymeleaf 模板時，可以添加一些自己的配置。而添加的位置則是項目的配置文件 application.yml，項目默認配置文件應該是 application.properties，但 SpringBoot 更加推薦使用 yml 來配置，所以我們這裡需要手動將其改為 yml 的格式。

spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html

總結：

本文主要介紹瞭 Themeleaf 的相關簡介，然後對利用 SpringBoot 整合 Thymeleaf 的過程進行瞭描述，最後則是使用 Thymeleaf 中常用的一些相關配置的註意事項。

到此這篇關於Spring Boot 整合 Thymeleaf 詳情的文章就介紹到這瞭,更多相關Spring Boot 整合 Thymeleaf 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：