Vue.js 3企業級項目開發實戰（微課視頻版）

目    錄

第1章  項目概述 1

1.1  項目全局介紹 1

1.2  項目成果 3

第2章  Vue3項目管理 9

2.1  使用Vite創建Vue3項目 9

2.2  Vite目錄結構 10

2.3  配置vue-router路由模塊 11

2.4  設置文件系統路徑別名 12

2.5  捕獲404路由 13

2.6  全局引用Element Plus 15

第3章  登錄管理 17

3.1  登錄靜態頁面 17

3.2  setup語法糖 20

3.3  登錄表單數據進行合法性驗證 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  全局路由守衛 33

3.11  Vuex數據持久化 34

3.12  退出登錄 36

3.13  使用loading進度條 37

第4章  後台主框架 39

4.1  商城後台首頁靜態頁面佈局 39

4.2  Header組件樣式開發 41

4.3  頁面刷新及瀏覽器全屏 43

4.4  修改管理員密碼 44

4.5  優化功能模塊實現代碼封裝 48

4.6  側邊欄導航菜單佈局 50

4.7  側邊欄菜單前後端數據交互 52

4.8  左側導航菜單的展開和隱藏 54

4.9  動態新增選項卡菜單 56

4.9.1  選項卡樣式佈局 56

4.9.2  渲染tabs標簽數據源 58

4.9.3  動態添加tabs標簽 59

4.9.4  刪除tabs標簽 60

4.9.5  keep-alive頁面緩存 62

4.10  後台首頁統計面板 62

4.10.1  統計面板靜態頁面 63

4.10.2  統計面板數據交互 64

4.10.3  骨架屏及數字滾動效果 65

4.11  後台首頁分類組件 67

4.12  首頁echarts圖表組件 69

4.12.1  echarts圖表靜態頁面 69

4.12.2  echarts圖表後端數據交互 71

4.13  店鋪提示組件 73

第5章  圖庫管理 77

5.1  圖庫管理頁面佈局 77

5.2  圖庫分類數據交互 81

5.3  圖庫分類列表分頁 83

5.4  新增圖庫分類樣式佈局 84

5.5  新增圖庫分類業務處理 85

5.6  修改圖庫分類 87

5.7  刪除圖庫分類 89

5.8  圖庫列表佈局 91

5.9  圖庫列表前後端數據交互 93

5.10  圖庫列表渲染及重命名 96

5.11  刪除圖片 99

第6章  管理員管理 101

6.1  管理員管理頁面樣式佈局 101

6.2  管理員管理頁面數據交互 104

6.3  管理員狀態管理 105

6.4  新增管理員 107

6.5  刪除管理員 112

6.6  編輯管理員信息 113

6.7  上傳管理員頭像 115

6.8  搜索及分頁 119

6.9  菜單權限管理樣式佈局 121

6.10  菜單權限管理表數據交互 124

6.11  新增菜單權限 125

6.12  封裝icon圖標模塊 130

6.13  修改菜單權限 131

6.14  修改菜單啟用狀態 133

6.15  刪除菜單權限 135

6.16  角色管理頁面樣式佈局 136

6.17  角色管理數據交互 138

6.18  新增角色 139

6.19  根據角色ID編輯角色 143

6.20  根據角色ID刪除角色 145

6.21  根據角色ID修改角色啟用狀態 146

6.22  分配權限 148

第7章  用戶管理 153

7.1  用戶管理頁面佈局 153

7.2  用戶列表前後端數據交互 156

7.3  新增用戶 157

7.4  修改用戶 161

7.5  刪除用戶 163

7.6  搜索用戶 164

第8章  商品管理 166

8.1  商品規格管理頁面樣式佈局 166

8.2  商品規格管理數據交互 168

8.3  新增商品規格 169

8.4  編輯商品規格 174

8.5  刪除和批量刪除商品規格 176

8.6  商品管理頁面樣式佈局 178

8.7  商品管理數據交互 181

8.8  商品類型切換及商品搜索 183

8.9  新增商品 185

8.10  編輯商品 189

8.11  設置商品輪播圖 191

8.12  設置商品詳情 195

8.13  設置商品規格 199

8.13.1  商品單規格設置 199

8.13.2  商品多規格設置 204

8.13.3  渲染商品規格列表 208

8.13.4  渲染商品規格選項值 210

8.13.5  新增商品規格選項值 211

8.13.6  刪除商品規格選項值 213

8.13.7  編輯商品規格選項值 214

8.13.8  新增商品規格 216

8.13.9  編輯商品規格 217

8.13.10  刪除商品規格 219

8.13.11  商品多規格設置表格樣式佈局 220

8.13.12  初始化多規格表格 222

8.13.13  動態添加表格數據 225

8.13.14  解決數據覆蓋 226

8.14  商品分類管理頁面樣式佈局 228

8.15  商品分類管理數據交互 229

8.16  新增商品分類 230

8.17  編輯商品分類 233

8.18  刪除商品分類 235

8.19  修改商品分類啟用狀態 237

第9章  訂單管理 239

9.1  商品訂單管理頁面佈局 239

9.2  商品訂單列表數據交互 242

9.3  訂單詳情管理 245

9.4  批量刪除訂單 248

9.5  導出訂單列表到Excel表格 249

第10章  優惠券管理 253

10.1  優惠券管理頁面樣式佈局 253

10.2  優惠券列表數據交互 256

10.3  新增優惠券 258

10.4  修改優惠券信息 263

10.5  刪除優惠券 265

10.6  設置優惠券失效 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  分銷員管理數據交互 280

12.3  查看分銷員推廣明細 282

12.4  分銷設置 286

第13章  公告管理 290

13.1  公告管理頁面樣式佈局 290

13.2  公告管理頁面數據交互 292

13.3  新增公告 294

13.4  編輯公告 297

13.5  刪除公告 299