全棧技能修煉：使用Angular和Spring Boot 打造全棧套用

《全棧技能修煉：使用Angular和Spring Boot 打造全棧套用》是2019年9月電子工業出版社出版的圖書，作者是王芃。

基本介紹

• 作者：王芃
• 出版社：電子工業出版社
• 出版時間：2019年9月
• 頁數：508 頁
• 定價：109 元
• 開本：16 開
• ISBN：9787121371837

內容簡介

本書涉及很多平台、框架和類庫等，主要有前端使用的Angular，後端使用的Spring Boot框架、Spring Security安全框架，資料庫涉及MongoDB、Elasticsearch和Redis。此外，還會學習函式式編程、回響式編程（RxJS）、Redux等理念，Swagger、JaVers等工具及Rest、WebSocket、微服務等概念。一本書是無法深入這些技術細節的，這也不是本書的目標。希望通過本書，可以幫助讀者開啟一扇門，真正掌握這些讓人眼花繚亂的程式語言、框架、平台、IDE等技術背後的編程思想。

目錄

第1章 技術的選型和環境搭建 1

1.1 技術選型 1

1.1.1 前端框架選型 2

1.1.2 後端框架選型 3

1.1.3 資料庫選型 3

1.2 環境搭建 5

1.2.1 基礎開發環境安裝 5

1.2.2 IDE 的選擇 7

1.2.3 字型的選擇 8

1.2.4 定義通用的代碼格式 9

1.3 工程項目的結構 10

1.3.1 前端項目 10

1.3.2 後端項目 13

1.3.3 整體項目工程的檔案結構 14

第2章 使用Angular快速構造前端原型 17

2.1 Angular 基礎概念 17

2.1.1 安裝 Angular CLI 17

2.1.2 依賴性注入 22

2.1.3 組件 27

2.1.4 指令 28

2.1.5 管道 30

2.1.6 模組 31

2.1.7 模板驅動型表單 33

2.1.8 回響式表單 46

2.2 Angular Material 介紹 55

2.2.1 組件類別 55

2.2.2 布局控制項：Sidenav 57

2.2.3 Flex 布局和 Angular Flex-layout 60

2.2.4 封裝 Header/Footer/Sidebar 62

2.3 添加主題支持 78

2.3.1 Material Design 中對於主題的約束 79

2.3.2 主題的明與暗 79

2.3.3 Angular Material 中的主題 80

2.4 容器化 Angular 套用 83

2.4.1 什麼是容器 83

2.4.2 安裝 Docker 84

2.4.3 鏡像倉庫加速 85

2.4.4 創建 Angular 的 Docker 鏡像 85

2.4.5 啟動容器 87

2.4.6 使用 docker-compose 組織複雜的環境配置 88

2.4.7 使用 .dockerignore 檔案 91

第3章 何謂後端 92

3.1 創建一個 Spring Boot 工程 93

3.1.1 通過 Gradle 創建 93

3.1.2 通過 Maven 創建 99

3.1.3 通過 IDE 創建 103

3.1.4 工程項目的組織 105

3.2 API 的構建可以如此簡單 109

3.2.1 API 工程結構 109

3.2.2 領域對象 111

3.2.3 構造 Controller 112

3.2.4 啟動服務 113

3.2.5 測試 API 115

3.3 MongoDB 支撐的 API 116

3.3.1 什麼是 NoSQL 116

3.3.2 MongoDB 的集成 119

3.3.3 HATEOAS 124

3.3.4 “魔法”的背後 129

3.3.5 讓後端也能熱更新 132

3.4 容器化後端 135

3.4.1 手動創建鏡像 135

3.4.2 使用 Gradle 自動化 Docker 任務 137

3.4.3 使用 docker-compose 組合服務 141

3.4.4 IDEA 中的 Gradle 支持 142

3.4.5 在容器中調試 143

第4章 登錄鑒權功能的構建 145

4.1 模組化和組件化 145

4.1.1 登錄的領域模型構建 145

4.1.2 前端頁面設計 147

4.2 回響式編程初探 166

4.2.1 不同的視角 166

4.2.2 實現一個計數器 169

4.2.3 為什麼要使用 Rx 177

4.2.4 Observable 的性質 178

4.2.5 RxJS 的調試 180

4.3 前端服務層 184

4.3.1 構建“偽”服務 184

4.3.2 構建“聰明組件” 188

4.3.3 路由處理 192

4.4 完成忘記密碼前端設計 194

4.4.1 使用 RxJS 打造簡訊驗證碼控制項 194

4.4.2 忘記密碼嚮導“笨組件” 199

4.4.3 忘記密碼的“聰明組件” 203

第5章 構建後端API 205

5.1 HyperMedia API 與傳統 API 205

5.1.1 領域對象 205

5.1.2 API的可見控制 211

5.1.3 傳統的 API 實現模式 218

5.2 Spring Data 中的查詢 221

5.2.1 基礎概念——Repository 221

5.2.2 查詢方式 223

5.2.3 複雜類型查詢 226

5.2.4 自定義查詢 228

5.2.5 自定義 Repository 229

5.3 Controller 的構建 230

5.3.1 改造 TaskRepo 和 UserRepo 230

5.3.2 實現 Controller 231

5.3.3 登錄 234

5.3.4 註冊 235

5.3.5 忘記密碼第一步：驗證手機 236

5.3.6 忘記密碼第二步：重置密碼 244

5.3.7 API 的異常處理 246

5.4 構建安全的 API 接口 255

5.4.1 為什麼要保護 API 256

5.4.2 什麼是JWT 256

5.4.3 JWT的生成和解析 259

5.4.4 許可權的設計 260

5.4.5 使用 Spring Security 規劃角色安全 261

5.4.6 在 Spring Boot 中啟用 Spring Security 265

5.4.7 改造用戶對象 266

5.4.8 構建 JWT token 工具類 268

5.4.9 如何檢查任何請求的授權信息 272

5.4.10 得到用戶信息 275

5.4.11 配置 Spring Security 277

5.4.12 使用 JWT 進行 API 訪問 292

5.5 跨域和 API 文檔 305

5.5.1 跨域解決方案——CORS 305

5.5.2 API 文檔 309

第6章 前端和API的配合 322

6.1 回響式的 HTTP API 處理 322

6.1.1 Angular 中的 HTTP 服務 322

6.1.2 Angular 的開發環境配置 323

6.1.3 在前端服務中使用 HttpClient 327

6.1.4 更改註冊表單控制項 331

6.2 RxJs進階 332

6.2.1 改造登錄表單 332

6.2.2 RxJs的高階操作符 333

6.2.3 合併操作符 339

6.3 HTTP 攔截 342

6.3.1 實現一個簡單的 HttpInterceptor 342

6.3.2 鑒權HttpInterceptor 343

6.3.3 一個日誌攔截器 345

6.4 Angular 路由 346

6.4.1 基準錨連結 346

6.4.2 Router 模組的簡介 347

6.4.3 獲取父路由的參數 354

6.4.4 獲得前一個路由 354

6.4.5 Activated Route 354

6.5 安全守衛 355

6.5.1 激活守衛 356

6.5.2 激活子路由守衛 357

6.5.3 載入守衛 358

6.5.4 退出守衛 359

6.5.5 數據預獲取守衛 359

第7章 後端不只是API 361

7.1 快取 361

7.1.1 配置 Cache 362

7.1.2 常用的快取註解 364

7.1.3 測試快取是否生效 366

7.2 Redis 作為快取框架 368

7.2.1 Redis 的安裝配置 369

7.2.2 在 Spring Boot 中集成 Redis 370

7.2.3 Redisson 373

7.3 使用 ElasticSearch 提升搜尋性能 375

7.3.1 配置 375

7.3.2 構建用戶查詢 API 379

7.4 Spring Boot Actuator 和數據審計 390

7.4.1 初窺審計事件 390

7.4.2 實現套用的數據審計 394

7.4.3 JaVers 和 Spring Boot 集成 396

7.5 WebSocket 實時通信服務 401

7.5.1 HTTP 和 WebSocket 的區別和聯繫 402

7.5.2 何時使用 WebSocket 403

7.5.3 STOMP 403

7.5.4 WebSocket 配置 404

7.5.5 WebScoket 安全 406

7.5.6 建立一個實時訊息 Controller 409

7.5.7 測試 WebSocket 409

7.6 Spring Boot 的自動化測試 411

第8章 前端的工程化 422

8.1 使用 Redux 管理狀態 423

8.1.1 何時需要使用 Redux 423

8.1.2 Redux 的核心概念 424

8.1.3 在 Angular 中使用 Redux 429

8.1.4 Selector——狀態選擇器 434

8.2 使用 Effects管理的副作用 437

8.3 使用 @ngrx/entity 提升生產效率 441

8.4 服務端渲染 446

8.4.1 Angular Universal 的工作機理 447

8.4.2 安裝依賴 447

8.4.3 添加伺服器端渲染模組 448

8.4.4 使用 Node.js Express 構建伺服器 450

8.4.5 伺服器端渲染中出現重複請求的處理 453

第9章 Spring Cloud打造微服務 455

9.1 微服務的體系架構 455

9.1.1 服務即組件 456

9.1.2 微服務架構下的組織機構變化 456

9.1.3 產品化服務 458

9.1.4 持續集成和持續發布 458

9.1.5 監控和報警 458

9.1.6 Spring Cloud 項目依賴 459

9.2 配置服務和發現服務 461

9.2.1 配置中心是什麼 461

9.2.2 發現服務 465

9.3 監控服務和路由服務 472

9.3.1 Spring Boot Admin 473

9.3.2 路由服務 478

9.4 微服務的遠程調用 485

9.4.1 Feign Client 485

9.4.2 負載均衡 490

附錄A 常見雲服務使用問題匯總 492,第1章 技術的選型和環境搭建 1

1.1 技術選型 1

1.1.1 前端框架選型 2

1.1.2 後端框架選型 3

1.1.3 資料庫選型 3

1.2 環境搭建 5

1.2.1 基礎開發環境安裝 5

1.2.2 IDE 的選擇 7

1.2.3 字型的選擇 8

1.2.4 定義通用的代碼格式 9

1.3 工程項目的結構 10

1.3.1 前端項目 10

1.3.2 後端項目 13

1.3.3 整體項目工程的檔案結構 14

第2章 使用Angular快速構造前端原型 17

2.1 Angular 基礎概念 17

2.1.1 安裝 Angular CLI 17

2.1.2 依賴性注入 22

2.1.3 組件 27

2.1.4 指令 28

2.1.5 管道 30

2.1.6 模組 31

2.1.7 模板驅動型表單 33

2.1.8 回響式表單 46

2.2 Angular Material 介紹 55

2.2.1 組件類別 55

2.2.2 布局控制項：Sidenav 57

2.2.3 Flex 布局和 Angular Flex-layout 60

2.2.4 封裝 Header/Footer/Sidebar 62

2.3 添加主題支持 78

2.3.1 Material Design 中對於主題的約束 79

2.3.2 主題的明與暗 79

2.3.3 Angular Material 中的主題 80

2.4 容器化 Angular 套用 83

2.4.1 什麼是容器 83

2.4.2 安裝 Docker 84

2.4.3 鏡像倉庫加速 85

2.4.4 創建 Angular 的 Docker 鏡像 85

2.4.5 啟動容器 87

2.4.6 使用 docker-compose 組織複雜的環境配置 88

2.4.7 使用 .dockerignore 檔案 91

第3章 何謂後端 92

3.1 創建一個 Spring Boot 工程 93

3.1.1 通過 Gradle 創建 93

3.1.2 通過 Maven 創建 99

3.1.3 通過 IDE 創建 103

3.1.4 工程項目的組織 105

3.2 API 的構建可以如此簡單 109

3.2.1 API 工程結構 109

3.2.2 領域對象 111

3.2.3 構造 Controller 112

3.2.4 啟動服務 113

3.2.5 測試 API 115

3.3 MongoDB 支撐的 API 116

3.3.1 什麼是 NoSQL 116

3.3.2 MongoDB 的集成 119

3.3.3 HATEOAS 124

3.3.4 “魔法”的背後 129

3.3.5 讓後端也能熱更新 132

3.4 容器化後端 135

3.4.1 手動創建鏡像 135

3.4.2 使用 Gradle 自動化 Docker 任務 137

3.4.3 使用 docker-compose 組合服務 141

3.4.4 IDEA 中的 Gradle 支持 142

3.4.5 在容器中調試 143

第4章 登錄鑒權功能的構建 145

4.1 模組化和組件化 145

4.1.1 登錄的領域模型構建 145

4.1.2 前端頁面設計 147

4.2 回響式編程初探 166

4.2.1 不同的視角 166

4.2.2 實現一個計數器 169

4.2.3 為什麼要使用 Rx 177

4.2.4 Observable 的性質 178

4.2.5 RxJS 的調試 180

4.3 前端服務層 184

4.3.1 構建“偽”服務 184

4.3.2 構建“聰明組件” 188

4.3.3 路由處理 192

4.4 完成忘記密碼前端設計 194

4.4.1 使用 RxJS 打造簡訊驗證碼控制項 194

4.4.2 忘記密碼嚮導“笨組件” 199

4.4.3 忘記密碼的“聰明組件” 203

第5章 構建後端API 205

5.1 HyperMedia API 與傳統 API 205

5.1.1 領域對象 205

5.1.2 API的可見控制 211

5.1.3 傳統的 API 實現模式 218

5.2 Spring Data 中的查詢 221

5.2.1 基礎概念——Repository 221

5.2.2 查詢方式 223

5.2.3 複雜類型查詢 226

5.2.4 自定義查詢 228

5.2.5 自定義 Repository 229

5.3 Controller 的構建 230

5.3.1 改造 TaskRepo 和 UserRepo 230

5.3.2 實現 Controller 231

5.3.3 登錄 234

5.3.4 註冊 235

5.3.5 忘記密碼第一步：驗證手機 236

5.3.6 忘記密碼第二步：重置密碼 244

5.3.7 API 的異常處理 246

5.4 構建安全的 API 接口 255

5.4.1 為什麼要保護 API 256

5.4.2 什麼是JWT 256

5.4.3 JWT的生成和解析 259

5.4.4 許可權的設計 260

5.4.5 使用 Spring Security 規劃角色安全 261

5.4.6 在 Spring Boot 中啟用 Spring Security 265

5.4.7 改造用戶對象 266

5.4.8 構建 JWT token 工具類 268

5.4.9 如何檢查任何請求的授權信息 272

5.4.10 得到用戶信息 275

5.4.11 配置 Spring Security 277

5.4.12 使用 JWT 進行 API 訪問 292

5.5 跨域和 API 文檔 305

5.5.1 跨域解決方案——CORS 305

5.5.2 API 文檔 309

第6章 前端和API的配合 322

6.1 回響式的 HTTP API 處理 322

6.1.1 Angular 中的 HTTP 服務 322

6.1.2 Angular 的開發環境配置 323

6.1.3 在前端服務中使用 HttpClient 327

6.1.4 更改註冊表單控制項 331

6.2 RxJs進階 332

6.2.1 改造登錄表單 332

6.2.2 RxJs的高階操作符 333

6.2.3 合併操作符 339

6.3 HTTP 攔截 342

6.3.1 實現一個簡單的 HttpInterceptor 342

6.3.2 鑒權HttpInterceptor 343

6.3.3 一個日誌攔截器 345

6.4 Angular 路由 346

6.4.1 基準錨連結 346

6.4.2 Router 模組的簡介 347

6.4.3 獲取父路由的參數 354

6.4.4 獲得前一個路由 354

6.4.5 Activated Route 354

6.5 安全守衛 355

6.5.1 激活守衛 356

6.5.2 激活子路由守衛 357

6.5.3 載入守衛 358

6.5.4 退出守衛 359

6.5.5 數據預獲取守衛 359

第7章 後端不只是API 361

7.1 快取 361

7.1.1 配置 Cache 362

7.1.2 常用的快取註解 364

7.1.3 測試快取是否生效 366

7.2 Redis 作為快取框架 368

7.2.1 Redis 的安裝配置 369

7.2.2 在 Spring Boot 中集成 Redis 370

7.2.3 Redisson 373

7.3 使用 ElasticSearch 提升搜尋性能 375

7.3.1 配置 375

7.3.2 構建用戶查詢 API 379

7.4 Spring Boot Actuator 和數據審計 390

7.4.1 初窺審計事件 390

7.4.2 實現套用的數據審計 394

7.4.3 JaVers 和 Spring Boot 集成 396

7.5 WebSocket 實時通信服務 401

7.5.1 HTTP 和 WebSocket 的區別和聯繫 402

7.5.2 何時使用 WebSocket 403

7.5.3 STOMP 403

7.5.4 WebSocket 配置 404

7.5.5 WebScoket 安全 406

7.5.6 建立一個實時訊息 Controller 409

7.5.7 測試 WebSocket 409

7.6 Spring Boot 的自動化測試 411

第8章 前端的工程化 422

8.1 使用 Redux 管理狀態 423

8.1.1 何時需要使用 Redux 423

8.1.2 Redux 的核心概念 424

8.1.3 在 Angular 中使用 Redux 429

8.1.4 Selector——狀態選擇器 434

8.2 使用 Effects管理的副作用 437

8.3 使用 @ngrx/entity 提升生產效率 441

8.4 服務端渲染 446

8.4.1 Angular Universal 的工作機理 447

8.4.2 安裝依賴 447

8.4.3 添加伺服器端渲染模組 448

8.4.4 使用 Node.js Express 構建伺服器 450

8.4.5 伺服器端渲染中出現重複請求的處理 453

第9章 Spring Cloud打造微服務 455

9.1 微服務的體系架構 455

9.1.1 服務即組件 456

9.1.2 微服務架構下的組織機構變化 456

9.1.3 產品化服務 458

9.1.4 持續集成和持續發布 458

9.1.5 監控和報警 458

9.1.6 Spring Cloud 項目依賴 459

9.2 配置服務和發現服務 461

9.2.1 配置中心是什麼 461

9.2.2 發現服務 465

9.3 監控服務和路由服務 472

9.3.1 Spring Boot Admin 473

9.3.2 路由服務 478

9.4 微服務的遠程調用 485

9.4.1 Feign Client 485

9.4.2 負載均衡 490

附錄A 常見雲服務使用問題匯總 492