RxJS+Vue.js+Spring響應式項目開發實戰

目〓〓錄

第1章搭建開發平臺

 

1.1Java Web概述

 

1.2C/S與B/S模式

 

1.2.1C/S模式

 

1.2.2B/S模式

 

1.3響應式開發概述

 

1.3.1響應式技術簡介

 

1.3.2響應式流規範

 

1.3.3前端響應式技術

 

1.3.4後端響應式技術

 

1.4搭建開發環境

 

1.4.1安裝Temurin JDK

 

1.4.2安裝PostgreSQL數據庫

 

1.4.3使用IntelliJ IDEA

 

1.5Gradle自動化構建工具

 

1.5.1Gradle概述

 

1.5.2Gradle核心概念

 

1.5.3構建和配置

 

1.6創建Spring響應式項目

 

第2章RxJS響應式擴展庫

 

2.1RxJS概述

 

2.1.1RxJS簡介

 

2.1.2引入RxJS支持庫

 

2.2RxJS響應式處理基礎

 

2.2.1可觀察對象

 

2.2.2觀察者

 

2.2.3訂閱

 

2.2.4主題

 

2.3RxJS常用操作符

 

2.3.1管道pipe

 

2.3.2對象創建函數

 

2.3.3工具函數

 

2.3.4過濾函數

 

2.3.5轉換函數

 

2.3.6事件處理函數fromEvent()

 

2.3.7合並函數

 

2.3.8掃描函數scan()

 

2.3.9定時緩沖bufferTime()

 

2.3.10重試函數retry()

 

2.3.11異步請求函數ajax()

 

2.3.12資源請求函數fromFetch()

 

2.3.13通信函數webSocket()

 

2.4場景應用實戰

 

2.4.1多任務處理進度條

 

2.4.2動態增刪圖書

 

第3章Vue.js漸進式框架

 

3.1Vue概述

 

3.2Vue應用基礎

 

3.2.1創建Vue應用

 

3.2.2生命周期

 

3.2.3組合式函數setup()

 

3.2.4插值

 

3.2.5響應性函數

 

3.2.6解構

 

3.3基礎語法

 

3.3.1模板語法

 

3.3.2計算屬性computed

 

3.3.3偵聽watch

 

3.3.4表單域的數據綁定

 

3.3.5條件和列表渲染

 

3.3.6對象組件化

 

3.3.7插槽

 

3.3.8事件綁定和觸發

 

3.3.9自定義元素

 

3.3.10自定義指令和插件

 

3.4渲染函數

 

3.4.1h()函數

 

3.4.2render()函數

 

3.5使用組件

 

3.5.1組件定義及動態化

 

3.5.2異步組件

 

3.5.3數據提供和註入

 

3.6單文件組件

 

3.6.1基本結構形式

 

3.6.2樣式選擇器

 

3.6.3使用vue3sfcloader導入SFC

 

3.7組合式語法糖

 

3.7.1基本語法

 

3.7.2屬性聲明和事件聲明

 

3.7.3屬性暴露

 

3.8使用聚合器封裝內容

 

3.9深入__vue_app__和_vnode

 

3.9.1__vue_app__

 

3.9.2_vnode 

 

3.9.3實戰組件的動態註冊和卸載

 

3.10狀態管理

 

3.10.1Pinia簡介

 

3.10.2數據狀態State

 

3.10.3計算屬性Getter

 

3.10.4數據更改Action

 

3.10.5項目中的應用方式

 

3.11場景應用實戰

 

3.11.1下拉選擇框聯動

 

3.11.2動態增刪圖書

 

第4章Spring響應式開發

 

4.1RESTful概述

 

4.1.1REST簡介

 

4.1.2RESTful要義

 

4.1.3RESTful請求風格

 

4.2Spring響應式概述

 

4.2.1Spring Boot簡介

 

4.2.2創建Spring Boot項目

 

4.2.3Spring Boot入口類

 

4.2.4Spring Boot常用註解

 

4.3Spring Boot場景實戰

 

4.3.1前後端互傳字符串

 

4.3.2前後端互傳對象

 

4.3.3模擬數據採集

 

4.4Reactor響應式處理技術

 

4.4.1Project Reactor概述

 

4.4.2Reactor基本思想

 

4.4.3Reactor核心包publisher

 

4.4.4單量MonoT

 

4.4.5通量FluxT

 

4.5響應式操作符

 

4.5.1訂閱subscribe

 

4.5.2多播ConnectableFlux

 

4.5.3映射map

 

4.5.4扁平化flatMap

 

4.5.5組合操作符

 

4.5.6副業處理doOnNext

 

4.5.7過濾filter和條件操作takeWhile

 

4.5.8掃描scan

 

4.5.9轉換transform

 

4.5.10分組groupBy

 

4.5.11緩沖buffer和開窗window

 

4.5.12調度器publishOn和subscribeOn

 

4.5.13重試（retry）和重復（repeat）

 

4.6並行通量ParallelFlux

 

4.7觸發器Sinks

 

4.8冷數據流和熱數據流

 

4.9背壓處理

 

4.10Spring WebFlux響應式基礎

 

4.10.1Spring WebFlux簡介

 

4.10.2WebFlux應用的入口類

 

4.10.3WebFluxConfigurer配置接口

 

4.10.4application配置文件

 

4.10.5HandlerFilterFunction事件流過濾

 

4.10.6HandlerFunction業務邏輯處理

 

4.10.7RouterFunction函數式路由

 

4.10.8WebFilter過濾接口

 

4.10.9WebClient非阻塞跨服務通信

 

4.10.10Multipart Data多域數據

 

4.10.11WebSocketHandler通信處理接口

 

4.11響應式數據庫連接R2DBC

 

4.11.1R2DBC簡介

 

4.11.2加入R2DBC依賴並配置連接屬性

 

4.11.3響應式R2dbcRepository

 

4.12場景應用實戰

 

4.12.1基於Flux的模擬數據採集

 

4.12.2多域數據的傳遞

 

第5章構建多模塊項目

 

5.1教務輔助管理系統項目概述

 

5.1.1系統功能簡介

 

5.1.2系統技術架構

 

5.1.3系統的復合構建結構

 

5.2創建響應式根項目TAMS

 

5.3添加公共項目appcommon

 

5.3.1服務端構建腳本server.common.gradle

 

5.3.2前端構建腳本view.common.gradle

 

5.3.3gRPC構建腳本reactor.grpc.gradle

 

5.4添加前端項目appview

 

5.4.1新建appview

 

5.4.2添加子模塊home

 

5.4.3添加子模塊public

 

5.4.4添加其他子模塊

 

5.5添加服務端項目appserver

 

5.5.1新建appserver

 

5.5.2添加子模塊appboot

 

5.5.3添加其他子模塊

 

5.6最終的配置文件settings.gradle

 

5.7項目打包後的模塊結構

 

第6章主頁的實現

 

6.1功能需求及界面設計

 

6.2後端服務模塊

 

6.2.1模塊的整體結構

 

6.2.2配置build.gradle構建腳本

 

6.2.3創建項目入口主程序

 

6.2.4設置application.yaml

 

6.2.5定義函數式路由映射Bean

 

6.3前端視圖模塊

 

6.3.1整體結構的設計

 

6.3.2主頁home.html

 

6.3.3主頁腳本home.js

 

6.3.4模塊加載器sfcloader.js

 

6.3.5頁面主體組件home.index.vue

 

6.3.6主頁佈局組件home.layout.vue

 

6.3.7標題及消息顯示組件home.header.vue

 

6.3.8導航組件home.menu.vue

 

6.3.9插件app.plugins.js

 

6.4狀態管理

 

6.4.1states.js定義狀態量

 

6.4.2actions.js更改狀態數據

 

6.4.3getters.js計算函數

 

6.4.4index.js創建狀態實例

 

6.5通用進度提示組件loading.vue

 

第7章用戶登錄

 

7.1功能需求及界面設計

 

7.2相關數據表

 

7.2.1表結構與SQL語句

 

7.2.2構建配置和實體類

 

7.3使用JWT令牌

 

7.3.1JWT令牌簡介

 

7.3.2使用Nimbus JOSE+JWT處理令牌

 

7.3.3創建Assistant令牌生成和校驗工具類

 

7.4後端服務模塊

 

7.4.1模塊的整體結構

 

7.4.2修改build.gradle構建腳本

 

7.4.3配置applicationusers.yaml並導入appboot

 

7.4.4DTO類

 

7.4.5編寫登錄服務

 

7.4.6定義函數式路由映射Bean

 

7.5前端視圖模塊

 

7.5.1整體結構的設計

 

7.5.2使用聚合器封裝業務邏輯

 

7.5.3實現鏈式登錄業務流

 

7.5.4編寫主文件組件

 

7.5.5抽取界面的共性化

 

7.5.6創建用戶登錄UI組件

 

7.5.7修改主頁導航組件

 

7.5.8登錄試錯的鎖屏處理

 

第8章用戶註冊

 

8.1功能需求及界面設計

 

8.2後端服務模塊

 

8.2.1添加瞬態屬性

 

8.2.2向UsersHandler組件添加註冊方法

 

8.2.3配置用戶註冊的路由地址

 

8.2.4修改路由Bean映射註冊處理

 

8.2.5實現BeforeConvertCallback接口

 

8.3前端視圖模塊

 

8.3.1整體結構的設計

 

8.3.2向聚合器中添加註冊函數

 

8.3.3實現鏈式註冊業務流

 

8.3.4主文件組件user.regist.index.vue

 

8.3.5UI組件user.regist.ui.vue

 

8.3.6修改主頁導航組件

 

第9章消息推送

 

9.1功能需求及界面設計

 

9.2相關數據表

 

9.2.1表結構與SQL語句

 

9.2.2實體類

 

9.3後端服務模塊

 

9.3.1模塊的整體結構

 

9.3.2修改build.gradle構建腳本

 

9.3.3配置applicationnote.yaml並導入appboot

 

9.3.4DTO類

 

9.3.5配置推送消息的WebClient和Sinks.Many

 

9.3.6定義消息服務接口

 

9.3.7基於退避策略推送消息

 

9.3.8定義函數式路由映射Bean

 

9.4前端視圖模塊

 

9.4.1使用EventSource訂閱消息流數據

 

9.4.2用戶登錄成功時訂閱消息

 

第10章學院風採

 

10.1功能需求及界面設計

 

10.2後端服務模塊

 

10.2.1模塊的整體結構

 

10.2.2修改build.gradle構建腳本

 

10.2.3配置applicationcollege.yaml並導入appboot

 

10.2.4視頻流數據的分段響應

 

10.2.5定義函數式路由映射Bean

 

10.3前端視圖模塊

 

10.3.1整體結構的設計

 

10.3.2創建學院概述SFC組件

 

10.3.3主文件組件

 

10.3.4學院列表組件

 

10.3.5學院內容組件

 

10.3.6組件聚合器

 

10.3.7修改主頁導航組件

 

第11章學生查詢

 

11.1功能需求及界面設計

 

11.2相關數據表

 

11.2.1表結構與SQL語句

 

11.2.2實體類

 

11.3後端服務模塊

 

11.3.1模塊的整體結構

 

11.3.2修改build.gradle構建腳本

 

11.3.3配置applicationstudent.yaml並導入appboot

 

11.3.4DTO類

 

11.3.5數據訪問接口類

 

11.4整合實時流數據處理平臺Hazelcast

 

11.4.1Hazelcast簡介

 

11.4.2Hazelcast應用基礎

 

11.4.3Hazelcast配置類

 

11.4.4數據查詢服務組件

 

11.5利用JWT令牌驗證有效性

 

11.5.1基於HandlerFilterFunction的驗證組件

 

11.5.2定義函數式路由映射Bean

 

11.6前端視圖模塊

 

11.6.1整體結構的設計

 

11.6.2前端主文件

 

11.6.3利用ce.vue定製化查詢

 

11.6.4使用聚合器管理組件

 

11.6.5查詢組件

 

11.6.6處理鍵盤輸入事件

 

11.6.7實現鏈式查詢業務流

 

11.6.8數據掛載組件

 

11.6.9修改主頁導航組件

 

11.7測試分佈式數據共享效果

 

第12章招生一覽

 

12.1功能需求及界面設計

 

12.2相關數據表

 

12.2.1表結構與SQL語句

 

12.2.2實體類

 

12.3通過遠程服務獲取招生數據

 

12.3.1gRPC簡介

 

12.3.2Protobuf協議

 

12.3.3.proto文件簡介

 

12.3.4使用響應式gRPC

 

12.4創建遠程服務項目Enroll

 

12.4.1項目的整體結構

 

12.4.2項目的構建腳本及配置腳本

 

12.4.3配置application.yaml

 

12.4.4創建proto文件

 

12.4.5編寫gRPC服務類

 

12.4.6啟動gRPC服務器

 

12.5TAMS項目的後端服務模塊

 

12.5.1模塊的整體結構

 

12.5.2修改build.gradle構建腳本

 

12.5.3配置applicationenroll.yaml並導入appboot

 

12.5.4DTO類和proto文件

 

12.5.5編寫gRPC客戶端組件

 

12.5.6添加函數式路由映射Bean

 

12.6TAMS項目的前端視圖模塊

 

12.6.1整體結構的設計

 

12.6.2數據的圖形可視化

 

12.6.3使用Apache ECharts構建圖形

 

12.6.4前端主文件

 

12.6.5學院專業下拉框聯動組件

 

12.6.6招生餅圖組件

 

12.6.7獲取數據構建圖形

 

12.6.8設置圖形修飾項

 

12.6.9修改主頁導航組件

 

第13章資料上傳

 

13.1功能需求及界面設計

 

13.2後端服務模塊

 

13.2.1模塊的整體結構

 

13.2.2修改build.gradle構建腳本

 

13.2.3配置applicationfile.yaml並導入appboot

 

13.2.4編寫文件上傳的服務組件

 

13.2.5定義函數式路由映射Bean

 

13.3前端視圖模塊

 

13.3.1整體結構的設計

 

13.3.2自定義文件拖放指令

 

13.3.3編寫前端主文件

 

13.3.4實現鏈式上傳業務流

 

13.3.5修改主頁導航組件

 

第14章暢論空間

 

14.1功能需求及界面設計

 

14.2消息服務概述

 

14.2.1消息服務簡介

 

14.2.2主要消息服務模式

 

14.3使用Apache Kafka作為消息服務器

 

14.3.1Apache Kafka簡介

 

14.3.2下載並啟用Kafka服務器

 

14.3.3KafkaTemplate模板

 

14.3.4生產者Producer和消費者Consumer

 

14.3.5Kafka響應式消息發送器和接收器

 

14.4後端服務模塊的基礎處理

 

14.4.1模塊的整體結構

 

14.4.2配置applicationchat.yaml並導入appboot

 

14.4.3修改build.gradle構建腳本

 

14.4.4編寫MessageDTO類

 

14.5創建WebSocket服務

 

14.5.1實現WebSocketHandler接口

 

14.5.2從Kafka拉取最近的若乾條消息

 

14.5.3發送消息到Kafka

 

14.5.4群發給其他用戶

 

14.6配置WebSocket服務

 

14.6.1設置響應標頭中的SecWebSocketProtocol

 

14.6.2將前端請求映射到服務端點

 

14.7前端視圖模塊

 

14.7.1整體結構的設計

 

14.7.2前端主文件

 

14.7.3聊天組件weChat

 

14.7.4加載外部CSS到shadowRoot

 

14.7.5實現WebSocket監聽

 

14.7.6修改主頁導航組件

 

第15章項目的發布

 

15.1發布為命令行運行模式

 

15.2應用容器引擎Docker 

 

15.2.1Docker簡介

 

15.2.2使用Docker CLI

 

15.2.3自動鏡像創建工具Dockerfile

 

15.3雲端管理敏感數據

 

15.3.1Spring Cloud Vault簡介

 

15.3.2生成安全證書和私鑰文件

 

15.3.3編寫Vault配置文件

 

15.3.4啟動Vault服務

 

15.3.5配置項目的數據庫連接信息

 

15.3.6配置項目的spring.cloud.vault

 

15.3.7測試Vault運行情況

 

15.4發布前的準備工作

 

15.4.1在BOOTINF下存放上傳文件

 

15.4.2處理TAMS項目

 

15.4.3處理遠程服務項目Enroll

 

15.5將項目發布到Docker