Vue.js 3.0企業級管理后臺開發實戰:基于Element Plus( 簡體 字) | |
作者:楊海民 | 類別:1. -> 程式設計 -> 網路編程 -> Vue.js |
出版社:電子工業出版社 | 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章“項目部署”介紹項目打包的環境變量配置和優化,通過優化使項目體積變小,提高項目加載速度,并簡單介紹如何通過部署服務器來訪問開發完成的項目。 |