ecommerce management system下載 - ecommerce management system原始碼下載

ecommerce management system

其他類別

1.0.0

下載

Element後台管理系統

一個基於Vue的電商後台管理系統，採用前後端分離的開發模式。專案使用的前端技術堆疊有Vue、vue-router、Element-UI、Axios、Echarts等。

技術選型

前端技術堆疊：

Vue
Vue-router
Element-UI
Axios
Echarts

業務功能

與功能相關的技術點

1.用戶登入

使用者登入成功後，客戶端透過sessionStorage和token記住其登陸狀態並維持。
透過路由導航守衛router.beforeEach控制使用者存取權限。防止尚未登入的使用者試圖透過URL存取登入頁面以外的其他頁面。

2.主頁佈局

佈局
- 透過Element-UI元件庫實現主頁的頁面佈局。
- 使用<el-menu>實現側邊導航欄，並在sessionStorage中新增activePath屬性以保持導航列高亮狀態。
- 側邊導航列的icon使用了Iconfont阿里向量圖示庫。
資料請求
- 透過Axios請求介面數據，並為axios請求攔截器添加token，保證獲取數據的權限。
- 使用NProgress進度列展示頁面載入（資料請求）進度。

3.用戶管理-用戶列表

使用<el-form>完成新增使用者表單，自訂表單校驗規則，並實現表單的重設、提交前預校驗。
使用作用域插槽slot-scope取得元件資料並自訂渲染範本。

4.權限管理

角色列表
- 使用三層v-for迴圈分別渲染角色的一、二、三級權限。
- 使用<el-tree>樹狀控制項展示角色可指派權限清單。
權限列表

5.商品管理

商品列表
- 使用全域過濾器Vue.filter自訂Date物件的顯示格式。
添加商品
- 使用<el-steps>步驟條元件引導使用者依照流程填寫新增商品表單。
- 使用<el-upload>元件以便使用者上傳商品圖片。
- 使用vue-quill-editor富文本編輯器以便使用者填寫商品內容。
- 使用<el-form>完成新增商品表單，自訂表單校驗規則，並實現表單提交前預校驗。
分類參數
商品分類
- 使用vue-table-with-tree-grid樹形表格元件展示一、二、三級商品分類。

6.訂單管理-訂單列表

使用<el-timeline>時間軸組件展示訂單的物流資訊。

7.數據統計-數據報表

使用Echarts展示用戶來源資料報表。

專案依賴

運作依賴

axios => 發送請求
echarts => 圖表
element-ui => Element-UI元件庫
lodash => 深拷貝與物件合併
nprogress => 進度條
vue-quill-editor => 富文本編輯器
vue-table-with-tree-grid => 樹狀表格

開發依賴

babel => ES6語法轉換
eslint/babel-eslint => 語法檢查
sass/sass-loader => sass語法
babel-plugin-transform-remove-console => 生產環境移除console
@babel/plugin-syntax-dynamic-import => 路由懶加載

專案最佳化

1.產生打包報告

透過Vue UI視覺化面板查看打包報告，分析如何優化/壓縮體積過大的檔案。

2.設定Webpack

透過chainWebpack為開發模式與發布模式指定不同的打包入口文件
1. 開發模式入口檔src/main-dev.js
2. 發布模式入口檔案src/main-prod.js
生產環境下，將部分體積過大的第三方函式庫使用CDN引入
預設情況下，透過import語法匯入的第三方依賴套件最終都會打包合併到同一個檔案中，導致打包成功後單一檔案體積過大的問題。
為了解決上述問題，可以透過Webpack的externals節點來設定需要載入外部CDN資源的依賴。凡是聲明在externals中的第三方依賴套件都將不會被打包。

透過外掛程式自訂不同環境的首頁內容（如開發模式使用import導入依賴包，而發布模式使用CDN引入）

 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} )

 <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >