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

第 1 章  Spring Boot Vue全棧開(kāi)發(fā)概述 1
1.1  全棧開(kāi)發(fā)模式和前后端技術(shù)棧 1
1.1.1  全棧開(kāi)發(fā)中的MVC模式和MVVM模式 2
1.1.2  前端Vue框架及其相關(guān)組件 3
1.1.3  后端Spring Boot框架及其相關(guān)組件 4
1.1.4  前端、后端與數(shù)據(jù)庫(kù)之間的交互 5
1.2  搭建前端開(kāi)發(fā)和運(yùn)行環(huán)境 5
1.2.1  安裝Node.js 5
1.2.2  npm命令介紹 5
1.2.3  搭建空白Vue項(xiàng)目 6
1.2.4  安裝依賴包 7
1.3  搭建后端開(kāi)發(fā)和運(yùn)行環(huán)境 7
1.3.1  安裝JDK和IDEA集成開(kāi)發(fā)環(huán)境 7
1.3.2  安裝MySQL和MySQL Workbench客戶端 8
1.3.3  安裝Redis緩存 8
1.3.4  后端項(xiàng)目管理工具M(jìn)aven 9
1.4  跑通人事管理系統(tǒng) 10
1.4.1  在MySQL上配置數(shù)據(jù)庫(kù)和數(shù)據(jù)表 10
1.4.2  安裝編譯和運(yùn)行前端項(xiàng)目 13
1.4.3  啟動(dòng)后端Spring Boot框架項(xiàng)目 14
1.4.4  觀察前端頁(yè)面 15
1.5  實(shí)踐練習(xí) 16
第 2 章  Vue.js實(shí)例和指令 17
2.1  認(rèn)識(shí)Vue.js實(shí)例 17
2.1.1  通過(guò)范例了解實(shí)例 17
2.1.2  在實(shí)例中定義和使用方法 18
2.1.3  Vue.js實(shí)例的生命周期及其鉤子函數(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  開(kāi)發(fā)自定義指令 28
2.3.3  以動(dòng)態(tài)方式傳入?yún)?shù) 29
2.4  實(shí)踐練習(xí) 30
第 3 章  在Vue.js框架中引入element-ui組件 31
3.1  在Vue.js項(xiàng)目中引入element-ui 31
3.1.1  在package.json中引入依賴包 31
3.1.2  element-ui常用組件介紹 32
3.2  首頁(yè)中用到的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  登錄頁(yè)面用到的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ù)頁(yè)面用到的element-ui組件 40
3.4.1  el-table表格組件 40
3.4.2  el-form表單組件 41
3.4.3  命令框組件 42
3.4.4  對(duì)話框組件 43
3.5  實(shí)踐練習(xí) 44
第 4 章  Vue.js方法、監(jiān)聽(tīng)器和事件處理修飾符 45
4.1  Vue.js方法 45
4.1.1  定義和使用方法的參數(shù) 45
4.1.2  組件與處理方法的綁定方式 46
4.2  監(jiān)聽(tīng)器 47
4.2.1  監(jiān)聽(tīng)屬性 48
4.2.2  監(jiān)聽(tīng)對(duì)象 49
4.2.3  通過(guò)監(jiān)聽(tīng)器綁定屬性和方法 50
4.3  事件處理方法的修飾符 51
4.3.1  stop阻止事件擴(kuò)散的修飾符 51
4.3.2  capture捕獲事件的修飾符 53
4.3.3  只執(zhí)行一次操作的once修飾符 54
4.3.4  只觸發(fā)本處理方法的self修飾符 55
4.3.5  處理按鍵事件的修飾符 56
4.4  實(shí)踐練習(xí) 58
第 5 章  前端組件與前端布局 59
5.1  Vue實(shí)例與前端組件 59
5.1.1  從頁(yè)面上觀察Hamburger組件 59
5.1.2  分析Hamburger組件代碼 60
5.1.3  使用Hamburger組件 62
5.1.4  通過(guò)props和$emit實(shí)現(xiàn)組件間的交互 62
5.2  頁(yè)面上方導(dǎo)航組件分析 63
5.2.1  導(dǎo)航組件的構(gòu)成 63
5.2.2  Breadcrumb組件分析 63
5.2.3  watch監(jiān)聽(tīng)器分析 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  整合路由模塊，實(shí)現(xiàn)導(dǎo)航效果 70
5.4  業(yè)務(wù)功能組件分析 73
5.5  匯總組件，布局前端頁(yè)面 74
5.5.1  App.vue入口程序 74
5.5.2  在main.js中引入資源 74
5.5.3  在layout實(shí)例中布局前端元素 75
5.6  實(shí)踐練習(xí) 76
第 6 章  用Vuex實(shí)現(xiàn)組件間的交互 78
6.1  Vuex組件分析 78
6.1.1  Vuex的重要對(duì)象 78
6.1.2  搭建Vuex開(kāi)發(fā)環(huán)境 79
6.2  Vuex使用說(shuō)明 80
6.2.1  state對(duì)象使用分析 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在人事管理項(xiàng)目中的用例 88
6.4  實(shí)踐練習(xí) 90
第 7 章  搭建Spring Boot項(xiàng)目的基本框架 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與前端項(xiàng)目的交互方式 93
7.2  搭建Spring Boot開(kāi)發(fā)環(huán)境 93
7.2.1  安裝JDK開(kāi)發(fā)環(huán)境 94
7.2.2  安裝IDEA集成開(kāi)發(fā)環(huán)境 95
7.2.3  確認(rèn)IDEA集成Maven工具 96
7.3  搭建腳手架項(xiàng)目 97
7.3.1  創(chuàng)建基于Spring Boot的腳手架項(xiàng)目 97
7.3.2  通過(guò)pom文件引入依賴包 98
7.3.3  編寫(xiě)啟動(dòng)類 99
7.3.4  編寫(xiě)控制器類 99
7.3.5  啟動(dòng)項(xiàng)目、發(fā)送請(qǐng)求并觀察效果 100
7.3.6  對(duì)Spring Boot項(xiàng)目的說(shuō)明 100
7.4  人事管理后端項(xiàng)目結(jié)構(gòu)概述 101
7.5  實(shí)踐練習(xí) 102
第 8 章  后端控制器和Swagger組件 103
8.1  通過(guò)HTTP協(xié)議對(duì)外提供服務(wù) 103
8.1.1  HTTP協(xié)議概述 103
8.1.2  HTTP常用返回碼 104
8.1.3  HTTP請(qǐng)求動(dòng)作和增刪改查請(qǐng)求 104
8.2  實(shí)現(xiàn)后端控制器方法 105
8.2.1  通過(guò)注解定義控制類 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  通過(guò)Swagger展示后端接口 111
8.3.1  Swagger的作用 112
8.3.2  引入Swagger依賴包 112
8.3.3  編寫(xiě)Swagger配置類 112
8.3.4  通過(guò)Swagger觀察API接口 113
8.4  實(shí)踐練習(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  編寫(xiě)基于MyBatis的數(shù)據(jù)服務(wù)層 121
9.3.1  引入依賴包，編寫(xiě)數(shù)據(jù)庫(kù)配置代碼 121
9.3.2  編寫(xiě)映射文件 122
9.3.3  編寫(xiě)mapper接口 124
9.3.4  編寫(xiě)Java業(yè)務(wù)模型類 125
9.3.5  使用MyBatis的要點(diǎn)歸納 126
9.4  編寫(xiě)基于JPA的數(shù)據(jù)服務(wù)層 126
9.4.1  引入依賴包，編寫(xiě)數(shù)據(jù)庫(kù)配置代碼 126
9.4.2  通過(guò)注解編寫(xiě)業(yè)務(wù)模型類 127
9.4.3  用JpaRepository實(shí)現(xiàn)數(shù)據(jù)服務(wù)層 128
9.4.4  改寫(xiě)業(yè)務(wù)層的代碼 128
9.4.5  對(duì)比MyBatis和JPA 130
9.5  實(shí)踐練習(xí) 130
第 10 章  分頁(yè)、事務(wù)、Redis緩存和分庫(kù)分表 132
10.1  引入分頁(yè)效果 132
10.1.1  從前端獲取分頁(yè)參數(shù) 132
10.1.2  在后端用分頁(yè)插件實(shí)現(xiàn)分頁(yè) 133
10.1.3  通過(guò)前端觀察分頁(yè)效果 135
10.2  引入事務(wù)效果 137
10.2.1  用@transactional實(shí)現(xiàn)事務(wù) 137
10.2.2  事務(wù)隔離級(jí)別 138
10.2.3  事務(wù)傳播機(jī)制 139
10.2.4  合理設(shè)置超時(shí)時(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è)置緩存超時(shí)時(shí)間 145
10.4  MyCat組件與分庫(kù)分表 146
10.4.1  分庫(kù)需求與MyCat組件 146
10.4.2  搭建MyCat環(huán)境，觀察分庫(kù)效果 147
10.4.3  以分庫(kù)的方式讀寫(xiě)員工表 150
10.4.4  同時(shí)整合Redis和MyCat 150
10.5  實(shí)踐練習(xí) 151
第 11 章  全棧系統(tǒng)的前后端交互 152
11.1  Axios組件概述 152
11.1.1  同步和異步交互方式 152
11.1.2  在前端引入Axios組件 153
11.2  用Axios組件實(shí)現(xiàn)前后端交互 153
11.2.1  在request.js中封裝Axios實(shí)例 153
11.2.2  在業(yè)務(wù)類中調(diào)用Axios方法 155
11.2.3  頁(yè)面發(fā)起請(qǐng)求，異步處理返回 157
11.3  解決跨域問(wèn)題 158
11.4  Spring Security組件與安全管理 159
11.4.1  Spring Security框架說(shuō)明 159
11.4.2  引入依賴包，編寫(xiě)配置參數(shù) 160
11.4.3  設(shè)置資源訪問(wèn)策略 160
11.4.4  登錄流程說(shuō)明 162
11.4.5  用過(guò)濾器實(shí)現(xiàn)Token鑒權(quán) 165
11.5  實(shí)踐練習(xí) 166
第 12 章  面向切面編程、過(guò)濾器和攔截器 167
12.1  AOP概述 167
12.1.1  AOP的相關(guān)概念 167
12.1.2  AOP的范例 168
12.1.3  AOP與攔截器 170
12.2  攔截器的開(kāi)發(fā)要點(diǎn) 171
12.2.1  攔截器的重要方法 171
12.2.2  引入多個(gè)攔截器 171
12.2.3  觀察攔截器的效果 174
12.3  過(guò)濾器的開(kāi)發(fā)要點(diǎn) 174
12.3.1  過(guò)濾器的重要方法 174
12.3.2  開(kāi)發(fā)過(guò)濾器 175
12.3.3  配置過(guò)濾器 176
12.3.4  觀察過(guò)濾器的效果 176
12.3.5  攔截器和過(guò)濾器的使用場(chǎng)景 176
12.4  基于AOP的實(shí)例分析 177
12.4.1  全局異常處理類 177
12.4.2  自定義注解 178
12.5  實(shí)踐練習(xí) 180
第 13 章  整合日志組件 181
13.1  通過(guò)Logback組件輸出日志 181
13.1.1  開(kāi)發(fā)日志代碼的注意點(diǎn) 181
13.1.2  日志的級(jí)別與適用場(chǎng)景 182
13.1.3  引入依賴包，配置Logback參數(shù) 182
13.1.4  輸出不同級(jí)別的日志 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  后端項(xiàng)目整合ELK組件 190
13.3.1  向Logstash輸出日志 190
13.3.2  在Kibana上觀察日志效果 191
13.4  實(shí)踐練習(xí) 193
第 14 章  整合Nacos服務(wù)治理組件 194
14.1  Spring Boot與微服務(wù)架構(gòu) 194
14.1.1  單機(jī)版架構(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項(xiàng)目的說(shuō)明 197
14.2  服務(wù)治理組件Nacos概述 197
14.2.1  服務(wù)治理與注冊(cè)中心 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  編寫(xiě)配置文件和注解代碼 200
14.3.3  觀察注冊(cè)中心效果 200
14.4  搭建Nacos集群 201
14.4.1  Nacos持久化 201
14.4.2  搭建集群 202
14.4.3  觀察集群效果 203
14.4.4  向Nacos集群注冊(cè)服務(wù) 204
14.5  整合負(fù)載均衡組件 204
14.5.1  實(shí)現(xiàn)負(fù)載均衡的Ribbon組件 205
14.5.2  配置負(fù)載均衡參數(shù) 205
14.5.3  Ribbon常用參數(shù)分析 206
14.6  實(shí)踐練習(xí) 207
第 15 章  限流、熔斷和服務(wù)降級(jí) 208
15.1  微服務(wù)架構(gòu)中的安全防護(hù)需求 208
15.1.1  限流需求概述 208
15.1.2  熔斷需求概述 209
15.1.3  高并發(fā)下的服務(wù)降級(jí) 209
15.2  搭建Sentinel環(huán)境 209
15.2.1  下載Sentinel組件 209
15.2.2  觀察Sentinel控制臺(tái)界面 210
15.3  實(shí)現(xiàn)限流效果 210
15.3.1  引入依賴包 210
15.3.2  編寫(xiě)配置文件 211
15.3.3  在方法上添加注解 211
15.3.4  通過(guò)控制臺(tái)實(shí)現(xiàn)限流效果 212
15.3.5  觀察限流效果 214
15.4  實(shí)現(xiàn)熔斷效果 214
15.4.1  設(shè)置需要熔斷的方法 214
15.4.2  設(shè)置慢調(diào)用熔斷參數(shù) 215
15.4.3  設(shè)置異常熔斷參數(shù) 216
15.5  實(shí)現(xiàn)服務(wù)降級(jí)效果 217
15.5.1  整合限流和服務(wù)降級(jí) 217
15.5.2  整合熔斷和服務(wù)降級(jí) 219
15.5.3  服務(wù)降級(jí)要點(diǎn)分析 219
15.6  實(shí)踐練習(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)項(xiàng)目 222
16.1.3  轉(zhuǎn)發(fā)前端請(qǐng)求 223
16.1.4  網(wǎng)關(guān)過(guò)濾器 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)層實(shí)現(xiàn)負(fù)載均衡 227
16.2.4  整合Sentinel組件 228
16.2.5  引入限流效果 229
16.2.6  分組限流 230
16.2.7  引入熔斷效果 232
16.3  實(shí)踐練習(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運(yùn)行環(huán)境 235
17.2  后端項(xiàng)目整合Skywalking組件 237
17.2.1  回顧后端項(xiàng)目的框架 237
17.2.2  配置Skywalking的Agent 237
17.2.3  監(jiān)控后端項(xiàng)目 238
17.2.4  觀察監(jiān)控效果 239
17.3  設(shè)置基于Skywalking的告警機(jī)制 240
17.3.1  配置告警規(guī)則 240
17.3.2  觀察告警效果 242
17.3.3  通過(guò)Webhooks發(fā)送告警信息 243
17.4  實(shí)踐練習(xí) 244