springboot2學習-webflux整合Thymeleaf
阿新 • • 發佈：2019-01-07
上一篇學習總結了下mongodb和webflux的使用，操作的資料都是介面呼叫的，沒有進行資料的展示。spring boot推薦的模板引擎是Thymeleaf。官網地址為：https://www.thymeleaf.org/
建立一個springboot專案
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>com.jack</groupId> <artifactId>webflux_thymeleaf</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>webflux_thymeleaf</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.2.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </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> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <!-- Spring Boot 響應式 MongoDB 依賴 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb-reactive</artifactId> </dependency> <!-- 模板引擎 Thymeleaf 依賴 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.16.20</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>io.projectreactor</groupId> <artifactId>reactor-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
主要添加了Thymeleaf 依賴。
webflux.controller：Controller 層dao：資料操作層 DAOdomain：實體類handler：業務邏輯層xxxxxApplication：應用啟動類application.properties：應用配置檔案pom.xml maven 配置application.properties 配置檔案模板是會用到下面兩個目錄：static 目錄是存放 CSS、JS 等資原始檔；templates 目錄是存放檢視。本文重點在 Controller 層 和 templates 檢視的編寫。
雖然上面引入Thymeleaf 依賴，但是並不需要在 application.properties - 應用配置檔案中配置任何配置。預設啟動其預設配置，如需修改配置參考 Thymeleaf 依賴配置，如下：
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.
在resources目錄下建立static和templates目錄，templates目錄用於存放頁面
thymeleaf 檢視
然後編寫兩個檢視 hello 和 cityList，程式碼分別如下：
hello.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<h1 >你好，歡迎來自<p th:text="${city}"></p>的<p th:text="${name}"></p></h1>
</body>
</html>cityList.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>城市列表</title>
</head>
<body>
<div>
<table>
<legend>
<strong>城市列表</strong>
</legend>
<thead>
<tr>
<th>城市編號</th>
<th>省份編號</th>
<th>名稱</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr th:each="city : ${cityList}">
<td th:text="${city.id}"></td>
<td th:text="${city.provinceId}"></td>
<td th:text="${city.cityName}"></td>
<td th:text="${city.description}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>th:text：處理 Tymeleaf 表示式；
th:each：遍歷表示式，可遍歷的物件有，實現 java.util.Iterable、java.util.Map（遍歷時取 java.util.Map.Entry）、array 等
CityWebFluxController 控制層程式碼如下：
注意不要使用@RestController註解
package com.jack.webflux_thymeleaf.webflux.controller;
import com.jack.webflux_thymeleaf.domain.City;
import com.jack.webflux_thymeleaf.handler.CityHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
/**
* create by jack 2018/5/12
*/
@Controller
@RequestMapping(value = "/city")
public class CityWebFluxController {
@Autowired
private CityHandler cityHandler;
/*
@GetMapping(value = "/{id}")
public Mono<City> findCityById(@PathVariable("id") Long id) {
return cityHandler.findCityById(id);
}
@GetMapping()
public Flux<City> findAllCity() {
return cityHandler.findAllCity();
}
@PostMapping()
public Mono<City> saveCity(@RequestBody City city) {
return cityHandler.save(city);
}
@PutMapping()
public Mono<City> modifyCity(@RequestBody City city) {
return cityHandler.modifyCity(city);
}
@DeleteMapping(value = "/{id}")
public Mono<Long> deleteCity(@PathVariable("id") Long id) {
return cityHandler.deleteCity(id);
}*/
@GetMapping("/hello")
public Mono<String> hello(final Model model) {
model.addAttribute("name", "jack");
model.addAttribute("city", "深圳");
String path = "hello";
return Mono.create(monoSink -> monoSink.success(path));
}
private static final String CITY_LIST_PATH_NAME = "cityList";
@GetMapping("/page/list")
public String listPage(final Model model) {
final Flux<City> cityFluxList = cityHandler.findAllCity();
model.addAttribute("cityList", cityFluxList);
return CITY_LIST_PATH_NAME;
}
}
執行專案，訪問：http://localhost:8080/city/hello
訪問：http://localhost:8080/city/page/list
總結：使用Thymeleaf模板，html頁面需要引入：
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
不然標籤不能使用。
然後就是控制器要使用@Controller，不能使用@RestController，使用@RestController不能返回頁面返回的是字串，路徑的字串。