Spring Boot + Vue.js 企業級管理系統實戰

目    錄

第 1 章  Spring Boot+Vue全棧開發概述 1

1.1  全棧開發模式和前後端技術棧 1

1.1.1  全棧開發中的MVC模式和MVVM模式 2

1.1.2  前端Vue框架及其相關組件 3

1.1.3  後端Spring Boot框架及其相關組件 4

1.1.4  前端、後端與數據庫之間的交互 5

1.2  搭建前端開發和運行環境 5

1.2.1  安裝Node.js 5

1.2.2  npm命令介紹 5

1.2.3  搭建空白Vue項目 6

1.2.4  安裝依賴包 7

1.3  搭建後端開發和運行環境 7

1.3.1  安裝JDK和IDEA集成開發環境 7

1.3.2  安裝MySQL和MySQL Workbench客戶端 8

1.3.3  安裝Redis緩存 8

1.3.4  後端項目管理工具Maven 9

1.4  跑通人事管理系統 10

1.4.1  在MySQL上配置數據庫和數據表 10

1.4.2  安裝編譯和運行前端項目 13

1.4.3  啟動後端Spring Boot框架項目 14

1.4.4  觀察前端頁面 15

1.5  實踐練習 16

第 2 章  Vue.js實例和指令 17

2.1  認識Vue.js實例 17

2.1.1  通過範例瞭解實例 17

2.1.2  在實例中定義和使用方法 18

2.1.3  Vue.js實例的生命周期及其鉤子函數 19

2.2  Vue內置指令 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  循環渲染指令 27

2.3  自定義指令 28

2.3.1  鉤子函數 28

2.3.2  開發自定義指令 28

2.3.3  以動態方式傳入參數 29

2.4  實踐練習 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  業務頁面用到的element-ui組件 40

3.4.1  el-table表格組件 40

3.4.2  el-form表單組件 41

3.4.3  <el-button>命令框組件 42

3.4.4  <el-dialog>對話框組件 43

3.5  實踐練習 44

第 4 章  Vue.js方法、監聽器和事件處理修飾符 45

4.1  Vue.js方法 45

4.1.1  定義和使用方法的參數 45

4.1.2  組件與處理方法的綁定方式 46

4.2  監聽器 47

4.2.1  監聽屬性 48

4.2.2  監聽對象 49

4.2.3  通過監聽器綁定屬性和方法 50

4.3  事件處理方法的修飾符 51

4.3.1  stop阻止事件擴散的修飾符 51

4.3.2  capture捕獲事件的修飾符 53

4.3.3  只執行一次操作的once修飾符 54

4.3.4  只觸發本處理方法的self修飾符 55

4.3.5  處理按鍵事件的修飾符 56

4.4  實踐練習 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實現組件間的交互 62

5.2  頁面上方導航組件分析 63

5.2.1  導航組件的構成 63

5.2.2  Breadcrumb組件分析 63

5.2.3  watch監聽器分析 65

5.2.4  組合成上方導航組件 65

5.3  左側導航欄組件分析 67

5.3.1  菜單類組件分析 67

5.3.2  引入Vue Router 69

5.3.3  整合路由模塊，實現導航效果 70

5.4  業務功能組件分析 73

5.5  匯總組件，佈局前端頁面 74

5.5.1  App.vue入口程序 74

5.5.2  在main.js中引入資源 74

5.5.3  在layout實例中佈局前端元素 75

5.6  實踐練習 76

第 6 章  用Vuex實現組件間的交互 78

6.1  Vuex組件分析 78

6.1.1  Vuex的重要對象 78

6.1.2  搭建Vuex開發環境 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  實踐練習 90

第 7 章  搭建Spring Boot項目的基本框架 91

7.1  Spring Boot概述 91

7.1.1  Spring Boot是什麽 92

7.1.2  Spring Boot架構與MVC模式 92

7.1.3  Spring Boot與前端項目的交互方式 93

7.2  搭建Spring Boot開發環境 93

7.2.1  安裝JDK開發環境 94

7.2.2  安裝IDEA集成開發環境 95

7.2.3  確認IDEA集成Maven工具 96

7.3  搭建腳手架項目 97

7.3.1  創建基於Spring Boot的腳手架項目 97

7.3.2  通過pom文件引入依賴包 98

7.3.3  編寫啟動類 99

7.3.4  編寫控制器類 99

7.3.5  啟動項目、發送請求並觀察效果 100

7.3.6  對Spring Boot項目的說明 100

7.4  人事管理後端項目結構概述 101

7.5  實踐練習 102

第 8 章  後端控制器和Swagger組件 103

8.1  通過HTTP協議對外提供服務 103

8.1.1  HTTP協議概述 103

8.1.2  HTTP常用返回碼 104

8.1.3  HTTP請求動作和增刪改查請求 104

8.2  實現後端控制器方法 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  實踐練習 115

第 9 章  後端業務層和數據服務層 116

9.1  在業務層封裝業務代碼 116

9.1.1  業務類的構成 116

9.1.2  用@Service修飾業務類 117

9.1.3  @Autowired和依賴註入 120

9.2  ORM組件與數據服務層 120

9.3  編寫基於MyBatis的數據服務層 121

9.3.1  引入依賴包，編寫數據庫配置代碼 121

9.3.2  編寫映射文件 122

9.3.3  編寫mapper接口 124

9.3.4  編寫Java業務模型類 125

9.3.5  使用MyBatis的要點歸納 126

9.4  編寫基於JPA的數據服務層 126

9.4.1  引入依賴包，編寫數據庫配置代碼 126

9.4.2  通過註解編寫業務模型類 127

9.4.3  用JpaRepository實現數據服務層 128

9.4.4  改寫業務層的代碼 128

9.4.5  對比MyBatis和JPA 130

9.5  實踐練習 130

第 10 章  分頁、事務、Redis緩存和分庫分表 132

10.1  引入分頁效果 132

10.1.1  從前端獲取分頁參數 132

10.1.2  在後端用分頁插件實現分頁 133

10.1.3  通過前端觀察分頁效果 135

10.2  引入事務效果 137

10.2.1  用@transactional實現事務 137

10.2.2  事務隔離級別 138

10.2.3  事務傳播機制 139

10.2.4  合理設置超時時間 139

10.2.5  合理設置事務的粒度 140

10.3  用Redis緩存數據 140

10.3.1  Redis的數據結構 140

10.3.2  用Redis緩存員工數據 142

10.3.3  合理設置緩存超時時間 145

10.4  MyCat組件與分庫分表 146

10.4.1  分庫需求與MyCat組件 146

10.4.2  搭建MyCat環境，觀察分庫效果 147

10.4.3  以分庫的方式讀寫員工表 150

10.4.4  同時整合Redis和MyCat 150

10.5  實踐練習 151

第 11 章  全棧系統的前後端交互 152

11.1  Axios組件概述 152

11.1.1  同步和異步交互方式 152

11.1.2  在前端引入Axios組件 153

11.2  用Axios組件實現前後端交互 153

11.2.1  在request.js中封裝Axios實例 153

11.2.2  在業務類中調用Axios方法 155

11.2.3  頁面發起請求，異步處理返回 157

11.3  解決跨域問題 158

11.4  Spring Security組件與安全管理 159

11.4.1  Spring Security框架說明 159

11.4.2  引入依賴包，編寫配置參數 160

11.4.3  設置資源訪問策略 160

11.4.4  登錄流程說明 162

11.4.5  用過濾器實現Token鑒權 165

11.5  實踐練習 166

第 12 章  面向切麵編程、過濾器和攔截器 167

12.1  AOP概述 167

12.1.1  AOP的相關概念 167

12.1.2  AOP的範例 168

12.1.3  AOP與攔截器 170

12.2  攔截器的開發要點 171

12.2.1  攔截器的重要方法 171

12.2.2  引入多個攔截器 171

12.2.3  觀察攔截器的效果 174

12.3  過濾器的開發要點 174

12.3.1  過濾器的重要方法 174

12.3.2  開發過濾器 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  實踐練習 180

第 13 章  整合日誌組件 181

13.1  通過Logback組件輸出日誌 181

13.1.1  開發日誌代碼的註意點 181

13.1.2  日誌的級別與適用場景 182

13.1.3  引入依賴包，配置Logback參數 182

13.1.4  輸出不同級別的日誌 184

13.1.5  觀察日誌輸出效果 185

13.2  搭建基於ELK的日誌環境 187

13.2.1  ELK組件概述 187

13.2.2  搭建ELK環境 188

13.3  後端項目整合ELK組件 190

13.3.1  向Logstash輸出日誌 190

13.3.2  在Kibana上觀察日誌效果 191

13.4  實踐練習 193

第 14 章  整合Nacos服務治理組件 194

14.1  Spring Boot與微服務架構 194

14.1.1  單機版架構與微服務架構 194

14.1.2  微服務與Spring Cloud Alibaba組件 196

14.1.3  Spring Boot和Spring Cloud Alibaba的關系 196

14.1.4  後端Spring Cloud Alibaba項目的說明 197

14.2  服務治理組件Nacos概述 197

14.2.1  服務治理與註冊中心 197

14.2.2  搭建Nacos環境 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集群註冊服務 204

14.5  整合負載均衡組件 204

14.5.1  實現負載均衡的Ribbon組件 205

14.5.2  配置負載均衡參數 205

14.5.3  Ribbon常用參數分析 206

14.6  實踐練習 207

第 15 章  限流、熔斷和服務降級 208

15.1  微服務架構中的安全防護需求 208

15.1.1  限流需求概述 208

15.1.2  熔斷需求概述 209

15.1.3  高並發下的服務降級 209

15.2  搭建Sentinel環境 209

15.2.1  下載Sentinel組件 209

15.2.2  觀察Sentinel控制台界面 210

15.3  實現限流效果 210

15.3.1  引入依賴包 210

15.3.2  編寫配置文件 211

15.3.3  在方法上添加註解 211

15.3.4  通過控制台實現限流效果 212

15.3.5  觀察限流效果 214

15.4  實現熔斷效果 214

15.4.1  設置需要熔斷的方法 214

15.4.2  設置慢調用熔斷參數 215

15.4.3  設置異常熔斷參數 216

15.5  實現服務降級效果 217

15.5.1  整合限流和服務降級 217

15.5.2  整合熔斷和服務降級 219

15.5.3  服務降級要點分析 219

15.6  實踐練習 220

第 16 章  整合Gateway網關組件 221

16.1  Gateway網關組件概述 221

16.1.1  Gateway網關組件的作用 221

16.1.2  創建網關項目 222

16.1.3  轉發前端請求 223

16.1.4  網關過濾器 224

16.1.5  斷言及其關鍵字 225

16.2  整合Nacos和Sentinel 226

16.2.1  整合後的效果圖 226

16.2.2  整合Nacos組件 226

16.2.3  在網關層實現負載均衡 227

16.2.4  整合Sentinel組件 228

16.2.5  引入限流效果 229

16.2.6  分組限流 230

16.2.7  引入熔斷效果 232

16.3  實踐練習 233

第 17 章  整合Skywalking監控組件 234

17.1  監控服務的需求與Skywalking組件 234

17.1.1  服務監控需求分析 234

17.1.2  服務監控組件Skywalking 235

17.1.3  搭建Skywalking運行環境 235

17.2  後端項目整合Skywalking組件 237

17.2.1  回顧後端項目的框架 237

17.2.2  配置Skywalking的Agent 237

17.2.3  監控後端項目 238

17.2.4  觀察監控效果 239

17.3  設置基於Skywalking的告警機制 240

17.3.1  配置告警規則 240

17.3.2  觀察告警效果 242

17.3.3  通過Webhooks發送告警信息 243

17.4  實踐練習 244