全棧技能修煉：使用 Angular 和 SpringBoot 打造全棧應用

王芃，資深開發人員、創業者，曾經在多家軟件公司任項目經理、項目總監、部門經理，後創立成都索課科技有限公司、瀋陽推碼科技科技有限公司等。在多年的開發經歷中用Java/C#/Javascript/Typescript 等語言開發了多種類型的項目，積累了豐富的開發經驗。樂於分享，發布大量技術文章。

第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