Spring Boot 整合 Thymeleaf 完整 Web 案例

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 下載工程 springboot-learning-example ，項目地址見 https://github.com/JeffLi1993/springboot-learning-example，即：

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

2. 工程結構

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

├── pom.xmln└── srcn ├── mainn │ ├── javan │ │ └── springn │ │ └── bootn │ │ └── coren │ │ ├── QuickStartApplication.javan │ │ ├── domainn │ │ │ ├── User.javan │ │ │ └── UserRepository.javan │ │ ├── servicen │ │ │ ├── UserService.javan │ │ │ └── impln │ │ │ └── UserServiceImpl.javan │ │ └── webn │ │ └── UserController.javan │ └── resourcesn │ ├── application.propertiesn │ ├── staticn │ │ ├── cssn │ │ │ └── default.cssn │ │ └── imagesn │ │ └── favicon.icon │ └── templatesn │ ├── userForm.htmln │ └── userList.htmln └── testn └── javan └── springn └── bootn └── coren ├── QuickStartApplicationTests.javan └── domainn └── UserRepositoryTests.javan

對應目錄：

- 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-startnmvn clean installn

編譯工程成功後，右鍵運行名為 QuickStartApplication.java 應用啟動類的 main 函數，然後瀏覽器訪問 localhost:8080/users 即可：

用戶列表頁面：

用戶編輯頁面：

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

工程代碼：

1. pom.xml Thymeleaf 依賴

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

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

Thymeleaf 是什麼？

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

Thymeleafs 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"?>n<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"n xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">n <modelVersion>4.0.0</modelVersion>nn <groupId>spring.boot.core</groupId>n <artifactId>chapter-2-spring-boot-quick-start</artifactId>n <version>0.0.1-SNAPSHOT</version>n <packaging>jar</packaging>nn <name>chapter-2-spring-boot-quick-start</name>n <description>第二章快速入門案例</description>nn <parent>n <groupId>org.springframework.boot</groupId>n <artifactId>spring-boot-starter-parent</artifactId>n <version>1.5.7.RELEASE</version>n </parent>nn <properties>n <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>n <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>n <java.version>1.8</java.version>n </properties>nn <dependencies>nn <!-- Web 依賴 -->n <dependency>n <groupId>org.springframework.boot</groupId>n <artifactId>spring-boot-starter-web</artifactId>n </dependency>nn <!-- 單元測試依賴 -->n <dependency>n <groupId>org.springframework.boot</groupId>n <artifactId>spring-boot-starter-test</artifactId>n <scope>test</scope>n </dependency>nn <!-- Spring Data JPA 依賴 :: 數據持久層框架 -->n <dependency>n <groupId>org.springframework.boot</groupId>n <artifactId>spring-boot-starter-data-jpa</artifactId>n </dependency>nn <!-- h2 數據源連接驅動 -->n <dependency>n <groupId>com.h2database</groupId>n <artifactId>h2</artifactId>n <scope>runtime</scope>n </dependency>nn <!-- 模板引擎 Thymeleaf 依賴 -->n <dependency>n <groupId>org.springframework.boot</groupId>n <artifactId>spring-boot-starter-thymeleaf</artifactId>n </dependency>n </dependencies>nn <build>n <plugins>n <!-- Spring Boot Maven 插件 -->n <plugin>n <groupId>org.springframework.boot</groupId>n <artifactId>spring-boot-maven-plugin</artifactId>n </plugin>n </plugins>n </build>nn</project>n

2. Thymeleaf 依賴配置

在 Spring Boot 項目中加入 Thymeleaf 依賴，即可啟動其默認配置。如果想要自定義配置，可以在 application.properties 配置如下：

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

3. Thymeleaf 使用

Controller 如何將 View 指向 Thymeleaf

用戶控制層代碼如下：

@Controllern@RequestMapping(value = "/users") // 通過這裡配置使下面的映射都在 /usersnpublic class UserController {nn @Autowiredn UserService userService; // 用戶服務層nn /**n * 獲取用戶列表n * 處理 "/users" 的 GET 請求，用來獲取用戶列表n * 通過 @RequestParam 傳遞參數，進一步實現條件查詢或者分頁查詢n */n @RequestMapping(method = RequestMethod.GET)n public String getUserList(ModelMap map) {n map.addAttribute("userList", userService.findAll());n return "userList";n }nn /**n * 顯示創建用戶表單n *n */n @RequestMapping(value = "/create", method = RequestMethod.GET)n public String createUserForm(ModelMap map) {n map.addAttribute("user", new User());n map.addAttribute("action", "create");n return "userForm";n }nn /**n * 創建用戶n * 處理 "/users" 的 POST 請求，用來獲取用戶列表n * 通過 @ModelAttribute 綁定參數，也通過 @RequestParam 從頁面中傳遞參數n */n @RequestMapping(value = "/create", method = RequestMethod.POST)n public String postUser(@ModelAttribute User user) {n userService.insertByUser(user);n return "redirect:/users/";n }nn /**n * 顯示需要更新用戶表單n * 處理 "/users/{id}" 的 GET 請求，通過 URL 中的 id 值獲取 User 信息n * URL 中的 id ，通過 @PathVariable 綁定參數n */n @RequestMapping(value = "/update/{id}", method = RequestMethod.GET)n public String getUser(@PathVariable Long id, ModelMap map) {n map.addAttribute("user", userService.findById(id));n map.addAttribute("action", "update");n return "userForm";n }nn /**n * 處理 "/users/{id}" 的 PUT 請求，用來更新 User 信息n *n */n @RequestMapping(value = "/update", method = RequestMethod.POST)n public String putUser(@ModelAttribute User user) {n userService.update(user);n return "redirect:/users/";n }nn /**n * 處理 "/users/{id}" 的 GET 請求，用來刪除 User 信息n */n @RequestMapping(value = "/delete/{id}", method = RequestMethod.GET)n public String deleteUser(@PathVariable Long id) {nn userService.delete(id);n return "redirect:/users/";n }nn}n

ModelMap 對象來進行數據綁定到視圖。return 字元串，該字元串對應的目錄在 resources/templates 下的模板名字。

@ModelAttribute 註解是用來獲取頁面 Form 表單提交的數據，並綁定到 User 數據對象。

Form 表單頁面

核心代碼：

<form th:action="@{/users/{action}(action=${action})}" method="post" class="form-horizontal">nn <input type="hidden" name="id" th:value="${user.id}"/>nn <div class="form-group">n <label for="user_name" class="col-sm-2 control-label">名稱</label>n <div class="col-xs-4">n <input type="text" class="form-control" id="user_name" name="name" th:value="${user.name}" />n </div>n </div>nn <div class="form-group">n <label for="user_age" class="col-sm-2 control-label">年齡:</label>n <div class="col-xs-4">n <input type="text" class="form-control" id="user_age" name="age" th:value="${user.age}"/>n </div>n </div>nn <div class="form-group">n <label for="user_birthday" class="col-sm-2 control-label">出生日期:</label>n <div class="col-xs-4">n <input type="date" class="form-control" id="user_birthday" name="birthday" th:value="${user.birthday}"/>n </div>n </div>nn <div class="form-group">n <div class="col-sm-offset-2 col-sm-10">n <input class="btn btn-primary" type="submit" value="提交"/> n <input class="btn" type="button" value="返回" onclick="history.back()"/>n </div>n </div>n </form>n

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

列表頁面

代碼如下：

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

這裡循環了用戶列表。

Tymeleaf 的語法糖

我這邊也就不詳細展開了，大家看看人家寫的 http://www.cnblogs.com/nuoyiamy/p/5591559.html

或者看看官方文檔 http://www.thymeleaf.org/documentation.html

三、本文小結

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

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

摘要: 原創出處:http://www.bysocket.com 泥瓦匠BYSocket 希望轉載，保留摘要，謝謝！

推薦閱讀：