3dwoo大學簡體電腦書店
Vue.js 3.0企業級管理后臺開發實戰:基于Element Plus
( 簡體 字)
作者:楊海民類別:1. -> 程式設計 -> 網路編程 -> Vue.js
出版社:電子工業出版社Vue.js 3.0企業級管理后臺開發實戰:基于Element Plus 3dWoo書號: 56102
詢問書籍請說出此書號!
缺書
NT售價: 690
出版日:10/1/2022
頁數:544
光碟數:0
站長推薦:
印刷:黑白印刷語系: ( 簡體 字 )
ISBN:9787121443299 加入購物車加到我的最愛 (請先登入會員)
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證, 繁體書的下載亦請直接連絡出版社)
第1章 項目啟動 1
1.1 項目原型 1
1.2 項目UI 2
1.3 項目開發流程 2
本章小結 4
第2章 項目構建 5
2.1 Node.js 5
2.2 開發工具 6
2.3 腳手架安裝 6
2.4 項目創建 8
2.4.1 命令構建項目 8
2.4.2 可視化構建項目 9
2.5 項目倉庫 11
2.5.1 申請倉庫 11
2.5.2 推送項目 12
2.6 項目分支 14
2.6.1 分支命名 14
2.6.2 分支管理 16
2.6.3 分支創建 18
本章小結 18
第3章 初始化項目 19
3.1 啟動項目 19
3.2 項目結構 19
3.3 文件結構 22
3.4 項目入口 22
3.5 路由 23
3.5.1 路由模式 23
3.5.2 路由定義 24
3.6 項目初始化配置 26
3.6.1 配置vue.config.js 27
3.6.2 配置Sass文件 27
3.6.3 重置瀏覽器默認樣式 29
3.6.4 Element Plus 組件庫 29
3.6.5 依賴包指令的區別 34
3.6.6 分支合并 35
本章小結 36
第4章 Vue.js 3的變化 37
4.1 新特性 37
4.1.1 組合式API 38
4.1.2 teleport組件 39
4.1.3 片段 41
4.1.4 觸發組件選項 41
4.1.5 單文件組件組合式API 43
4.1.6 變量驅動CSS 45
4.1.7 樣式穿透規則 46
4.1.8 異步組件suspense 47
4.2 生命周期 51
4.2.1 Vue.js 2生命周期 52
4.2.2 Vue.js 3生命周期 53
4.2.3 KeepAlive生命周期 56
4.3 生命周期的執行順序 56
4.3.1 單個組件 57
4.3.2 父子組件 58
4.3.3 keep-alive組件 59
4.4 新語法 60
4.4.1 ref和reactive 61
4.4.2 toRefs 62
4.4.3 computed 63
4.4.4 watch 65
4.4.5 watchEffect 67
4.4.6 globalProperties 68
4.4.7 getCurrentInstance 69
本章小結 69
第5章 登錄及注冊業務需求 70
5.1 路由重定向 70
5.2 制作登錄頁面 71
5.2.1 scoped局部樣式 71
5.2.2 el-form 表單組件 72
5.2.3 el-row和el-col組件 74
5.2.4 el-button組件 75
5.3 Vue.js指令與頁面交互 77
5.3.1 v-for指令 77
5.3.2 v-bind指令 78
5.3.3 v-on指令 80
5.3.4 v-show和v-if指令 81
5.3.5 v-model指令 84
5.4 開發登錄頁面業務邏輯 86
5.4.1 測試用例 86
5.4.2 el-form表單校驗 87
5.4.3 el-form自定義校驗規則 89
5.4.4 工具庫的封裝 92
5.5 Axios攔截器 94
5.5.1 實例上下文 94
5.5.2 接口文檔 97
5.5.3 Axios應用 99
5.5.4 Axios攔截器封裝 101
5.5.5 接口聯調 104
5.5.6 接口跨域配置 106
5.5.7 環境變量 109
5.6 開發驗證碼業務邏輯 112
5.6.1 交互體驗 114
5.6.2 表單提交按鈕文本交互 114
5.6.3 獲取驗證碼提示交互 114
5.6.4 獲取驗證碼接口聯調 116
5.6.5 驗證碼倒計時交互 119
5.7 攔截器業務處理 122
5.7.1 響應攔截 123
5.7.2 Promise對象 127
5.7.3 注冊接口聯調 129
5.7.4 密碼加密 134
5.7.5 登錄接口聯調 135
本章小結 136
第6章 搭建管理后臺 137
6.1 搭建框架 137
6.2 后臺首頁 139
6.3 局部組件 140
6.4 導航菜單 140
6.4.1 側欄菜單 141
6.4.2 el-menu菜單組件 141
6.4.3 一級菜單 144
6.4.4 子級菜單 147
6.4.5 視圖渲染 152
6.5 圖標 153
6.5.1 Icon圖標 153
6.5.2 Iconfont平臺 155
6.5.3 SvgIcon全局組件 156
6.5.4 組件通信Props 162
6.5.5 計算屬性Computed 166
6.5.6 導航菜單的優化 170
本章小結 173
第7章 Vuex狀態管理 174
7.1 狀態管理 174
7.1.1 Module 175
7.1.2 State 176
7.1.3 Getters 177
7.1.4 Mutations 178
7.1.5 Actions 179
7.2 后臺頭部靜態制作 181
7.2.1 Sass語法 181
7.2.2 菜單按鈕 183
7.2.3 賬號信息 184
7.3 側欄菜單的展開/收起 185
7.3.1 菜單交互 186
7.3.2 菜單優化 188
7.4 HTML5本地存儲 189
7.4.1 sessionStorage 190
7.4.2 localStorage 191
7.4.3 側欄菜單的刷新交互 192
本章小結 193
第8章 路由守衛 194
8.1 登錄邏輯 194
8.2 Cookie 195
8.3 Actions異步 197
8.3.1 異步登錄 198
8.3.2 目錄別名 199
8.4 路由守衛 200
8.4.1 to、from、next 參數 201
8.4.2 校驗token 202
8.4.3 請求頭token 204
8.4.4 數據源 205
8.4.5 退出接口 206
本章小結 211
第9章 信息管理模塊 212
9.1 框架微調 212
9.2 列表頁布局 213
9.2.1 新增按鈕 214
9.2.2 搜索表單 215
9.2.3 制作列表 217
9.2.4 制作分頁 218
9.3 分類頁面 221
9.3.1 按鈕和線 221
9.3.2 樹形菜單 222
9.3.3 分類表單 227
9.4 表單頁面 228
9.4.1 路由跳轉 228
9.4.2 信息管理詳情頁 229
9.4.3 細節樣式 234
9.5 分類接口聯調 236
9.5.1 JSON對象 237
9.5.2 交互配置 238
9.5.3 添加父級分類接口聯調 247
9.5.4 分類列表接口聯調 249
9.5.5 添加子級分類接口聯調 250
9.5.6 編輯分類接口聯調 256
9.5.7 刪除分類接口聯調 259
9.6 表單數據 265
9.6.1 級聯選擇器 265
9.6.2 分類渲染 266
9.6.3 服務器上傳文件 270
9.6.4 添加信息接口聯調 272
9.7 信息列表頁 278
9.7.1 列表接口聯調 278
9.7.2 分頁數據請求 282
9.7.3 發布狀態接口聯調 283
9.7.4 刪除接口聯調 285
9.7.5 封裝全局方法 287
9.7.6 篩選條件搜索 293
9.8 信息編輯 297
9.8.1 路由傳參 297
9.8.2 獲取詳情接口聯調 301
9.8.3 編輯信息接口聯調 303
本章小結 305
第10章 組件化 306
10.1 封裝列表組件 306
10.1.1 組件基礎 306
10.1.2 渲染表頭 308
10.1.3 配置元素 309
10.1.4 請求列表數據 313
10.1.5 回調子組件 318
10.1.6 el-pagination組件 321
10.1.7 el-switch組件 325
10.1.8 文本格式化 331
10.1.9 el-table組件屬性 332
10.2 插槽 334
10.2.1 默認插槽 334
10.2.2 具名插槽 335
10.2.3 作用域插槽 336
10.2.4 操作按鈕插槽 337
10.2.5 集成刪除按鈕 338
10.3 封裝表單組件 343
10.3.1 類別組件 346
10.3.2 上傳組件 351
10.3.3 富文本組件 353
10.3.4 日期時間組件 356
10.3.5 常規組件 360
10.3.6 表單按鈕 365
10.3.7 綁定字段 368
10.3.8 校驗規則 371
10.3.9 數據初始化 377
10.3.10 提交表單 381
10.3.11 聯動交互 383
10.3.12 等分布局 389
10.3.13 動態組件 390
10.4 封裝搜索組件 396
10.4.1 集成列表 396
10.4.2 Provide/Inject通信 397
10.4.3 配置元素 398
10.4.4 配置參數 400
10.4.5 關鍵字組件 401
10.4.6 數據集合 405
10.4.7 配置搜索按鈕 406
10.4.8 搜索聯調 407
10.4.9 重置聯調 411
10.4.10 分頁Bug 413
10.4.11 配置按鈕 417
10.4.12 等分布局 418
本章小結 420
第11章 系統配置 421
11.1 菜單管理 422
11.1.1 配置菜單列表 423
11.1.2 配置菜單搜索項 424
11.1.3 配置菜單列表接口 425
11.1.4 配置菜單表單 426
11.1.5 添加菜單 431
11.1.6 添加菜單頁面功能 437
11.1.7 編輯菜單 440
11.1.8 添加子級菜單 448
11.1.9 菜單列表 449
11.2 角色管理 456
11.2.1 配置角色列表 456
11.2.2 配置角色搜索項 457
11.2.3 配置角色列表接口 458
11.2.4 Dialog對話框組件抽離 459
11.2.5 配置角色表單 462
11.2.6 添加角色 467
11.2.7 編輯角色 470
11.2.8 角色列表 476
11.3 用戶管理 477
11.3.1 配置用戶列表 477
11.3.2 配置用戶搜索項 478
11.3.3 配置用戶列表接口 479
11.3.4 配置用戶表單 480
11.3.5 添加用戶 490
11.3.6 編輯用戶 491
11.3.7 用戶列表 496
本章小結 500
第12章 權限管理 501
12.1 動態路由 501
12.1.1 添加菜單 501
12.1.2 添加角色用戶 502
12.1.3 路由攔截next參數 504
12.1.4 路由權限接口 506
12.1.5 生成路由組件 507
12.1.6 addRoute動態添加路由 511
12.1.7 動態路由的跳轉 514
12.2 元素級權限 516
12.2.1 注冊自定義指令 517
12.2.2 應用自定義指令 519
12.2.3 元素級權限邏輯 519
12.2.4 權限編碼整合 522
本章小結 523
第13章 項目部署 524
13.1 項目打包 524
13.1.1 項目環境 524
13.1.2 白屏現象 526
13.1.3 項目體積分析 526
13.1.4 CDN加速外部資源 527
13.1.5 過濾圖標轉換 528
13.1.6 圖片壓縮 529
13.2 Nginx配置 530
13.2.1 文件部署 530
13.2.2 域名指向 531
本章小結 532
本書系統全面、由淺入深介紹了管理后臺開發的各方面知識、經驗和技巧,包括企業內部真實的項目開發方式、項目原型、API接口文檔、API接口聯調、團隊協作開發的Git代碼管理等,并附有400余個代碼清單,這些實例代碼與Git分支是一一對應的。除此之外,本書還結合Element Plus介紹了組件化的二次封裝、公共方法封裝等,可以使項目開發工作高效保質、事半功倍。管理后臺是企業應用最多的項目之一,讀者在學習本書后可以全面地了解管理后臺的整體結構,實現完全自主搭建管理后臺。本書既適合Web前端開發者學習使用,又適合零編程經驗、有興趣從事Web前端工作,以及想深入了解管理后臺內容的讀者閱讀,同時也可作為高等院校計算機相關專業的師生用書和培訓學校的教材。
在互聯網飛速發展的信息時代,隨著科技的發展和技術的變革,Web開發技術的更新迭代也在加快。從最初的HTML靜態頁面到混合開發,再到MVC時代;從MVC時代到Ajax的前后端協作開發,再到突進的前后端分離開發,新技術層出不窮。
Vue.js 是前后端分離開發的主流技術之一,它是一套構建用戶界面的漸進式框架,以數據驅動視圖和組件化的思想構建,采用自底向上、增量開發的設計,其核心庫只關注視圖層。同時,Vue.js 完全有能力驅動采用單文件組件和Vue.js 生態系統支持的庫開發的復雜單頁應用。從2013年的實驗階段到2015年的1.0版本,再到2016年的2.0版本和最新的3.2版本(截至本書寫作時),時至今日,Vue.js 已成為世界三大主流前端框架之一。Vue.js 在國內也是主流技術之一,有完善的中文文檔和中文社區,易學易上手。為了讓剛入門前端的愛好者更快掌握Vue.js 3技術,本書將結合企業中常見的管理后臺,對Vue.js 3技術進行實戰演練。通過管理后臺的業務模塊,結合Vue.js 技術,講解企業內部的開發過程,解讀項目文件,讀者可以熟悉、掌握并快速應用Vue.js技術,實現完全自主搭建管理后臺,并將本書中的開發技巧應用到工作中。
本書讀者對象
在校或初入職場的對企業內部開發項目不熟悉的Web開發人員。
在Vue.js技術方面零基礎,準備學習Vue.js技術的Web開發人員。
有意向提升自身技術水平的Web開發人員。
本書內容
本書共13章,各章簡介如下。
第1章“項目啟動”介紹新項目啟動時和項目有關的內容,如項目原型和項目UI。讀者從中能夠清楚地了解項目的業務邏輯、具體要開發的功能,以及要呈現給用戶的界面效果和交互效果。此外,本章還會討論項目開發過程的原型評審、測試用例評審、UI評審等事項,這些都是公司內部開發項目的常規流程。
第2章“項目構建”介紹如何通過腳手架工具的命令和可視化兩種方式快速構建項目,以及團隊協作的代碼倉庫管理和項目開發過程的分支管理。
第3章“初始化項目”講解Vue.js項目的運行入口和項目的文件結構分布,并且在開發項目前,通過初始化項目依賴第三方UI包、刪除瀏覽器默認樣式等操作提高工作開發效率,更好地還原UI稿件。
第4章“Vue.js 3的變化”主要介紹Vue.js 3的一些新的API特性、Vue.js 2和Vue.js 3生命周期的區別,以及新的聲明對象語法。了解本章內容,可以使后續的開發工作更為順暢。
第5章“登錄及注冊業務需求”介紹項目中一個模塊的業務開發過程,通過該模塊的需求一步步了解Element Plus UI組件的使用方式和Vue.js指令的用法,在開發過程中逐步了解前端如何與后端對接數據、以什么方式對接,并了解API接口文檔的使用、API接口聯調,以及測試工程師對測試用例的理解等。此外,本章還會介紹如何根據UI實現交互動作及項目原型實現業務需求。
第6章“搭建管理后臺”介紹管理后臺的整體結構及組件,通過拆解各部分組件,組合成管理后臺,并介紹如何通過“靜態路由”實現菜單的渲染及菜單圖標的開發。
第7章“Vuex狀態管理”介紹Vuex在Vue.js項目中的具體作用,如何通過Vuex實現項目全局的數據應用,并且通過Vuex實現管理后臺菜單的“展開/收起”效果。
第8章“路由守衛”介紹路由守衛在管理后臺中的作用,以及在開發路由守衛過程中遇到的各種邏輯和問題,以及解決方式。
第9章“信息管理模塊”介紹獨立模塊,結合第三方UI的開發過程,同時結合項目原型、項目UI及更多的API接口聯調,以便讀者進一步熟悉業務的整體開發過程。
第10章“組件化”介紹組件二次封裝的核心和組件封裝的整體過程,以及為什么要二次封裝組件,封裝的組件能為項目帶來什么。
第11章“系統配置”介紹如何通過“角色”橋接“用戶”,實現用戶的權限分配。通過二次封裝的組件,完成對“菜單管理”“角色管理”“用戶管理”3個模塊的開發,有助于讀者體會到傳統開發方式和組件開發方式的區別。
第12章“權限管理”介紹如何通過讀取用戶的權限以“動態路由”的方式渲染管理后臺的菜單,并實現對“自定義指令”現實頁面元素級的控制。
第13章“項目部署”介紹項目打包的環境變量配置和優化,通過優化使項目體積變小,提高項目加載速度,并簡單介紹如何通過部署服務器來訪問開發完成的項目。
pagetop