基于Vue.js的電商管理平臺的設計與實現

王思辰 李林

摘 ?要：隨著電子商務的迅猛發展，電商服務平臺應運而生，此外，在企業逐步信息化的趨勢下信息化已經悄無聲息地走進每個企業內部，因此電商管理平臺的研究與開發對于電商企業來說顯得尤為重要。本電商管理平臺主要使用vue.js的Web技術對其進行研究設計與實現，旨在更加高效、便捷地管理后臺傳入的數據，且能夠幫助使用者更好地進行用戶、商品以及訂單管理。

關鍵詞：vue.js;Element-UI;電商管理

中圖分類號：TP311 ? ? ?文獻標識碼：A文章編號：2096-4706（2021）14-0013-04

Abstract： With the rapid development of E-commerce， E-commerce service platform comes into being. In addition， under the trend of enterprise informatization， informatization has quietly entered each enterprise. Therefore， the research and development of E-commerce management platform is particularly important for E-commerce enterprises. Web technology of vue.js is mainly used in this E-commerce management platform， and it is researched， designed and implemented， aiming at more efficient and convenient management of background incoming data， and can help users better manage users， goods and orders.

Keywords： vue.js; Element-UI; E-commerce management

0 ?引 ?言

互聯網不斷發展的時代為電子商務行業帶來了極大的發展機遇，各類大型電商企業都建立了屬于自己的生態鏈。在如今電商行業逐漸走向規模化的同時為電子商務企業實現了電子商務交易量的不斷上漲，面對如今新消費環境下訂單量不斷增加的趨勢，電商企業需要研究一套適應發展的管理平臺以更好地迎接未來的業務挑戰，而如何處理這些數據借此實現這些數據本身的價值成為電子商務企業需要研究的方向。設計電商管理平臺的初衷就是為了幫助企業人員更好地處理用戶、商品以及訂單的數據，能夠實現對這些數據的查詢、增加、修改和刪除。

1 ?相關技術介紹

1.1 ?vue.js

Vue是目前前端三大主流框架之一，是一種實現數據雙向綁定的MVVM框架，通過使用vue能夠增強開發人員現有的HTML，極大地提高開發效率及開發人員的經驗。

1.2 ?Element-UI

Element-UI是一套由前端團隊推出的基于vue.js2.0的桌面端UI框架，該組件庫秉持一致、反饋、效率以及可控的設計原則幫助使用vue的前端開發人員更加快速的設計網頁。

2 ?需求分析

目前市場上針對企業內部的電商管理平臺功能比較單一，因此功能完善、操作簡單且方便管理的電商管理平臺將會得到企業的信賴。本電商管理平臺能夠滿足使用者了解和處理商品、訂單和用戶信息的需求，方便使用者隨時監控和處理一些數據。通過對相關產品的調研了解到電商管理平臺最需要的就是能夠查看和處理商品、訂單和用戶這三類最為重要的數據，這也是電商管理最基本的需求。由此，進而確定了本平臺的三個主要功能：用戶管理、商品管理以及訂單管理。

使用者能夠在該平臺中查看用戶、商品和訂單的相關信息，且用戶管理為使用者提供對用戶信息添加、修改、刪除、查詢及權限控制的服務，商品管理能夠幫助使用者查看各個商品的信息，提供商品添加和刪除功能，訂單管理可以實時觀測訂單付款和發貨狀態，提供訂單查詢和刪除功能。平臺整合了vue和Element-UI作為系統架構基礎，client-Server作為主要架構模式即以請求-響應方式工作，客戶端發送請求信息，服務端接收請求做出相應處理，前端將數據展示給用戶，借由此系統架構面向使用者。

3 ?模塊設計

系統模塊主要分為四部分：登錄登出、用戶管理、商品管理及訂單管理。該平臺主要設計為向有權限進行數據管理的人員使用，相關注冊需求需要在后端進行權限給予，因此暫不設計注冊功能，只設計登錄及退出功能。在首次打開該平臺時，會將頁面定向到登錄頁面，使用者需要輸入賬號密碼后在向后臺請求權限通過后方可進入主頁進行數據的查詢和處理。系統模塊設計如圖1所示。

4 ?設計實現

使用vue-cli腳手架搭建該項目的整體框架，后續安裝好項目所需要的依賴和插件，以及將項目設計的相關模塊頁面放入src文件夾中的component文件夾下。在頁面設計中主要運用Element-UI組件庫的相關組件渲染到頁面中構成頁面元素，在功能實現中主要運用vue.js的插值語法”{{ }}”將數據綁定到頁面的元素中。平臺主界面如圖2所示。

4.1 ?登錄模塊

在進入平臺登錄頁面時使用者需要輸入賬號和密碼，點擊登錄后會向后端發起post請求，賬號和密碼參數分別對應數據庫中表login的username及password。此外還設置了重置按鈕用來重置輸入框內容。

使用者在賬號和密碼框輸入賬號密碼并點擊登錄按鈕后首先會進行表單驗證，若輸入格式無誤則將賬號密碼作為參數向后端發起post請求。需要注意的是在與后端進行數據的交互時會用到Axios模塊，此時Axios會接收前端返回的數據來與后臺數據進行匹配，在這過程中會觸發Axios請求攔截：

axios.interceptors.request.use（request => {

request.headers.Authorization=window.sessionStorage.getItem（‘token’）;

return request;

}）

Vue.prototype.$http = axios

以上代碼在main.js文件中，該操作會預處理http請求來獲取API權限，權限通過后進行賬號和密碼的數據匹配，判斷信息匹配成功后后臺會返回json格式的數據，這是后端響應請求的主要過程。而在前端代碼中需要對后端返回的數據進一步地處理。首先為登錄按鈕設置點擊事件login（），而后在login（）中配置async/await方法，await相當于包裝了一個promise的resolve，是異步操作的一個同步處理，接下來對后臺返回的數據進行判斷，若后臺返回的數據中meta的狀態碼為200則先將data中的token保存下來，這是為了在后續的頁面操作中將該token作為一種令牌來判斷是否具有可操作的權限，而后通過vue-router的編程式導航將頁面跳轉到主頁。到此則完成登錄操作。

4.2 ?用戶管理模塊

在用戶管理模塊中包含著用戶列表頁面，打開用戶列表頁面時會向后端發起get請求獲取數據庫中用戶列表users數據，獲取成功后在頁面中能夠直觀地看到用戶的姓名、電話、郵箱及當前用戶的狀態。

姓名、郵箱及電話的數據為了防止傳遞的數據值被直接修改，在數據的渲染時采用 prop數據單向傳遞的屬性進行數據的傳值。而為了將用戶狀態設置為可調節的開關按鈕方便修改其狀態，采用作用域插槽的方法在獲取到狀態值后將其渲染為<el-switch>開關。需要在<el-switch>開關的父級template標簽中寫入v-slot：defalut=‘scope’，在開關中使用v-model=“scope.row.mg_state”進行數據綁定，而后為開關添加狀態改變時的回調函數changeState（），將scope.row作為參數傳入，該回調函數利用async/await方法通過this.$http向后端發起put請求來同步修改用戶狀態。關鍵代碼為：

async changeState（stateInfo）{

console.log（stateInfo）;

const{data：res}=awaitthis.$http.put（`users/${stateInfo.id}/state/${stateInfo.mg_state}`）;

if（res.meta.status ！= 200）{

stateInfo.mg_state ！= stateInfo.mg_state;

return this.$message.error（‘修改狀態失敗’）;

};

this.$message.success（‘修改狀態成功’）;

}

后續的主要功能代碼基本與以上代碼類似都通過async/await接收后端返回的數據（promise對象），并作進一步處理。

查詢用戶功能，在頁面的搜索輸入框中輸入用戶名或者用戶名包含的字符等，就會顯示與搜索內容匹配的用戶，實現查詢操作。

添加用戶功能，為頁面設置添加用戶操作，添加用戶的信息輸入部分選擇Element-UI組件庫中的<el-form>表單組件，并使用vue中的v-model實現表單數據的雙向綁定。在使用者輸入用戶名、密碼、電話以及郵箱后點擊確定后會向后端發起post請求，成功即可完成添加用戶操作，刷新頁面會看到添加的用戶信息。

修改用戶功能，為頁面設置修改用戶信息操作，同樣選擇<el-form>表單組件。在選擇修改用戶時會在信息輸入框中顯示用戶的原信息，幫助使用者直觀的看到用戶的原個人信息方便修改。在點擊確定后向后端發起put請求修改數據，請求成功后后端返回數據即可完成用戶信息的修改。

刪除用戶功能，在刪除用戶操作中會首先詢問使用者是否確定修改，得到確定后發起delete請求執行刪除功能。

4.3 ?商品管理模塊

該模塊向使用者展示商品列表數據及提供商品查詢、添加、刪除操作。

打開商品列表頁面時向會后端發起get請求獲取數據庫中表goods的商品數據，分頁顯示于頁面中，返回的數據包含商品名稱、價格、重量以及商品創建時間。使用者可在搜索框中輸入商品信息來實現商品的查詢。

設置商品刪除功能，依舊采用delete請求執行刪除操作，在與后端數據匹配成功后刪除數據庫與該商品有關的信息，并自動更新前端頁面。

在商品添加功能中，采用步驟式添加，首先根據使用者自身的需求設置需要添加商品的基本信息包括商品名稱、價格、重量、庫存數量以及商品分類，接著設置商品參數選擇商品規格和顏色，最后上傳圖片并點擊添加商品按鈕。添加商品功能部分主要使用Element-UI組件庫中的<el-form>表單、<el-input>輸入框以及<el-upload>上傳組件，依靠vue的數據綁定特性將使用者輸入的相關數據作為請求參數與后端進行交互實現添加功能。在上傳圖片功能模塊中寫入handlePreview（）作為處理圖片預覽效果函數，handleRemove（）作為 處理移除圖片函數以及handleSuccess（）作為監聽圖片上傳成功函數，執行上傳圖片的業務邏輯。在完成這一系列的操作之后點擊添加商品觸發add（）添加事件將獲取到的使用者輸入的數據作為參數向后端發起post請求，完成添加商品操作，若后端操作添加成功后即可在頁面中看到添加的商品數據。關鍵代碼為：

add（）{

this.$refs.addFormRef.validate（async valid => {

if （！valid） {

return this.$message.error（‘請填寫必要的選項！’） }

const form= _.cloneDeep（this.addForm）

form.goods_cat= form.goods_cat.join（‘，’）

this.manyTableData.forEach（item =>{

const newInfo={

attr_id： item.attr_id，

attr_value： item.attr_vals.join（‘ ‘）}

this.addForm.attrs.push（newInfo）}）;

this.onlyTableData.forEach（item => {

const newInfo = { attr_id： item.attr_id， attr_value： item.attr_vals}

this.addForm.attrs.push（newInfo）}）

form.attrs = this.addForm.attrs;

const { data： res } = await this.$http.post（‘goods’， form）

if （res.meta.status ！== 201） {

return this.$message.error（‘添加商品失敗！’）}

this.$message.success（‘添加商品成功！’）

this.$router.push（‘/goods’）

}）}}

以上代碼執行添加商品的業務邏輯：處理添加的商品參數（型號等）、處理屬性（規格等）及發起請求。

4.4 ?訂單管理模塊

在訂單管理子頁面中使用者可以查詢和刪除訂單，訂單的基本信息包括訂單編號、付款狀態、發貨狀態以及下單時間。由于后端數據庫返回的下單時間并不是標準時間格式，返回的是需要創建的時間和GMT時間1970年1月1日之間相差的毫秒數，因此需要在main.js入口文件中使用vue.filter（）全局時間過濾器：

Vue.filter（‘dataFormat’， function （Time） {

const dt = new Date（Time）

const y = dt.getFullYear（）

const m = （dt.getMonth（） + 1 + ‘’）.padStart（2， ‘0’）

const d = （dt.getDate（） + ‘’）.padStart（2， ‘0’）

const hh = （dt.getHours（） + ‘’）.padStart（2， ‘0’）

const mm = （dt.getMinutes（） + ‘’）.padStart（2， ‘0’）

const ss = （dt.getSeconds（） + ‘’）.padStart（2， ‘0’）

return `${y}-${m}-$g0gggggg ${hh}：${mm}：${ss}`

}）

以上代碼將數據庫返回的毫秒數數字格式的數據轉化為標準的時間格式數據返回頁面。

在頁面中添加訂單刪除功能，采用發送delete請求執行刪除操作，后端返回200的狀態碼后自動更新頁面，即可實現刪除訂單操作。

5 ?結 ?論

本文設計的電商管理平臺實現了電商管理的前端功能設計，使用vue.js的框架開發，極大地減少了開發的代碼量，且應用了Element-UI組件庫進行網頁設計降低了開發成本提高開發效率。經過測試本平臺能夠滿足相關電商管理的基本需求，基本實現了對用戶、商品及訂單數據的增刪改查。 后續可以擴展對訂單的批量退款退貨等業務，降低電商企業的運營成本。

參考文獻：

[1] 駱海東，馬衛清，梁丹.面向零售電商的倉庫管理系統設計 [J].現代信息科技，2021，5（2）：27-31.

[2] 徐燕萍.基于B/S的企業銷售管理系統設計 [J].軟件，2016，37（5）：84-88.

[3] 陳宇.基于Spring Boot的電商管理系統的設計 [J].現代信息科技，2020，4（1）：25-26.

[4] 方生.基于“Vue.js”前端框架技術的研究 [J].電腦知識與技術，2021，17（19）：59-60+64.

[5] 劉朔言，吳涵，楊一夫，等.基于Vue構建現代化博物館可視化應用 [J].電腦知識與技術，2021，17（14）：188-190.

作者簡介：王思辰（1999—），男，漢族，重慶人，本科在讀，研究方向：Web前端開發技術。