Spring Boot+Vue.js企業(yè)級管理系統(tǒng)實戰(zhàn)

第 1 章  Spring Boot Vue全棧開發(fā)概述 1
1.1  全棧開發(fā)模式和前后端技術(shù)棧 1
1.1.1  全棧開發(fā)中的MVC模式和MVVM模式 2
1.1.2  前端Vue框架及其相關(guān)組件 3
1.1.3  后端Spring Boot框架及其相關(guān)組件 4
1.1.4  前端、后端與數(shù)據(jù)庫之間的交互 5
1.2  搭建前端開發(fā)和運行環(huán)境 5
1.2.1  安裝Node.js 5
1.2.2  npm命令介紹 5
1.2.3  搭建空白Vue項目 6
1.2.4  安裝依賴包 7
1.3  搭建后端開發(fā)和運行環(huán)境 7
1.3.1  安裝JDK和IDEA集成開發(fā)環(huán)境 7
1.3.2  安裝MySQL和MySQL Workbench客戶端 8
1.3.3  安裝Redis緩存 8
1.3.4  后端項目管理工具M(jìn)aven 9
1.4  跑通人事管理系統(tǒng) 10
1.4.1  在MySQL上配置數(shù)據(jù)庫和數(shù)據(jù)表 10
1.4.2  安裝編譯和運行前端項目 13
1.4.3  啟動后端Spring Boot框架項目 14
1.4.4  觀察前端頁面 15
1.5  實踐練習(xí) 16
第 2 章  Vue.js實例和指令 17
2.1  認(rèn)識Vue.js實例 17
2.1.1  通過范例了解實例 17
2.1.2  在實例中定義和使用方法 18
2.1.3  Vue.js實例的生命周期及其鉤子函數(shù) 19
2.2  Vue內(nèi)置指令 20
2.2.1  v-text和v-html指令 20
2.2.2  v-show指令 21
2.2.3  v-bind指令 22
2.2.4  v-model指令 23
2.2.5  v-once和v-pre指令 24
2.2.6  條件渲染指令 25
2.2.7  循環(huán)渲染指令 27
2.3  自定義指令 28
2.3.1  鉤子函數(shù) 28
2.3.2  開發(fā)自定義指令 28
2.3.3  以動態(tài)方式傳入?yún)?shù) 29
2.4  實踐練習(xí) 30
第 3 章  在Vue.js框架中引入element-ui組件 31
3.1  在Vue.js項目中引入element-ui 31
3.1.1  在package.json中引入依賴包 31
3.1.2  element-ui常用組件介紹 32
3.2  首頁中用到的element-ui布局類組件 33
3.2.1  el-row和el-col表格組件 33
3.2.2  el-link超鏈接組件 35
3.2.3  element-ui組件整合HTML與SCSS 35
3.3  登錄頁面用到的element-ui組件 36
3.3.1  el-form和el-form-item表單類組件 36
3.3.2  el-input輸入框組件 37
3.3.3  el-button命令框組件 38
3.3.4  el-checkbox選擇框組件 39
3.3.5  前端代碼整合Vue.js代碼 39
3.4  業(yè)務(wù)頁面用到的element-ui組件 40
3.4.1  el-table表格組件 40
3.4.2  el-form表單組件 41
3.4.3  命令框組件 42
3.4.4  對話框組件 43
3.5  實踐練習(xí) 44
第 4 章  Vue.js方法、監(jiān)聽器和事件處理修飾符 45
4.1  Vue.js方法 45
4.1.1  定義和使用方法的參數(shù) 45
4.1.2  組件與處理方法的綁定方式 46
4.2  監(jiān)聽器 47
4.2.1  監(jiān)聽屬性 48
4.2.2  監(jiān)聽對象 49
4.2.3  通過監(jiān)聽器綁定屬性和方法 50
4.3  事件處理方法的修飾符 51
4.3.1  stop阻止事件擴散的修飾符 51
4.3.2  capture捕獲事件的修飾符 53
4.3.3  只執(zhí)行一次操作的once修飾符 54
4.3.4  只觸發(fā)本處理方法的self修飾符 55
4.3.5  處理按鍵事件的修飾符 56
4.4  實踐練習(xí) 58
第 5 章  前端組件與前端布局 59
5.1  Vue實例與前端組件 59
5.1.1  從頁面上觀察Hamburger組件 59
5.1.2  分析Hamburger組件代碼 60
5.1.3  使用Hamburger組件 62
5.1.4  通過props和$emit實現(xiàn)組件間的交互 62
5.2  頁面上方導(dǎo)航組件分析 63
5.2.1  導(dǎo)航組件的構(gòu)成 63
5.2.2  Breadcrumb組件分析 63
5.2.3  watch監(jiān)聽器分析 65
5.2.4  組合成上方導(dǎo)航組件 65
5.3  左側(cè)導(dǎo)航欄組件分析 67
5.3.1  菜單類組件分析 67
5.3.2  引入Vue Router 69
5.3.3  整合路由模塊，實現(xiàn)導(dǎo)航效果 70
5.4  業(yè)務(wù)功能組件分析 73
5.5  匯總組件，布局前端頁面 74
5.5.1  App.vue入口程序 74
5.5.2  在main.js中引入資源 74
5.5.3  在layout實例中布局前端元素 75
5.6  實踐練習(xí) 76
第 6 章  用Vuex實現(xiàn)組件間的交互 78
6.1  Vuex組件分析 78
6.1.1  Vuex的重要對象 78
6.1.2  搭建Vuex開發(fā)環(huán)境 79
6.2  Vuex使用說明 80
6.2.1  state對象使用分析 80
6.2.2  與computed整合 82
6.2.3  getter和mapGetters 82
6.2.4  用mutation修改全局屬性 84
6.2.5  用action異步修改全局屬性 86
6.3  Vuex在人事管理項目中的用例 88
6.4  實踐練習(xí) 90
第 7 章  搭建Spring Boot項目的基本框架 91
7.1  Spring Boot概述 91
7.1.1  Spring Boot是什么 92
7.1.2  Spring Boot架構(gòu)與MVC模式 92
7.1.3  Spring Boot與前端項目的交互方式 93
7.2  搭建Spring Boot開發(fā)環(huán)境 93
7.2.1  安裝JDK開發(fā)環(huán)境 94
7.2.2  安裝IDEA集成開發(fā)環(huán)境 95
7.2.3  確認(rèn)IDEA集成Maven工具 96
7.3  搭建腳手架項目 97
7.3.1  創(chuàng)建基于Spring Boot的腳手架項目 97
7.3.2  通過pom文件引入依賴包 98
7.3.3  編寫啟動類 99
7.3.4  編寫控制器類 99
7.3.5  啟動項目、發(fā)送請求并觀察效果 100
7.3.6  對Spring Boot項目的說明 100
7.4  人事管理后端項目結(jié)構(gòu)概述 101
7.5  實踐練習(xí) 102
第 8 章  后端控制器和Swagger組件 103
8.1  通過HTTP協(xié)議對外提供服務(wù) 103
8.1.1  HTTP協(xié)議概述 103
8.1.2  HTTP常用返回碼 104
8.1.3  HTTP請求動作和增刪改查請求 104
8.2  實現(xiàn)后端控制器方法 105
8.2.1  通過注解定義控制類 105
8.2.2  @GetMapping注解與“查詢”接口 106
8.2.3  @PostMapping注解與“添加”接口 108
8.2.4  @PutMapping注解與“更新”接口 109
8.2.5  @DeleteMapping注解與“刪除”接口 110
8.2.6  @RequestMapping注解 110
8.3  通過Swagger展示后端接口 111
8.3.1  Swagger的作用 112
8.3.2  引入Swagger依賴包 112
8.3.3  編寫Swagger配置類 112
8.3.4  通過Swagger觀察API接口 113
8.4  實踐練習(xí) 115
第 9 章  后端業(yè)務(wù)層和數(shù)據(jù)服務(wù)層 116
9.1  在業(yè)務(wù)層封裝業(yè)務(wù)代碼 116
9.1.1  業(yè)務(wù)類的構(gòu)成 116
9.1.2  用@Service修飾業(yè)務(wù)類 117
9.1.3  @Autowired和依賴注入 120
9.2  ORM組件與數(shù)據(jù)服務(wù)層 120
9.3  編寫基于MyBatis的數(shù)據(jù)服務(wù)層 121
9.3.1  引入依賴包，編寫數(shù)據(jù)庫配置代碼 121
9.3.2  編寫映射文件 122
9.3.3  編寫mapper接口 124
9.3.4  編寫Java業(yè)務(wù)模型類 125
9.3.5  使用MyBatis的要點歸納 126
9.4  編寫基于JPA的數(shù)據(jù)服務(wù)層 126
9.4.1  引入依賴包，編寫數(shù)據(jù)庫配置代碼 126
9.4.2  通過注解編寫業(yè)務(wù)模型類 127
9.4.3  用JpaRepository實現(xiàn)數(shù)據(jù)服務(wù)層 128
9.4.4  改寫業(yè)務(wù)層的代碼 128
9.4.5  對比MyBatis和JPA 130
9.5  實踐練習(xí) 130
第 10 章  分頁、事務(wù)、Redis緩存和分庫分表 132
10.1  引入分頁效果 132
10.1.1  從前端獲取分頁參數(shù) 132
10.1.2  在后端用分頁插件實現(xiàn)分頁 133
10.1.3  通過前端觀察分頁效果 135
10.2  引入事務(wù)效果 137
10.2.1  用@transactional實現(xiàn)事務(wù) 137
10.2.2  事務(wù)隔離級別 138
10.2.3  事務(wù)傳播機制 139
10.2.4  合理設(shè)置超時時間 139
10.2.5  合理設(shè)置事務(wù)的粒度 140
10.3  用Redis緩存數(shù)據(jù) 140
10.3.1  Redis的數(shù)據(jù)結(jié)構(gòu) 140
10.3.2  用Redis緩存員工數(shù)據(jù) 142
10.3.3  合理設(shè)置緩存超時時間 145
10.4  MyCat組件與分庫分表 146
10.4.1  分庫需求與MyCat組件 146
10.4.2  搭建MyCat環(huán)境，觀察分庫效果 147
10.4.3  以分庫的方式讀寫員工表 150
10.4.4  同時整合Redis和MyCat 150
10.5  實踐練習(xí) 151
第 11 章  全棧系統(tǒng)的前后端交互 152
11.1  Axios組件概述 152
11.1.1  同步和異步交互方式 152
11.1.2  在前端引入Axios組件 153
11.2  用Axios組件實現(xiàn)前后端交互 153
11.2.1  在request.js中封裝Axios實例 153
11.2.2  在業(yè)務(wù)類中調(diào)用Axios方法 155
11.2.3  頁面發(fā)起請求，異步處理返回 157
11.3  解決跨域問題 158
11.4  Spring Security組件與安全管理 159
11.4.1  Spring Security框架說明 159
11.4.2  引入依賴包，編寫配置參數(shù) 160
11.4.3  設(shè)置資源訪問策略 160
11.4.4  登錄流程說明 162
11.4.5  用過濾器實現(xiàn)Token鑒權(quán) 165
11.5  實踐練習(xí) 166
第 12 章  面向切面編程、過濾器和攔截器 167
12.1  AOP概述 167
12.1.1  AOP的相關(guān)概念 167
12.1.2  AOP的范例 168
12.1.3  AOP與攔截器 170
12.2  攔截器的開發(fā)要點 171
12.2.1  攔截器的重要方法 171
12.2.2  引入多個攔截器 171
12.2.3  觀察攔截器的效果 174
12.3  過濾器的開發(fā)要點 174
12.3.1  過濾器的重要方法 174
12.3.2  開發(fā)過濾器 175
12.3.3  配置過濾器 176
12.3.4  觀察過濾器的效果 176
12.3.5  攔截器和過濾器的使用場景 176
12.4  基于AOP的實例分析 177
12.4.1  全局異常處理類 177
12.4.2  自定義注解 178
12.5  實踐練習(xí) 180
第 13 章  整合日志組件 181
13.1  通過Logback組件輸出日志 181
13.1.1  開發(fā)日志代碼的注意點 181
13.1.2  日志的級別與適用場景 182
13.1.3  引入依賴包，配置Logback參數(shù) 182
13.1.4  輸出不同級別的日志 184
13.1.5  觀察日志輸出效果 185
13.2  搭建基于ELK的日志環(huán)境 187
13.2.1  ELK組件概述 187
13.2.2  搭建ELK環(huán)境 188
13.3  后端項目整合ELK組件 190
13.3.1  向Logstash輸出日志 190
13.3.2  在Kibana上觀察日志效果 191
13.4  實踐練習(xí) 193
第 14 章  整合Nacos服務(wù)治理組件 194
14.1  Spring Boot與微服務(wù)架構(gòu) 194
14.1.1  單機版架構(gòu)與微服務(wù)架構(gòu) 194
14.1.2  微服務(wù)與Spring Cloud Alibaba組件 196
14.1.3  Spring Boot和Spring Cloud Alibaba的關(guān)系 196
14.1.4  后端Spring Cloud Alibaba項目的說明 197
14.2  服務(wù)治理組件Nacos概述 197
14.2.1  服務(wù)治理與注冊中心 197
14.2.2  搭建Nacos環(huán)境 198
14.2.3  Nacos的可視化管理界面 198
14.3  后端Spring Boot整合Nacos 199
14.3.1  引入依賴包 199
14.3.2  編寫配置文件和注解代碼 200
14.3.3  觀察注冊中心效果 200
14.4  搭建Nacos集群 201
14.4.1  Nacos持久化 201
14.4.2  搭建集群 202
14.4.3  觀察集群效果 203
14.4.4  向Nacos集群注冊服務(wù) 204
14.5  整合負(fù)載均衡組件 204
14.5.1  實現(xiàn)負(fù)載均衡的Ribbon組件 205
14.5.2  配置負(fù)載均衡參數(shù) 205
14.5.3  Ribbon常用參數(shù)分析 206
14.6  實踐練習(xí) 207
第 15 章  限流、熔斷和服務(wù)降級 208
15.1  微服務(wù)架構(gòu)中的安全防護(hù)需求 208
15.1.1  限流需求概述 208
15.1.2  熔斷需求概述 209
15.1.3  高并發(fā)下的服務(wù)降級 209
15.2  搭建Sentinel環(huán)境 209
15.2.1  下載Sentinel組件 209
15.2.2  觀察Sentinel控制臺界面 210
15.3  實現(xiàn)限流效果 210
15.3.1  引入依賴包 210
15.3.2  編寫配置文件 211
15.3.3  在方法上添加注解 211
15.3.4  通過控制臺實現(xiàn)限流效果 212
15.3.5  觀察限流效果 214
15.4  實現(xiàn)熔斷效果 214
15.4.1  設(shè)置需要熔斷的方法 214
15.4.2  設(shè)置慢調(diào)用熔斷參數(shù) 215
15.4.3  設(shè)置異常熔斷參數(shù) 216
15.5  實現(xiàn)服務(wù)降級效果 217
15.5.1  整合限流和服務(wù)降級 217
15.5.2  整合熔斷和服務(wù)降級 219
15.5.3  服務(wù)降級要點分析 219
15.6  實踐練習(xí) 220
第 16 章  整合Gateway網(wǎng)關(guān)組件 221
16.1  Gateway網(wǎng)關(guān)組件概述 221
16.1.1  Gateway網(wǎng)關(guān)組件的作用 221
16.1.2  創(chuàng)建網(wǎng)關(guān)項目 222
16.1.3  轉(zhuǎn)發(fā)前端請求 223
16.1.4  網(wǎng)關(guān)過濾器 224
16.1.5  斷言及其關(guān)鍵字 225
16.2  整合Nacos和Sentinel 226
16.2.1  整合后的效果圖 226
16.2.2  整合Nacos組件 226
16.2.3  在網(wǎng)關(guān)層實現(xiàn)負(fù)載均衡 227
16.2.4  整合Sentinel組件 228
16.2.5  引入限流效果 229
16.2.6  分組限流 230
16.2.7  引入熔斷效果 232
16.3  實踐練習(xí) 233
第 17 章  整合Skywalking監(jiān)控組件 234
17.1  監(jiān)控服務(wù)的需求與Skywalking組件 234
17.1.1  服務(wù)監(jiān)控需求分析 234
17.1.2  服務(wù)監(jiān)控組件Skywalking 235
17.1.3  搭建Skywalking運行環(huán)境 235
17.2  后端項目整合Skywalking組件 237
17.2.1  回顧后端項目的框架 237
17.2.2  配置Skywalking的Agent 237
17.2.3  監(jiān)控后端項目 238
17.2.4  觀察監(jiān)控效果 239
17.3  設(shè)置基于Skywalking的告警機制 240
17.3.1  配置告警規(guī)則 240
17.3.2  觀察告警效果 242
17.3.3  通過Webhooks發(fā)送告警信息 243
17.4  實踐練習(xí) 244