Spring Boot 整合 Thymeleaf 完整 Web 案例

阿新 • • 發佈：2018-12-23

原創出處作者：泥瓦匠BYSocket 希望轉載，保留摘要，謝謝！

Thymeleaf 是一種模板語言。那模板語言或模板引擎是什麼？常見的模板語言都包含以下幾個概念：資料（Data）、模板（Template）、模板引擎（Template Engine）和結果文件（Result Documents）。

資料資料是資訊的表現形式和載體，可以是符號、文字、數字、語音、影象、視訊等。資料和資訊是不可分離的，資料是資訊的表達，資訊是資料的內涵。資料本身沒有意義，資料只有對實體行為產生影響時才成為資訊。
模板模板，是一個藍圖，即一個與型別無關的類。編譯器在使用模板時，會根據模板實參對模板進行例項化，得到一個與型別相關的類。

模板引擎模板引擎（這裡特指用於Web開發的模板引擎）是為了使使用者介面與業務資料（內容）分離而產生的，它可以生成特定格式的文件，用於網站的模板引擎就會生成一個標準的HTML文件。
結果文件一種特定格式的文件，比如用於網站的模板引擎就會生成一個標準的HTML文件。

模板語言用途廣泛，常見的用途如下：

頁面渲染
文件生成
程式碼生成
所有 “資料+模板=文字” 的應用場景

這裡案例用途自然是頁面渲染，下面在 Spring Boot 中整合 Thymeleaf 實現完整 Web 案例。

一、執行 chapter-2-spring-boot-quick-start

chapter-2-spring-boot-quick-start 工程用的是記憶體式資料庫，不需要配置資料來源。下載執行即可。

1. 下載工程

git clone https://github.com/JeffLi1993/springboot-learning-example.git

2. 工程結構

用 IDEA 開啟工程，可以看到子工程 chapter-2-spring-boot-quick-start ，其目錄如下：

├── pom.xml
└── src
    ├── main
    │   ├── java
    │   │   └── spring
    │   │       └── boot
    │   │           └── core
    │   │               ├── QuickStartApplication 
.java
    │   │               ├── domain
    │   │               │   ├── User.java
    │   │               │   └── UserRepository.java
    │   │               ├── service
    │   │               │   ├── UserService.java
    │   │               │   └── impl
    │   │               │       └── UserServiceImpl.java
    │   │               └── web
    │   │                   └── UserController.java
    │   └── resources
    │       ├── application.properties
    │       ├── static
    │       │   ├── css
    │       │   │   └── default.css
    │       │   └── images
    │       │       └── favicon.ico
    │       └── templates
    │           ├── userForm.html
    │           └── userList.html
    └── test
        └── java
            └── spring
                └── boot
                    └── core
                        ├── QuickStartApplicationTests.java
                        └── domain
                            └── UserRepositoryTests.java

對應目錄：

org.spring.springboot.controller – Controller 層
org.spring.springboot.dao – 資料操作層 DAO
org.spring.springboot.domain – 實體類
org.spring.springboot.service – 業務邏輯層
Application – 應用啟動類
application.properties – 應用配置檔案

模板是會用到下面兩個目錄

static 目錄是存放 CSS、JS 等資原始檔
templates 目錄是存放檢視

3. 編譯執行工程

在該工程根目錄，執行 maven 指令進行編譯：

cd chapter-2-spring-boot-quick-start
mvn clean install

編譯工程成功後，右鍵執行名為 QuickStartApplication.java 應用啟動類的 main 函式，然後瀏覽器訪問 localhost:8080/users 即可：使用者列表頁面：使用者編輯頁面：

二、詳解 chapter-2-spring-boot-quick-start

工程程式碼：

1. pom.xml Thymeleaf 依賴

使用模板引擎，就在 pom.xml 加入 Thymeleaf 元件依賴：

<!-- 模板引擎 Thymeleaf 依賴 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Thymeleaf 是什麼？ Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf’s main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

Thymeleaf 是新一代 Java 模板引擎，在 Spring 4 後推薦使用。

整體個 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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>spring.boot.core</groupId>
    <artifactId>chapter-2-spring-boot-quick-start</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>chapter-2-spring-boot-quick-start</name>
    <description>第二章快速入門案例</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.7.RELEASE</version>
    </parent>

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

    <dependencies>

        <!-- Web 依賴 -->
        <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>
        </dependency>

        <!-- Spring Data JPA 依賴 :: 資料持久層框架 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <!-- h2 資料來源連線驅動 -->
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- 模板引擎 Thymeleaf 依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- Spring Boot Maven 外掛 -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2. Thymeleaf 依賴配置

在 Spring Boot 專案中加入 Thymeleaf 依賴，即可啟動其預設配置。如果想要自定義配置，可以在 application.properties 配置如下：

spring.thymeleaf.cache=true # Enable template caching.
spring.thymeleaf.check-template=true # Check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Check that the templates location exists.
spring.thymeleaf.enabled=true # Enable Thymeleaf view resolution for Web frameworks.
spring.thymeleaf.encoding=UTF-8 # Template files encoding.
spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.reactive.max-chunk-size= # Maximum size of data buffers used for writing to the response, in bytes.
spring.thymeleaf.reactive.media-types= # Media types supported by the view technology.
spring.thymeleaf.servlet.content-type=text/html # Content-Type value written to HTTP responses.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.

3. Thymeleaf 使用

Controller 如何將 View 指向 Thymeleaf

使用者控制層程式碼如下：

@Controller
@RequestMapping(value = "/users")     // 通過這裡配置使下面的對映都在 /users
public class UserController {

    @Autowired
    UserService userService;          // 使用者服務層

    /**
     *  獲取使用者列表
     *    處理 "/users" 的 GET 請求，用來獲取使用者列表
     *    通過 @RequestParam 傳遞引數，進一步實現條件查詢或者分頁查詢
     */
    @RequestMapping(method = RequestMethod.GET)
    public String getUserList(ModelMap map) {
        map.addAttribute("userList", userService.findAll());
        return "userList";
    }

    /**
     * 顯示建立使用者表單
     *
     */
    @RequestMapping(value = "/create", method = RequestMethod.GET)
    public String createUserForm(ModelMap map) {
        map.addAttribute("user", new User());
        map.addAttribute("action", "create");
        return "userForm";
    }

    /**
     *  建立使用者
     *    處理 "/users" 的 POST 請求，用來獲取使用者列表
     *    通過 @ModelAttribute 繫結引數，也通過 @RequestParam 從頁面中傳遞引數
     */
    @RequestMapping(value = "/create", method = RequestMethod.POST)
    public String postUser(@ModelAttribute User user) {
        userService.insertByUser(user);
        return "redirect:/users/";
    }

    /**
     * 顯示需要更新使用者表單
     *    處理 "/users/{id}" 的 GET 請求，通過 URL 中的 id 值獲取 User 資訊
     *    URL 中的 id ，通過 @PathVariable 繫結引數
     */
    @RequestMapping(value = "/update/{id}", method = RequestMethod.GET)
    public String getUser(@PathVariable Long id, ModelMap map) {
        map.addAttribute("user", userService.findById(id));
        map.addAttribute("action", "update");
        return "userForm";
    }

    /**
     * 處理 "/users/{id}" 的 PUT 請求，用來更新 User 資訊
     *
     */
    @RequestMapping(value = "/update", method = RequestMethod.POST)
    public String putUser(@ModelAttribute User user) {
        userService.update(user);
        return "redirect:/users/";
    }

    /**
     * 處理 "/users/{id}" 的 GET 請求，用來刪除 User 資訊
     */
    @RequestMapping(value = "/delete/{id}", method = RequestMethod.GET)
    public String deleteUser(@PathVariable Long id) {

        userService.delete(id);
        return "redirect:/users/";
    }

}

ModelMap 物件來進行資料繫結到檢視。return 字串，該字串對應的目錄在 resources/templates 下的模板名字。 @ModelAttribute 註解是用來獲取頁面 Form 表單提交的資料，並繫結到 User 資料物件。

Form 表單頁面

核心程式碼：

<form th:action="@{/users/{action}(action=${action})}" method="post" class="form-horizontal">

                <input type="hidden" name="id" th:value="${user.id}"/>

                <div class="form-group">
                    <label for="user_name" class="col-sm-2 control-label">名稱</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="user_name" name="name" th:value="${user.name}" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="user_age" class="col-sm-2 control-label">年齡:</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="user_age" name="age" th:value="${user.age}"/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="user_birthday" class="col-sm-2 control-label">出生日期:</label>
                    <div class="col-xs-4">
                        <input type="date" class="form-control" id="user_birthday" name="birthday" th:value="${user.birthday}"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input class="btn btn-primary" type="submit" value="提交"/>  
                        <input class="btn" type="button" value="返回" onclick="history.back()"/>
                    </div>
                </div>
            </form>

這裡定義了一個 Form 表單用於新增或者更新使用者。

列表頁面

程式碼如下：

<table class="table table-hover table-condensed">
                <legend>
                    <strong>使用者列表</strong>
                </legend>
                <thead>
                    <tr>
                        <th>使用者編號</th>
                        <th>名稱</th>
                        <th>年齡</th>
                        <th>出生時間</th>
                        <th>管理</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="user : ${userList}">
                        <th scope="row" th:text="${user.id}"></th>
                        <td><a th:href="@{/users/update/{userId}(userId=${user.id})}" th:text="${user.name}"></a></td>
                        <td th:text="${user.age}"></td>
                        <td th:text="${user.birthday}"></td>
                        <td><a class="btn btn-danger" th:href="@{/users/delete/{userId}(userId=${user.id})}">刪除</a></td>
                    </tr>
                </tbody>
            </table>

這裡迴圈了使用者列表。

Tymeleaf 的語法糖

三、本文小結

該文，利用 Thymeleaf 做了個 Web 的 CRUD 案例。大家多指教~

如以上文章或連結對你有幫助的話，別忘了在文章結尾處評論哈~ 你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。

Spring Boot 整合 Thymeleaf 完整 Web 案例

一、執行 chapter-2-spring-boot-quick-start

1. 下載工程

2. 工程結構

3. 編譯執行工程

二、詳解 chapter-2-spring-boot-quick-start

1. pom.xml Thymeleaf 依賴

2. Thymeleaf 依賴配置

3. Thymeleaf 使用

Controller 如何將 View 指向 Thymeleaf

Form 表單頁面

列表頁面

Tymeleaf 的語法糖

三、本文小結

Spring Boot 整合 Thymeleaf 完整 Web 案例

spring boot整合quartz定時任務案例

Spring Boot 整合 Thymeleaf 模板引擎

Spring boot 整合Thymeleaf

Spring Boot整合thymeleaf使用、thymeleaf常用標籤、thymeleaf常用語法

Spring Boot整合Thymeleaf實戰筆記，系統學習Thymeleaf

Spring Boot 整合 FreeMarker 詳解案例

Spring Boot整合Thymeleaf簡單例項

Spring Boot整合Thymeleaf模板引擎

極簡 Spring Boot 整合 Thymeleaf 頁面模板

Spring Boot2 系列教程(九)Spring Boot 整合 Thymeleaf

Spring Boot 整合 Mybatis Annotation 註解的完整 Web 案例

Spring boot 整合spring Data JPA+Spring Security+Thymeleaf框架(上)

SpringBoot訪問NoSQL和簡單的Thymeleaf-Spring-Spring-boot整合

spring-boot整合mongodb的案例

spring boot整合swagger，自定義註解，攔截器，xss過濾，非同步呼叫，定時任務案例

Spring Boot使用Thymeleaf模板引擎渲染web檢視

Spring Boot整合之模板引擎（Thymeleaf、Freemarker、jsp）

Spring Boot 整合之模板引擎（jsp、Freemarker 、Thymeleaf ）

Spring Boot 整合模板引擎（jsp、Freemarker 、Thymeleaf ）

Spring Boot 整合 Thymeleaf 完整 Web 案例

一、執行 chapter-2-spring-boot-quick-start

1. 下載工程

2. 工程結構

3. 編譯執行工程

二、詳解 chapter-2-spring-boot-quick-start

1. pom.xml Thymeleaf 依賴

2. Thymeleaf 依賴配置

3. Thymeleaf 使用

Controller 如何將 View 指向 Thymeleaf

Form 表單頁面

列表頁面

Tymeleaf 的語法糖

三、本文小結

相關推薦