第1章 項目概述 1
1.1 項目全局介紹 1
1.2 項目成果 3
第2章 Vue3項目管理 9
2.1 使用Vite創(chuàng)建Vue3項目 9
2.2 Vite目錄結構 10
2.3 配置vue-router路由模塊 11
2.4 設置文件系統(tǒng)路徑別名 12
2.5 捕獲404路由 13
2.6 全局引用Element Plus 15
第3章 登錄管理 17
3.1 登錄靜態(tài)頁面 17
3.2 setup語法糖 20
3.3 登錄表單數(shù)據進行合法性驗證 21
3.4 封裝axios請求模塊 23
3.5 登錄API交互 24
3.6 本地存儲token信息 27
3.7 根據token獲取管理員信息 28
3.8 禁止用戶重復登錄 30
3.9 使用Vuex倉庫管理用戶信息 32
3.10 全局路由守衛(wèi) 33
3.11 Vuex數(shù)據持久化 34
3.12 退出登錄 36
3.13 使用loading進度條 37
第4章 后臺主框架 39
4.1 商城后臺首頁靜態(tài)頁面布局 39
4.2 Header組件樣式開發(fā) 41
4.3 頁面刷新及瀏覽器全屏 43
4.4 修改管理員密碼 44
4.5 優(yōu)化功能模塊實現(xiàn)代碼封裝 48
4.6 側邊欄導航菜單布局 50
4.7 側邊欄菜單前后端數(shù)據交互 52
4.8 左側導航菜單的展開和隱藏 54
4.9 動態(tài)新增選項卡菜單 56
4.9.1 選項卡樣式布局 56
4.9.2 渲染tabs標簽數(shù)據源 58
4.9.3 動態(tài)添加tabs標簽 59
4.9.4 刪除tabs標簽 60
4.9.5 keep-alive頁面緩存 62
4.10 后臺首頁統(tǒng)計面板 62
4.10.1 統(tǒng)計面板靜態(tài)頁面 63
4.10.2 統(tǒng)計面板數(shù)據交互 64
4.10.3 骨架屏及數(shù)字滾動效果 65
4.11 后臺首頁分類組件 67
4.12 首頁echarts圖表組件 69
4.12.1 echarts圖表靜態(tài)頁面 69
4.12.2 echarts圖表后端數(shù)據交互 71
4.13 店鋪提示組件 73
第5章 圖庫管理 77
5.1 圖庫管理頁面布局 77
5.2 圖庫分類數(shù)據交互 81
5.3 圖庫分類列表分頁 83
5.4 新增圖庫分類樣式布局 84
5.5 新增圖庫分類業(yè)務處理 85
5.6 修改圖庫分類 87
5.7 刪除圖庫分類 89
5.8 圖庫列表布局 91
5.9 圖庫列表前后端數(shù)據交互 93
5.10 圖庫列表渲染及重命名 96
5.11 刪除圖片 99
第6章 管理員管理 101
6.1 管理員管理頁面樣式布局 101
6.2 管理員管理頁面數(shù)據交互 104
6.3 管理員狀態(tài)管理 105
6.4 新增管理員 107
6.5 刪除管理員 112
6.6 編輯管理員信息 113
6.7 上傳管理員頭像 115
6.8 搜索及分頁 119
6.9 菜單權限管理樣式布局 121
6.10 菜單權限管理表數(shù)據交互 124
6.11 新增菜單權限 125
6.12 封裝icon圖標模塊 130
6.13 修改菜單權限 131
6.14 修改菜單啟用狀態(tài) 133
6.15 刪除菜單權限 135
6.16 角色管理頁面樣式布局 136
6.17 角色管理數(shù)據交互 138
6.18 新增角色 139
6.19 根據角色ID編輯角色 143
6.20 根據角色ID刪除角色 145
6.21 根據角色ID修改角色啟用狀態(tài) 146
6.22 分配權限 148
第7章 用戶管理 153
7.1 用戶管理頁面布局 153
7.2 用戶列表前后端數(shù)據交互 156
7.3 新增用戶 157
7.4 修改用戶 161
7.5 刪除用戶 163
7.6 搜索用戶 164
第8章 商品管理 166
8.1 商品規(guī)格管理頁面樣式布局 166
8.2 商品規(guī)格管理數(shù)據交互 168
8.3 新增商品規(guī)格 169
8.4 編輯商品規(guī)格 174
8.5 刪除和批量刪除商品規(guī)格 176
8.6 商品管理頁面樣式布局 178
8.7 商品管理數(shù)據交互 181
8.8 商品類型切換及商品搜索 183
8.9 新增商品 185
8.10 編輯商品 189
8.11 設置商品輪播圖 191
8.12 設置商品詳情 195
8.13 設置商品規(guī)格 199
8.13.1 商品單規(guī)格設置 199
8.13.2 商品多規(guī)格設置 204
8.13.3 渲染商品規(guī)格列表 208
8.13.4 渲染商品規(guī)格選項值 210
8.13.5 新增商品規(guī)格選項值 211
8.13.6 刪除商品規(guī)格選項值 213
8.13.7 編輯商品規(guī)格選項值 214
8.13.8 新增商品規(guī)格 216
8.13.9 編輯商品規(guī)格 217
8.13.10 刪除商品規(guī)格 219
8.13.11 商品多規(guī)格設置表格樣式布局 220
8.13.12 初始化多規(guī)格表格 222
8.13.13 動態(tài)添加表格數(shù)據 225
8.13.14 解決數(shù)據覆蓋 226
8.14 商品分類管理頁面樣式布局 228
8.15 商品分類管理數(shù)據交互 229
8.16 新增商品分類 230
8.17 編輯商品分類 233
8.18 刪除商品分類 235
8.19 修改商品分類啟用狀態(tài) 237
第9章 訂單管理 239
9.1 商品訂單管理頁面布局 239
9.2 商品訂單列表數(shù)據交互 242
9.3 訂單詳情管理 245
9.4 批量刪除訂單 248
9.5 導出訂單列表到Excel表格 249
第10章 優(yōu)惠券管理 253
10.1 優(yōu)惠券管理頁面樣式布局 253
10.2 優(yōu)惠券列表數(shù)據交互 256
10.3 新增優(yōu)惠券 258
10.4 修改優(yōu)惠券信息 263
10.5 刪除優(yōu)惠券 265
10.6 設置優(yōu)惠券失效 266
第11章 商品評論管理 269
11.1 商品評論管理頁面樣式布局 269
11.2 渲染商品評論列表 271
11.3 展開商品評論 272
11.4 回復或修改商品評論 273
11.5 設置商品評論是否顯示 276
第12章 分銷管理 278
12.1 分銷員管理頁面樣式布局 278
12.2 分銷員管理數(shù)據交互 280
12.3 查看分銷員推廣明細 282
12.4 分銷設置 286
第13章 公告管理 290
13.1 公告管理頁面樣式布局 290
13.2 公告管理頁面數(shù)據交互 292
13.3 新增公告 294
13.4 編輯公告 297
13.5 刪除公告 299