Spring Boot WebFlux-10——WebFlux 實戰圖書管理系統

前言

本篇內容咱們會實現以下圖所示的城市管理系統，由於上面案例都用的是 City，因此這裏直接使用城市做爲對象，寫一個簡單的城市管理系統，如圖所示：javascript

結構

相似上面講的工程搭建，新建一個工程編寫此案例。工程如圖：css

下面目錄和上面相似，這邊不重複講解：html

pom.xml Maven 依賴配置
application.properties 配置文件，配置 mongo 鏈接屬性配置
dao 數據訪問層

單擊這裏查看源代碼。java

本文主要介紹：jquery

controller 控制層實現
static 存放 css 圖片靜態資源
templates 編寫頁面邏輯

CityController 控制層

使用註解驅動的模式來進行開發，代碼以下：git

/** * city 控制層 * <p> * Created by bysocket */ @Controller @RequestMapping(value = "/city") public class CityController { private static final String CITY_FORM_PATH_NAME = "cityForm"; private static final String CITY_LIST_PATH_NAME = "cityList"; private static final String REDIRECT_TO_CITY_URL = "redirect:/city"; @Autowired CityService cityService; @RequestMapping(method = RequestMethod.GET) public String getCityList(final Model model) { model.addAttribute("cityList", cityService.findAll()); return CITY_LIST_PATH_NAME; } @RequestMapping(value = "/create", method = RequestMethod.GET) public String createCityForm(final Model model) { model.addAttribute("city", new City()); model.addAttribute("action", "create"); return CITY_FORM_PATH_NAME; } @RequestMapping(value = "/create", method = RequestMethod.POST) public String postCity(@ModelAttribute City city) { cityService.insertByCity(city); return REDIRECT_TO_CITY_URL; } @RequestMapping(value = "/update/{id}", method = RequestMethod.GET) public String getCity(@PathVariable Long id, final Model model) { final Mono<City> city = cityService.findById(id); model.addAttribute("city", city); model.addAttribute("action", "update"); return CITY_FORM_PATH_NAME; } @RequestMapping(value = "/update", method = RequestMethod.POST) public String putBook(@ModelAttribute City city) { cityService.update(city); return REDIRECT_TO_CITY_URL; } @RequestMapping(value = "/delete/{id}", method = RequestMethod.GET) public String deleteCity(@PathVariable Long id) { cityService.delete(id); return CITY_LIST_PATH_NAME; } }

能夠建立不一樣功能的控制層，來處理不一樣的 HTTP 業務請求，好比 CityFrontController、CityAdminController 等分別處理不一樣場景的問題。github

getCityList 方法：處理「/city」的 GET 請求，用來獲取 City 列表。web
getCity 方法：處理「/city/update/{id}」的 GET 請求，用來獲取 City 信息。spring
postCity 方法：處理「/book/create」的 POST 請求，用來新建 Book 信息；經過 @ModelAttribut 綁定實體參數，也經過 @RequestBody @RequestParam 傳遞參數。sql
putCity 方法：處理「/update」的 PUT 請求，用來更新 City 信息，並使用 redirect 重定向到列表頁面。

cityForm 提交表單頁面

表單頁面以下：

<!DOCTYPE html> <html lang="zh-CN"> <head> <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script> <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/> <link th:href="@{/css/default.css}" rel="stylesheet"/> <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/> <meta charset="UTF-8"/> <title>城市管理</title> </head> <body> <div class="contentDiv"> <legend> <strong>城市管理</strong> </legend> <form th:action="@{/city/{action}(action=${action})}" method="post" class="form-horizontal"> <div class="form-group"> <label for="city_id" class="col-sm-2 control-label">城市編號:</label> <div class="col-xs-4"> <input type="text" class="form-control" id="city_id" name="id" th:value="${city.id}"/> </div> </div> <div class="form-group"> <label for="city_name" class="col-sm-2 control-label">城市名稱:</label> <div class="col-xs-4"> <input type="text" class="form-control" id="city_name" name="cityName" th:value="${city.cityName}"/> </div> </div> <div class="form-group"> <label for="city_description" class="col-sm-2 control-label">城市描述:</label> <div class="col-xs-4"> <input class="form-control" id="city_description" rows="3" name="description" th:value="${city.description}" /> </div> </div> <div class="form-group"> <label for="city_provinceId" class="col-sm-2 control-label">省份編號:</label> <div class="col-xs-4"> <input type="text" class="form-control" id="city_provinceId" name="provinceId" th:value="${city.provinceId}" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input class="btn btn-primary" type="submit" value="提交"/>&nbsp;&nbsp; <input class="btn" type="button" value="返回" onclick="history.back()"/> </div> </div> </form> </div> </body> </html>

利用的是 Thymeleaf 語法，上面章節也講過具體使用方法，這裏實現新增城市和更新城市兩個操做。巧妙利用了 action 字段去動態判斷請求是新增仍是更新的控制層方法，而後進行 form 表單提交。

cityList 城市列表頁面

列表頁面代碼以下：

<!DOCTYPE html> <html lang="zh-CN"> <head> <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script> <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/> <link th:href="@{/css/default.css}" rel="stylesheet"/> <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/> <meta charset="UTF-8"/> <title>城市列表</title> </head> <body> <div class="contentDiv"> <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="city : ${cityList}"> <th scope="row" th:text="${city.id}"></th> <td><a th:href="@{/city/update/{cityId}(cityId=${city.id})}" th:text="${city.cityName}"></a></td> <td th:text="${city.description}"></td> <td th:text="${city.provinceId}"></td> <td><a class="btn btn-danger" th:href="@{/city/delete/{cityId}(cityId=${city.id})}">刪除</a></td> </tr> </tbody> </table> <div><a class="btn btn-primary" href="/city/create" role="button">新增城市</a></div> </div> </body> </html>

這裏編寫了一個列表對象的循環和簡單的頁面跳轉邏輯，下面看看這兩個頁面組合使用的運行場景。

運行工程

一個 CRUD 的 Spring Boot Webflux 工程就開發完畢了，下面運行工程驗證一下。使用 IDEA 右側工具欄，點擊 Maven Project Tab 選項，單擊使用下 Maven 插件的 install 命令；或者使用命令行的形式，在工程根目錄下，執行 Maven 清理和安裝工程的指令：

cd springboot-webflux-10-book-manage-sys mvn clean install

在控制檯中看到成功的輸出：

... 省略
[INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 01:30 min [INFO] Finished at: 2017-10-15T10:00:54+08:00 [INFO] Final Memory: 31M/174M [INFO] ------------------------------------------------------------------------

在 IDEA 中執行 Application 類啓動，任意正常模式或者 Debug 模式，能夠在控制檯看到成功運行的輸出：

... 省略
2018-04-10 08:43:39.932 INFO 2052 --- [ctor-http-nio-1] r.ipc.netty.tcp.BlockingNettyContext : Started HttpServer on /0:0:0:0:0:0:0:0:8080 2018-04-10 08:43:39.935 INFO 2052 --- [ main] o.s.b.web.embedded.netty.NettyWebServer : Netty started on port(s): 8080 2018-04-10 08:43:39.960 INFO 2052 --- [ main] org.spring.springboot.Application : Started Application in 6.547 seconds (JVM running for 9.851)

打開瀏覽器，輸入地址：http://localhost:8080/city，即打開城市列表頁面：

而後新增，或者單擊城市名稱修改，到表單提交頁面：

總結

這裏，初步實現了小案例城市管理系統，基本知足平常的 CRUD 業務流程操做。上手教程只是上手，具體複雜邏輯，歡迎一塊兒多交流學習。

單擊這裏查看源代碼。