RXJS+VUE.JS+SPRING响应式项目开发实战

第1章 搭建开发平台 ……………………………………………………………………………… 1 1.1 Java Web概述……………………………………………………………………………… 1 1.2 C/S与 B/S模式 …………………………………………………………………………… 1 1.2.1 C/S模式 ………………………………………………………………………… 1 1.2.2 B/S模式 ………………………………………………………………………… 2 1.3 响应式开发概述 …………………………………………………………………………… 3 1.3.1 响应式技术简介 ………………………………………………………………… 3 1.3.2 响应式流规范 …………………………………………………………………… 4 1.3.3 前端响应式技术 ………………………………………………………………… 4 1.3.4 后端响应式技术 ………………………………………………………………… 4 1.4 搭建开发环境 ……………………………………………………………………………… 5 1.4.1 安装 TemurinJDK ……………………………………………………………… 5 1.4.2 安装 PostgreSQL 数据库 ………………………………………………………… 6 1.4.3 使用IntelliJIDEA ……………………………………………………………… 13 1.5 Gradle自动化构建工具 ………………………………………………………………… 16 1.5.1 Gradle概述 ……………………………………………………………………… 16 1.5.2 Gradle核心概念 ………………………………………………………………… 16 1.5.3 构建和配置 ……………………………………………………………………… 17 1.6 创建 Spring响应式项目 ………………………………………………………………… 19 _x00B_第2章 RxJS响应式扩展库………………………………………………………………………… 23 2.1 RxJS概述 ………………………………………………………………………………… 23 2.1.1 RxJS简介 ……………………………………………………………………… 23 2.1.2 引入 RxJS支持库 ……………………………………………………………… 24 2.2 RxJS响应式处理基础 …………………………………………………………………… 25 2.2.1 可观察对象 ……………………………………………………………………… 25 2.2.2 观察者 …………………………………………………………………………… 25 2.2.3 订阅 ……………………………………………………………………………… 27 2.2.4 主题 ……………………………………………………………………………… 27 2.3 RxJS常用操作符 ………………………………………………………………………… 31 2.3.1 管道pipe………………………………………………………………………… 31 2.3.2 对象创建函数 …………………………………………………………………… 31 2.3.3 工具函数 ………………………………………………………………………… 32 2.3.4 过滤函数 ………………………………………………………………………… 33 2.3.5 转换函数 ………………………………………………………………………… 35 2.3.6 事件处理函数fromEvent()…………………………………………………… 40 2.3.7 合并函数 ………………………………………………………………………… 40 2.3.8 扫描函数scan()………………………………………………………………… 45 2.3.9 定时缓冲 bufferTime()………………………………………………………… 46 2.3.10 重试函数retry()……………………………………………………………… 46 2.3.11 异步请求函数ajax() ………………………………………………………… 48 2.3.12 资源请求函数fromFetch()…………………………………………………… 49 2.3.13 通信函数 webSocket()………………………………………………………… 51 2.4 场景应用实战 …………………………………………………………………………… 51 2.4.1 多任务处理进度条 ……………………………………………………………… 51 2.4.2 动态增删图书 …………………………………………………………………… 53 第3章 Vue.js渐进式框架 ………………………………………………………………………… 56 3.1 Vue概述 ………………………………………………………………………………… 56 3.2 Vue应用基础 …………………………………………………………………………… 57 3.2.1 创建 Vue应用 …………………………………………………………………… 57 3.2.2 生命周期 ………………………………………………………………………… 58 3.2.3 组合式函数setup() …………………………………………………………… 59 3.2.4 插值 ……………………………………………………………………………… 60 3.2.5 响应性函数 ……………………………………………………………………… 60 3.2.6 解构 ……………………………………………………………………………… 64 3.3 基础语法 ………………………………………………………………………………… 64 3.3.1 模板语法 ………………………………………………………………………… 65 3.3.2 计算属性computed …………………………………………………………… 67 3.3.3 侦听 watch ……………………………………………………………………… 69 3.3.4 表单域的数据绑定 ……………………………………………………………… 71 3.3.5 条件和列表渲染 ………………………………………………………………… 72 3.3.6 对象组件化 ……………………………………………………………………… 73 3.3.7 插槽 ……………………………………………………………………………… 74 3.3.8 事件绑定和触发 ………………………………………………………………… 77 3.3.9 自定义元素 ……………………………………………………………………… 79 3.3.10 自定义指令和插件 …………………………………………………………… 80 Ⅳ 3.4 渲染函数 ………………………………………………………………………………… 82 3.4.1 h()函数 ………………………………………………………………………… 82 3.4.2 render()函数 …………………………………………………………………… 84 3.5 使用组件 ………………………………………………………………………………… 86 3.5.1 组件定义及动态化 ……………………………………………………………… 86 3.5.2 异步组件 ………………………………………………………………………… 88 3.5.3 数据提供和注入 ………………………………………………………………… 89 3.6 单文件组件 ……………………………………………………………………………… 91 3.6.1 基本结构形式 …………………………………………………………………… 91 3.6.2 样式选择器 ……………………………………………………………………… 93 3.6.3 使用vue3-sfc-loader导入 SFC ………………………………………………… 94 3.7 组合式语法糖 …………………………………………………………………………… 95 3.7.1 基本语法 ………………………………………………………………………… 95 3.7.2 属性声明和事件声明 …………………………………………………………… 96 3.7.3 属性暴露 ………………………………………………………………………… 97 3.8 使用聚合器封装内容 …………………………………………………………………… 97 3.9 深入__vue_app__和_vnode ……………………………………………………………… 98 3.9.1 __vue_app__ …………………………………………………………………… 98 3.9.2 _vnode ………………………………………………………………………… 100 3.9.3 实战组件的动态注册和卸载 ………………………………………………… 100 3.10 状态管理 ……………………………………………………………………………… 104 3.10.1 Pinia简介 …………………………………………………………………… 104 3.10.2 数据状态 State ……………………………………………………………… 104 3.10.3 计算属性 Getter …………………………………………………………… 106 3.10.4 数据更改 Action …………………………………………………………… 106 3.10.5 项目中的应用方式 ………………………………………………………… 107 3.11 场景应用实战 ………………………………………………………………………… 108 3.11.1 下拉选择框联动 …………………………………………………………… 108 3.11.2 动态增删图书 ……………………………………………………………… 109 第4章 Spring响应式开发 ……………………………………………………………………… 112 4.1 RESTful概述 …………………………………………………………………………… 112 4.1.1 REST 简介……………………………………………………………………… 112 4.1.2 RESTful要义 ………………………………………………………………… 112 4.1.3 RESTful请求风格 …………………………………………………………… 113 4.2 Spring响应式概述 ……………………………………………………………………… 113 4.2.1 SpringBoot简介 ……………………………………………………………… 114 4.2.2 创建 SpringBoot项目 ………………………………………………………… 114 4.2.3 SpringBoot入口类 …………………………………………………………… 115 Ⅴ 4.2.4 SpringBoot常用注解 ………………………………………………………… 115 4.3 SpringBoot场景实战…………………………………………………………………… 116 4.3.1 前后端互传字符串 …………………………………………………………… 116 4.3.2 前后端互传对象 ……………………………………………………………… 118 4.3.3 模拟数据采集 ………………………………………………………………… 120 4.4 Reactor响应式处理技术 ……………………………………………………………… 122 4.4.1 ProjectReactor概述…………………………………………………………… 122 4.4.2 Reactor基本思想 ……………………………………………………………… 122 4.4.3 Reactor核心包publisher …………………………………………………… 123 4.4.4 单量 Mono T ……………………………………………………………… 123 4.4.5 通量 Flux T ………………………………………………………………… 123 4.5 响应式操作符 …………………………………………………………………………… 124 4.5.1 订阅subscribe ………………………………………………………………… 124 4.5.2 多播 ConnectableFlux ………………………………………………………… 125 4.5.3 映射 map ……………………………………………………………………… 126 4.5.4 扁平化flatMap………………………………………………………………… 126 4.5.5 组合操作符 …………………………………………………………………… 126 4.5.6 副业处理doOnNext ………………………………………………………… 127 4.5.7 过滤filter和条件操作takeWhile …………………………………………… 128 4.5.8 扫描scan ……………………………………………………………………… 128 4.5.9 转换transform ………………………………………………………………… 128 4.5.10 分组groupBy ………………………………………………………………… 129 4.5.11 缓冲 buffer和开窗 window ………………………………………………… 129 4.5.12 调度器publishOn和subscribeOn ………………………………………… 131 4.5.13 重试(retry)和重复(repeat) ………………………………………………… 132 4.6 并行通量 ParallelFlux ………………………………………………………………… 133 4.7 触发器 Sinks …………………………………………………………………………… 134 4.8 冷数据流和热数据流 …………………………………………………………………… 135 4.9 背压处理 ………………………………………………………………………………… 137 4.10 Spring WebFlux响应式基础 ………………………………………………………… 138 4.10.1 Spring WebFlux简介 ……………………………………………………… 138 4.10.2 WebFlux应用的入口类 …………………………………………………… 138 4.10.3 WebFluxConfigurer配置接口 ……………………………………………… 138 4.10.4 application配置文件………………………………………………………… 139 4.10.5 HandlerFilterFunction事件流过滤 ……………………………………… 139 4.10.6 HandlerFunction业务逻辑处理 …………………………………………… 140 4.10.7 RouterFunction函数式路由 ……………………………………………… 140 4.10.8 WebFilter过滤接口 ………………………………………………………… 141 4.10.9 WebClient非阻塞跨服务通信 ……………………………………………… 142 Ⅵ 4.10.10 MultipartData多域数据 ………………………………………………… 143 4.10.11 WebSocketHandler通信处理接口 ……………………………………… 144 4.11 响应式数据库连接 R2DBC …………………………………………………………… 145 4.11.1 R2DBC 简介 ………………………………………………………………… 145 4.11.2 加入 R2DBC 依赖并配置连接属性 ………………………………………… 145 4.11.3 响应式 R2dbcRepository…………………………………………………… 146 4.12 场景应用实战 ………………………………………………………………………… 150 4.12.1 基于 Flux的模拟数据采集 ………………………………………………… 150 4.12.2 多域数据的传递 …………………………………………………………… 150 第5章 构建多模块项目 ………………………………………………………………………… 155 5.1 教务辅助管理系统项目概述 …………………………………………………………… 155 5.1.1 系统功能简介 ………………………………………………………………… 155 5.1.2 系统技术架构 ………………………………………………………………… 156 5.1.3 系统的复合构建结构 ………………………………………………………… 156 5.2 创建响应式根项目 TAMS …………………………………………………………… 157 5.3 添加公共项目app-common …………………………………………………………… 157 5.3.1 服务端构建脚本server.common.gradle …………………………………… 158 5.3.2 前端构建脚本view.common.gradle ………………………………………… 159 5.3.3 gRPC 构建脚本reactor.grpc.gradle ………………………………………… 159 5.4 添加前端项目app-view ………………………………………………………………… 160 5.4.1 新建app-view ………………………………………………………………… 160 5.4.2 添加子模块 home……………………………………………………………… 160 5.4.3 添加子模块public …………………………………………………………… 162 5.4.4 添加其他子模块 ……………………………………………………………… 162 5.5 添加服务端项目app-server …………………………………………………………… 163 5.5.1 新建app-server ……………………………………………………………… 164 5.5.2 添加子模块app-boot ………………………………………………………… 164 5.5.3 添加其他子模块 ……………………………………………………………… 164 5.6 *终的配置文件settings.gradle ……………………………………………………… 164 5.7 项目打包后的模块结构 ………………………………………………………………… 165 第6章 主页的实现 ……………………………………………………………………………… 167 6.1 功能需求及界面设计 …………………………………………………………………… 167 6.2 后端服务模块 …………………………………………………………………………… 168 6.2.1 模块的整体结构 ……………………………………………………………… 168 6.2.2 配置 build.gradle构建脚本 …………………………………………………… 168 6.2.3 创建项目入口主程序 ………………………………………………………… 169 6.2.4 设置application.yaml………………………………………………………… 169 Ⅶ 6.2.5 定义函数式路由映射 Bean …………………………………………………… 169 6.3 前端视图模块 …………………………………………………………………………… 170 6.3.1 整体结构的设计 ……………………………………………………………… 170 6.3.2 主页 home.html ……………………………………………………………… 170 6.3.3 主页脚本 homejs …………………………………………………………… 171 6.3.4 模块加载器sfc-loaderjs……………………………………………………… 171 6.3.5 页面主体组件 homeindex.vue ……………………………………………… 172 6.3.6 主页布局组件 homelayout.vue …………………………………………… 173 6.3.7 标题及消息显示组件 home.header.vue …………………………………… 174 6.3.8 导航组件 home.menu.vue …………………………………………………… 175 6.3.9 插件app.pluginsjs…………………………………………………………… 176 6.4 状态管理 ………………………………………………………………………………… 177 6.4.1 statesjs定义状态量 ………………………………………………………… 177 6.4.2 actionsjs更改状态数据 ……………………………………………………… 178 6.4.3 gettersjs计算函数 …………………………………………………………… 178 6.4.4 indexjs创建状态实例 ………………………………………………………… 179 6.5 通用进度提示组件loading.vue ……………………………………………………… 179 第7章 用户登录 ………………………………………………………………………………… 181 7.1 功能需求及界面设计 …………………………………………………………………… 181 7.2 相关数据表 ……………………………………………………………………………… 182 7.2.1 表结构与 SQL 语句 …………………………………………………………… 182 7.2.2 构建配置和实体类 …………………………………………………………… 182 7.3 使用JWT 令牌 ………………………………………………………………………… 183 7.3.1 JWT 令牌简介 ………………………………………………………………… 183 7.3.2 使用 NimbusJOSE+JWT 处理令牌 ………………………………………… 184 7.3.3 创建 Assistant令牌生成和校验工具类 ……………………………………… 184 7.4 后端服务模块 …………………………………………………………………………… 187 7.4.1 模块的整体结构 ……………………………………………………………… 187 7.4.2 修改 build.gradle构建脚本 …………………………………………………… 187 7.4.3 配置application-users.yaml并导入app-boot ……………………………… 187 7.4.4 DTO 类 ………………………………………………………………………… 188 7.4.5 编写登录服务 ………………………………………………………………… 188 7.4.6 定义函数式路由映射 Bean …………………………………………………… 189 7.5 前端视图模块 …………………………………………………………………………… 190 7.5.1 整体结构的设计 ……………………………………………………………… 190 7.5.2 使用聚合器封装业务逻辑 …………………………………………………… 190 7.5.3 实现链式登录业务流 ………………………………………………………… 191 7.5.4 编写主文件组件 ……………………………………………………………… 192 Ⅷ 7.5.5 抽取界面的共性化 …………………………………………………………… 192 7.5.6 创建用户登录 UI组件 ………………………………………………………… 194 7.5.7 修改主页导航组件 …………………………………………………………… 194 7.5.8 登录试错的锁屏处理 ………………………………………………………… 195 第8章 用户注册 ………………………………………………………………………………… 198 8.1 功能需求及界面设计 …………………………………………………………………… 198 8.2 后端服务模块 …………………………………………………………………………… 199 8.2.1 添加瞬态属性 ………………………………………………………………… 199 8.2.2 向 UsersHandler组件添加注册方法 ………………………………………… 200 8.2.3 配置用户注册的路由地址 …………………………………………………… 200 8.2.4 修改路由 Bean映射注册处理 ………………………………………………… 200 8.2.5 实现 BeforeConvertCallback接口 …………………………………………… 200 8.3 前端视图模块 …………………………………………………………………………… 201 8.3.1 整体结构的设计 ……………………………………………………………… 201 8.3.2 向聚合器中添加注册函数 …………………………………………………… 201 8.3.3 实现链式注册业务流 ………………………………………………………… 202 8.3.4 主文件组件 user.registindex.vue ………………………………………… 203 8.3.5 UI组件 user.regist.ui.vue ………………………………………………… 203 8.3.6 修改主页导航组件 …………………………………………………………… 204 第9章 消息推送 ………………………………………………………………………………… 205 9.1 功能需求及界面设计 …………………………………………………………………… 205 9.2 相关数据表 ……………………………………………………………………………… 205 9.2.1 表结构与 SQL 语句 …………………………………………………………… 205 9.2.2 实体类 ………………………………………………………………………… 206 9.3 后端服务模块 …………………………………………………………………………… 206 9.3.1 模块的整体结构 ……………………………………………………………… 206 9.3.2 修改 build.gradle构建脚本 …………………………………………………… 206 9.3.3 配置application-note.yaml并导入app-boot ……………………………… 207 9.3.4 DTO 类 ………………………………………………………………………… 207 9.3.5 配置推送消息的 WebClient和 Sinks.Many ………………………………… 208 9.3.6 定义消息服务接口 …………………………………………………………… 208 9.3.7 基于退避策略推送消息 ……………………………………………………… 208 9.3.8 定义函数式路由映射 Bean …………………………………………………… 209 9.4 前端视图模块 …………………………………………………………………………… 209 9.4.1 使用 EventSource订阅消息流数据…………………………………………… 210 9.4.2 用户登录成功时订阅消息 …………………………………………………… 210 Ⅸ 第10章 学院风采 ………………………………………………………………………………… 212 10.1 功能需求及界面设计 ………………………………………………………………… 212 10.2 后端服务模块 ………………………………………………………………………… 213 10.2.1 模块的整体结构 …………………………………………………………… 213 10.2.2 修改 build.gradle构建脚本 ……………………………………………… 213 10.2.3 配置application-college.yaml并导入app-boot………………………… 214 10.2.4 视频流数据的分段响应 …………………………………………………… 214 10.2.5 定义函数式路由映射 Bean ……………………………………………… 215 10.3 前端视图模块 ………………………………………………………………………… 216 10.3.1 整体结构的设计 …………………………………………………………… 216 10.3.2 创建学院概述 SFC 组件…………………………………………………… 216 10.3.3 主文件组件 ………………………………………………………………… 217 10.3.4 学院列表组件 ……………………………………………………………… 218 10.3.5 学院内容组件 ……………………………………………………………… 219 10.3.6 组件聚合器 ………………………………………………………………… 220 10.3.7 修改主页导航组件 ………………………………………………………… 221 _x00B_第11章 学生查询 ………………………………………………………………………………… 222 11.1 功能需求及界面设计 ………………………………………………………………… 222 11.2 相关数据表 …………………………………………………………………………… 223 11.2.1 表结构与 SQL 语句 ……………………………………………………… 223 11.2.2 实体类 ……………………………………………………………………… 223 11.3 后端服务模块 ………………………………………………………………………… 224 11.3.1 模块的整体结构 …………………………………………………………… 224 11.3.2 修改 build.gradle构建脚本 ……………………………………………… 224 11.3.3 配置application-student.yaml并导入app-boot ……………………… 224 11.3.4 DTO 类 …………………………………………………………………… 225 11.3.5 数据访问接口类 …………………………………………………………… 225 11.4 整合实时流数据处理平台 Hazelcast ……………………………………………… 225 11.4.1 Hazelcast简介……………………………………………………………… 225 11.4.2 Hazelcast应用基础………………………………………………………… 226 11.4.3 Hazelcast配置类…………………………………………………………… 228 11.4.4 数据查询服务组件 ………………………………………………………… 229 11.5 利用JWT 令牌验证有效性 ………………………………………………………… 229 11.5.1 基于 HandlerFilterFunction的验证组件 ………………………………… 230 11.5.2 定义函数式路由映射 Bean ……………………………………………… 230 11.6 前端视图模块 ………………………………………………………………………… 231 11.6.1 整体结构的设计 …………………………………………………………… 231 Ⅹ 11.6.2 前端主文件 ………………………………………………………………… 231 11.6.3 利用ce.vue定制化查询…………………………………………………… 232 11.6.4 使用聚合器管理组件 ……………………………………………………… 233 11.6.5 查询组件 …………………………………………………………………… 234 11.6.6 处理键盘输入事件 ………………………………………………………… 234 11.6.7 实现链式查询业务流 ……………………………………………………… 235 11.6.8 数据挂载组件 ……………………………………………………………… 236 11.6.9 修改主页导航组件 ………………………………………………………… 236 11.7 测试分布式数据共享效果 …………………………………………………………… 237 第12章 招生一览 ………………………………………………………………………………… 238 12.1 功能需求及界面设计 ………………………………………………………………… 238 12.2 相关数据表 …………………………………………………………………………… 239 12.2.1 表结构与 SQL 语句 ……………………………………………………… 239 12.2.2 实体类 ……………………………………………………………………… 239 12.3 通过远程服务获取招生数据 ………………………………………………………… 240 12.3.1 gRPC 简介 ………………………………………………………………… 240 12.3.2 Protobuf协议 ……………………………………………………………… 240 12.3.3 .proto文件简介 …………………………………………………………… 241 12.3.4 使用响应式gRPC ………………………………………………………… 244 12.4 创建远程服务项目 Enroll…………………………………………………………… 244 12.4.1 项目的整体结构 …………………………………………………………… 244 12.4.2 项目的构建脚本及配置脚本 ……………………………………………… 244 12.4.3 配置application.yaml …………………………………………………… 246 12.4.4 创建proto文件 …………………………………………………………… 247 12.4.5 编写gRPC 服务类 ………………………………………………………… 248 12.4.6 启动gRPC 服务器 ………………………………………………………… 249 12.5 TAMS项目的后端服务模块 ………………………………………………………… 250 12.5.1 模块的整体结构 …………………………………………………………… 250 12.5.2 修改 build.gradle构建脚本 ……………………………………………… 250 12.5.3 配置application-enroll.yaml并导入app-boot ………………………… 251 12.5.4 DTO 类和proto文件 ……………………………………………………… 251 12.5.5 编写gRPC 客户端组件 …………………………………………………… 252 12.5.6 添加函数式路由映射 Bean ……………………………………………… 253 12.6 TAMS项目的前端视图模块 ………………………………………………………… 253 12.6.1 整体结构的设计 …………………………………………………………… 253 12.6.2 数据的图形可视化 ………………………………………………………… 254 12.6.3 使用 ApacheECharts构建图形 ………………………………………… 254 12.6.4 前端主文件 ………………………………………………………………… 257 Ⅺ 12.6.5 学院专业下拉框联动组件 ………………………………………………… 258 12.6.6 招生饼图组件 ……………………………………………………………… 260 12.6.7 获取数据构建图形 ………………………………………………………… 260 12.6.8 设置图形修饰项 …………………………………………………………… 261 12.6.9 修改主页导航组件 ………………………………………………………… 262 _x00B_第13章 资料上传 ………………………………………………………………………………… 263 13.1 功能需求及界面设计 ………………………………………………………………… 263 13.2 后端服务模块 ………………………………………………………………………… 264 13.2.1 模块的整体结构 …………………………………………………………… 264 13.2.2 修改 build.gradle构建脚本 ……………………………………………… 264 13.2.3 配置application-file.yaml并导入app-boot …………………………… 264 13.2.4 编写文件上传的服务组件 ………………………………………………… 265 13.2.5 定义函数式路由映射 Bean ……………………………………………… 265 13.3 前端视图模块 ………………………………………………………………………… 266 13.3.1 整体结构的设计 …………………………………………………………… 266 13.3.2 自定义文件拖放指令 ……………………………………………………… 266 13.3.3 编写前端主文件 …………………………………………………………… 267 13.3.4 实现链式上传业务流 ……………………………………………………… 269 13.3.5 修改主页导航组件 ………………………………………………………… 271 _x00B_第14章 畅论空间 ………………………………………………………………………………… 272 14.1 功能需求及界面设计 ………………………………………………………………… 272 14.2 消息服务概述 ………………………………………………………………………… 273 14.2.1 消息服务简介 ……………………………………………………………… 273 14.2.2 主要消息服务模式 ………………………………………………………… 274 14.3 使用 ApacheKafka作为消息服务器 ……………………………………………… 275 14.3.1 ApacheKafka简介………………………………………………………… 275 14.3.2 下载并启用 Kafka服务器 ………………………………………………… 275 14.3.3 KafkaTemplate模板 ……………………………………………………… 277 14.3.4 生产者 Producer和消费者 Consumer …………………………………… 277 14.3.5 Kafka响应式消息发送器和接收器 ……………………………………… 278 14.4 后端服务模块的基础处理 …………………………………………………………… 279 14.4.1 模块的整体结构 …………………………………………………………… 279 14.4.2 配置application-chat.yaml并导入app-boot …………………………… 279 14.4.3 修改 build.gradle构建脚本 ……………………………………………… 280 14.4.4 编写 MessageDTO 类……………………………………………………… 280 14.5 创建 WebSocket服务 ………………………………………………………………… 281 14.5.1 实现 WebSocketHandler接口 …………………………………………… 281 Ⅻ 14.5.2 从 Kafka拉取*近的若干条消息 ………………………………………… 282 14.5.3 发送消息到 Kafka ………………………………………………………… 283 14.5.4 群发给其他用户 …………………………………………………………… 285 14.6 配置 WebSocket服务 ………………………………………………………………… 285 14.6.1 设置响应标头中的 Sec-WebSocket-Protocol …………………………… 285 14.6.2 将前端请求映射到服务端点 ……………………………………………… 286 14.7 前端视图模块 ………………………………………………………………………… 286 14.7.1 整体结构的设计 …………………………………………………………… 286 14.7.2 前端主文件 ………………………………………………………………… 287 14.7.3 聊天组件 weChat ………………………………………………………… 287 14.7.4 加载外部 CSS到shadowRoot …………………………………………… 289 14.7.5 实现 WebSocket监听 ……………………………………………………… 292 14.7.6 修改主页导航组件 ………………………………………………………… 293 第15章 项目的发布 ……………………………………………………………………………… 295 15.1 发布为命令行运行模式 ……………………………………………………………… 295 15.2 应用容器引擎 Docker ……………………………………………………………… 296 15.2.1 Docker简介 ………………………………………………………………… 296 15.2.2 使用 DockerCLI ………………………………………………………… 297 15.2.3 自动镜像创建工具 Dockerfile …………………………………………… 298 15.3 云端管理敏感数据 …………………………………………………………………… 298 15.3.1 SpringCloudVault简介 ………………………………………………… 298 15.3.2 生成安全证书和私钥文件 ………………………………………………… 299 15.3.3 编写 Vault配置文件 ……………………………………………………… 301 15.3.4 启动 Vault服务 …………………………………………………………… 301 15.3.5 配置项目的数据库连接信息 ……………………………………………… 303 15.3.6 配置项目的spring.cloud.vault ………………………………………… 303 15.3.7 测试 Vault运行情况 ……………………………………………………… 305 15.4 发布前的准备工作 …………………………………………………………………… 305 15.4.1 在 BOOT-INF下存放上传文件 ………………………………………… 305 15.4.2 处理 TAMS项目 ………………………………………………………… 306 15.4.3 处理远程服务项目 Enroll………………………………………………… 307 15.5 将项目发布到 Docker ……………………………………………………………… 309 ??