Spring Boot 3 + Vue 3 開發實戰

目 錄
第1章 Spring Boot與貫穿項目介紹 1
1.1　Spring Boot介紹 1
1.1.1　Spring Boot特性 2
1.1.2　Spring Initializr 3
1.2　開發環境 4
1.2.1　JDK 4
1.2.2　Maven 5
1.2.3　Gradle 5
1.2.4　Git 5
1.2.5　MySQL 5
1.2.6　Eclipse 6
1.2.7　Intellij IDEA 6
1.2.8　在IDEA中集成Maven 7
1.3　Spring Boot案例 7
1.3.1　創建項目 8
1.3.2　項目結構 9
1.3.3　第一個案例 11
1.4　Spring Boot Test 12
1.5　貫穿項目的需求與設計 13
1.5.1　Alan人事管理系統 14
1.5.2　技術選型 14
1.5.3　員工管理模塊和部門管理模塊 15
1.5.4　權限管理模塊 15
1.5.5　數據庫設計 17
1.5.6　實體類設計 18
1.5.7　界面設計 19
1.6　本章總結 20
第2章 Spring Boot+SSM實戰 21
2.1　創建Spring Boot Module貫穿項目 21
2.1.1　創建Module 22
2.1.2　Alan人事管理系統項目結構 23
2.2　Spring Boot簡化配置 24
2.2.1　簡化Maven依賴配置 24
2.2.2　簡化SSM框架配置 27
2.3　MyBatis 28
2.3.1　解耦合 29
2.3.2　參數 30
2.3.3　關聯關系 33
2.3.4　動態語句 36
2.3.5　DAO層設計 37
2.4　Spring 38
2.4.1　DI 38
2.4.2　AOP 39
2.4.3　Service設計 40
2.5　Spring MVC 41
2.5.1　URL映射 41
2.5.2　接收參數 43
2.5.3　轉發、重定向、響應JSON 44
2.5.4　Controller 設計 46
2.6　本章總結 48
第3章 顯示層技術演變與Thymeleaf 49
3.1　顯示層技術演變 49
3.1.1　靜態網站 49
3.1.2　CGI 50
3.1.3　Servlet 50
3.1.4　JSP 51
3.1.5　模板引擎 52
3.1.6　模板引擎對比 53
3.1.7　前後端分離 54
3.2　Thymeleaf 55
3.3 在IDEA中復制項目並搭建環境 55
3.4　Thymeleaf詳解 57
3.4.1　指令與顯示 57
3.4.2　表達式 58
3.4.3　表達式運算 60
3.4.4　選擇分支 61
3.4.5　循環 62
3.4.6　設置屬性值 64
3.4.7　CSS修飾 65
3.4.8　片段 66
3.5　Thymeleaf高級特性 66
3.5.1　全局工具對象 66
3.5.2　內聯操作 67
3.6　Thymeleaf項目實戰 69
3.6.1　顯示頁面 69
3.6.2　新增頁面 71
3.6.3　修改頁面 71
3.7　本章總結 72
第4章 傳統Web前端設計 73
4.1　前端設計介紹 73
4.1.1　網頁設計技術 74
4.1.2　網站通信技術 76
4.2　Bootstrap 77
4.2.1　柵格化 77
4.2.2　控件 78
4.2.3　Bootstrap項目實戰 78
4.3　jQuery 80
4.3.1　常用API 80
4.3.2　jQuery項目實戰 81
4.4　iframe復用技術實現首頁 83
4.5　AJAX 85
4.5.1　AJAX特性 85
4.5.2　AJAX項目實戰 86
4.5.3　模態框 88
4.5.4　JavaScript UI介紹 90
4.6　本章總結 91
第5章 Spring Boot特性與原理 92
5.1　spring-boot-dependencies管理依賴 92
5.1.1　版本管理 92
5.1.2　spring-boot-starter簡化依賴 93
5.2　簡化配置 95
5.2.1　properties和YAML 95
5.2.2　Java Config 97
5.3　快速運行 99
5.3.1　內置Web容器 99
5.3.2　熱部署 100
5.3.3　啟動類 100
5.4　推薦技術 101
5.4.1　HikariCP數據庫連接池 102
5.4.2　Java日誌發展史與Logback 103
5.5　Spring Boot原理與源碼分析 107
5.5.1　@SpringBootApplication註解 108
5.5.2　Spring Boot啟動流程 109
5.6　本章總結 115
第6章 持久層發展與Spring Data JPA 116
6.1　相關技術介紹 116
6.1.1　Spring Data 116
6.1.2　Hibernate 117
6.1.3　JPA 117
6.1.4　Spring Data JPA 118
6.2　Spring Data JPA詳解 118
6.2.1　環境搭建 118
6.2.2　實體類 120
6.2.3　Repository接口 121
6.2.4　基本的新增、刪除、修改、查詢操作 123
6.2.5　方法命名查詢 125
6.2.6　JPQL 126
6.3　關聯關系 129
6.3.1　多對一 130
6.3.2　一對多 133
6.3.3　多對多 137
6.4　Spring Data JPA項目實戰 138
6.4.1　實體類開發 138
6.4.2　DAO層開發 140
6.4.3　Service層及動態條件查詢 141
6.4.4　多對多視圖層開發 143
6.5　本章總結 147
第7章 緩存與Redis 148
7.1　Redis介紹 148
7.1.1　Redis特性 149
7.1.2　Redis數據結構 149
7.2　Redis詳解 149
7.2.1　安裝Redis 149
7.2.2　Redis命令 150
7.3　Spring Boot操作Redis 151
7.3.1　Spring Data Redis 152
7.3.2　Redis Repository 158
7.4　Spring Cache 162
7.4.1　Spring Cache介紹 163
7.4.2　Spring Cache詳解 163
7.4.3　Spring Cache項目實戰 165
7.5　本章總結 168
第8章 認證、授權與Spring Security 169
8.1　安全框架 169
8.1.1　安全框架比較 169
8.1.2　RBAC詳解與設計 170
8.1.3　Spring Security環境配置 172
8.2　認證 173
8.2.1　Properties存儲用戶 173
8.2.2　Spring Security Config 173
8.2.3　配置登錄 175
8.2.4　數據庫存儲用戶 178
8.2.5　加密技術、MD5和Bcrypt 180
8.3　授權 183
8.3.1　授權配置 183
8.3.2　Config配置方式 186
8.3.3　@PreAuthorize註解方式 188
8.3.4　過濾URL方式 189
8.4　視圖層權限 193
8.5　本章總結 194
第9章 Vue基礎 196
9.1　Vue介紹 196
9.1.1　MVVM思想 197
9.1.2　前端三大框架介紹 197
9.2　DOM編程與MVVM編程對比 198
9.2.1　改變元素內容案例 198
9.2.2　表單與表格案例 200
9.3　Vue語法 203
9.3.1　Vue對象和文本渲染 203
9.3.2　選擇分支 204
9.3.3　循環 205
9.3.4　CSS處理 207
9.3.5　事件 208
9.3.6　表單 209
9.4　Vue項目實戰 210
9.4.1　Vue環境搭建 210
9.4.2　員工展示 211
9.4.3　條件查詢 213
9.4.4　選中表格數據 214
9.4.5　改造按鈕與刪除員工 214
9.4.6　新增員工 215
9.4.7　修改員工 216
9.5　本章總結 217
第10章 RESTful與接口文檔 218
10.1　RESTful介紹 219
10.1.1　RESTful原則 219
10.1.2　RESTful風格的URL 220
10.2　Spring MVC RESTful支持 221
10.3　RESTful項目實戰 223
10.4　測試接口 227
10.5　Swagger 228
10.5.1　Swagger項目實戰 229
10.6　本章總結 232
第11章 Vue 3+Vite+TypeScript前端工程化 233
11.1　前端工程化簡介 233
11.1.1　前端工程化的必要性 233
11.1.2　前端工程化的現狀 234
11.2　前端工程化技術概覽 235
11.2.1　ECMAScript 235
11.2.2　TypeScript 235
11.2.3　NodeJS 236
11.2.4　npm 237
11.2.5　Webpack與Rollup 237
11.2.6　Babel 237
11.2.7　Vue CLI 238
11.2.8　Vite 238
11.3　ECMAScript語法 238
11.3.1　let和const 238
11.3.2　定義對象 239
11.3.3　import和export 241
11.3.4　箭頭函數 242
11.4　Vue前端工程化環境搭建 244
11.4.1　安裝NodeJS 244
11.4.2　安裝npm 244
11.4.3　WebStorm 244
11.5　使Vite創建Vue項目 245
11.5.1　Vite創建項目 245
11.5.2　Vue項目歡迎頁面代碼解析 247
11.6　本章總結 250
第12章 Vue高級 251
12.1　組件 251
12.1.1　定義組件 252
12.1.2　復用組件 253
12.1.3　組件傳參 256
12.2　組合式API與setup語法糖 259
12.2.1　組合式API 259
12.2.2　setup語法糖 262
12.2.3　響應式函數ref()和reactive() 263
12.3　路由 264
12.3.1　定義路由 264
12.3.2　路由跳轉 266
12.3.3　嵌套路由 269
12.3.4　路由傳參 270
12.4　Hash和History的原理 270
12.5　axios 272
12.6　本章總結 273
第13章 Spring Boot+Vue前後端分離項目實戰 274
13.1　選項式API項目實戰 274
13.1.1　引入技術依賴 274
13.1.2　員工管理模塊 276
13.1.3　解決跨域問題 279
13.1.4　Index組件 279
13.2　組合式API項目實戰 281
13.3　setup語法糖項目實戰 283
13.4　本章總結 284
第14章 Element Plus 285
14.1　Element Plus介紹 285
14.1.1　Element Plus特點 286
14.1.2　Element Plus案例 286
14.1.3　搭建環境 287
14.2　Element Plus項目實戰 288
14.2.1　首頁佈局 288
14.2.2　導航欄 289
14.2.3　表格 291
14.2.4　查詢表單 293
14.2.5　按鈕 295
14.2.6　彈出框提示 295
14.2.7　新增員工表單 296
14.2.8　自消失彈出框 297
14.3　本章總結 299
第15章 SPA富客戶端 300
15.1　SPA介紹 300
15.1.1　SPA優缺點 301
15.1.2　富客戶端設計 301
15.2　富客戶端項目實戰 302
15.2.1　Index視圖組件開發 302
15.2.2　標簽頁設計 304
15.2.3　標簽頁優化 305
15.2.4　彈出框 307
15.2.5　員工組件重新設計 308
15.2.6　組件解耦重構 311
15.2.7　組件再次解耦重構 316
15.3　本章總結 317
第16章 前後端分離下的跨域、認證與授權 318
16.1　瀏覽器同源策略 319
16.2　跨域解決方案 319
16.2.1　CORS 320
16.2.2　反向代理 322
16.3　前後端分離項目認證 325
16.3.1　反向代理實現認證 325
16.3.2 CORS實現認證 329
16.3.3 JWT實現認證 330
16.4　前端界面權限控制 342
16.4.1　註銷 342
16.4.2　菜單級權限 343
16.5　Pinia 346
16.6　本章總結 349
第17章 項目完善及補充技術 350
17.1　分頁 350
17.1.1　後端實現 350
17.1.2　前端實現 353
17.2　CreateTime和ModifyTime 355
17.3　文件上傳 356
17.3.1　Spring MVC接收文件 357
17.3.2　表單上傳文件 359
17.3.3　AJAX上傳文件 361
17.3.4　前後端分離下的文件上傳 363
17.4　Lombok 365
17.5　最終項目展示 367
17.6　本章總結 369