基于Vue.js的電商管理平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

王思辰 李林

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

關(guān)鍵詞：vue.js;Element-UI;電商管理

中圖分類號(hào)：TP311 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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 ?引 ?言

互聯(lián)網(wǎng)不斷發(fā)展的時(shí)代為電子商務(wù)行業(yè)帶來了極大的發(fā)展機(jī)遇，各類大型電商企業(yè)都建立了屬于自己的生態(tài)鏈。在如今電商行業(yè)逐漸走向規(guī)?；耐瑫r(shí)為電子商務(wù)企業(yè)實(shí)現(xiàn)了電子商務(wù)交易量的不斷上漲，面對(duì)如今新消費(fèi)環(huán)境下訂單量不斷增加的趨勢(shì)，電商企業(yè)需要研究一套適應(yīng)發(fā)展的管理平臺(tái)以更好地迎接未來的業(yè)務(wù)挑戰(zhàn)，而如何處理這些數(shù)據(jù)借此實(shí)現(xiàn)這些數(shù)據(jù)本身的價(jià)值成為電子商務(wù)企業(yè)需要研究的方向。設(shè)計(jì)電商管理平臺(tái)的初衷就是為了幫助企業(yè)人員更好地處理用戶、商品以及訂單的數(shù)據(jù)，能夠?qū)崿F(xiàn)對(duì)這些數(shù)據(jù)的查詢、增加、修改和刪除。

1 ?相關(guān)技術(shù)介紹

1.1 ?vue.js

Vue是目前前端三大主流框架之一，是一種實(shí)現(xiàn)數(shù)據(jù)雙向綁定的MVVM框架，通過使用vue能夠增強(qiáng)開發(fā)人員現(xiàn)有的HTML，極大地提高開發(fā)效率及開發(fā)人員的經(jīng)驗(yàn)。

1.2 ?Element-UI

Element-UI是一套由前端團(tuán)隊(duì)推出的基于vue.js2.0的桌面端UI框架，該組件庫(kù)秉持一致、反饋、效率以及可控的設(shè)計(jì)原則幫助使用vue的前端開發(fā)人員更加快速的設(shè)計(jì)網(wǎng)頁(yè)。

2 ?需求分析

目前市場(chǎng)上針對(duì)企業(yè)內(nèi)部的電商管理平臺(tái)功能比較單一，因此功能完善、操作簡(jiǎn)單且方便管理的電商管理平臺(tái)將會(huì)得到企業(yè)的信賴。本電商管理平臺(tái)能夠滿足使用者了解和處理商品、訂單和用戶信息的需求，方便使用者隨時(shí)監(jiān)控和處理一些數(shù)據(jù)。通過對(duì)相關(guān)產(chǎn)品的調(diào)研了解到電商管理平臺(tái)最需要的就是能夠查看和處理商品、訂單和用戶這三類最為重要的數(shù)據(jù)，這也是電商管理最基本的需求。由此，進(jìn)而確定了本平臺(tái)的三個(gè)主要功能：用戶管理、商品管理以及訂單管理。

使用者能夠在該平臺(tái)中查看用戶、商品和訂單的相關(guān)信息，且用戶管理為使用者提供對(duì)用戶信息添加、修改、刪除、查詢及權(quán)限控制的服務(wù)，商品管理能夠幫助使用者查看各個(gè)商品的信息，提供商品添加和刪除功能，訂單管理可以實(shí)時(shí)觀測(cè)訂單付款和發(fā)貨狀態(tài)，提供訂單查詢和刪除功能。平臺(tái)整合了vue和Element-UI作為系統(tǒng)架構(gòu)基礎(chǔ)，client-Server作為主要架構(gòu)模式即以請(qǐng)求-響應(yīng)方式工作，客戶端發(fā)送請(qǐng)求信息，服務(wù)端接收請(qǐng)求做出相應(yīng)處理，前端將數(shù)據(jù)展示給用戶，借由此系統(tǒng)架構(gòu)面向使用者。

3 ?模塊設(shè)計(jì)

系統(tǒng)模塊主要分為四部分：登錄登出、用戶管理、商品管理及訂單管理。該平臺(tái)主要設(shè)計(jì)為向有權(quán)限進(jìn)行數(shù)據(jù)管理的人員使用，相關(guān)注冊(cè)需求需要在后端進(jìn)行權(quán)限給予，因此暫不設(shè)計(jì)注冊(cè)功能，只設(shè)計(jì)登錄及退出功能。在首次打開該平臺(tái)時(shí)，會(huì)將頁(yè)面定向到登錄頁(yè)面，使用者需要輸入賬號(hào)密碼后在向后臺(tái)請(qǐng)求權(quán)限通過后方可進(jìn)入主頁(yè)進(jìn)行數(shù)據(jù)的查詢和處理。系統(tǒng)模塊設(shè)計(jì)如圖1所示。

4 ?設(shè)計(jì)實(shí)現(xiàn)

使用vue-cli腳手架搭建該項(xiàng)目的整體框架，后續(xù)安裝好項(xiàng)目所需要的依賴和插件，以及將項(xiàng)目設(shè)計(jì)的相關(guān)模塊頁(yè)面放入src文件夾中的component文件夾下。在頁(yè)面設(shè)計(jì)中主要運(yùn)用Element-UI組件庫(kù)的相關(guān)組件渲染到頁(yè)面中構(gòu)成頁(yè)面元素，在功能實(shí)現(xiàn)中主要運(yùn)用vue.js的插值語(yǔ)法”{{ }}”將數(shù)據(jù)綁定到頁(yè)面的元素中。平臺(tái)主界面如圖2所示。

4.1 ?登錄模塊

在進(jìn)入平臺(tái)登錄頁(yè)面時(shí)使用者需要輸入賬號(hào)和密碼，點(diǎn)擊登錄后會(huì)向后端發(fā)起post請(qǐng)求，賬號(hào)和密碼參數(shù)分別對(duì)應(yīng)數(shù)據(jù)庫(kù)中表login的username及password。此外還設(shè)置了重置按鈕用來重置輸入框內(nèi)容。

使用者在賬號(hào)和密碼框輸入賬號(hào)密碼并點(diǎn)擊登錄按鈕后首先會(huì)進(jìn)行表單驗(yàn)證，若輸入格式無(wú)誤則將賬號(hào)密碼作為參數(shù)向后端發(fā)起post請(qǐng)求。需要注意的是在與后端進(jìn)行數(shù)據(jù)的交互時(shí)會(huì)用到Axios模塊，此時(shí)Axios會(huì)接收前端返回的數(shù)據(jù)來與后臺(tái)數(shù)據(jù)進(jìn)行匹配，在這過程中會(huì)觸發(fā)Axios請(qǐng)求攔截：

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

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

return request;

}）

Vue.prototype.$http = axios

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

4.2 ?用戶管理模塊

在用戶管理模塊中包含著用戶列表頁(yè)面，打開用戶列表頁(yè)面時(shí)會(huì)向后端發(fā)起get請(qǐng)求獲取數(shù)據(jù)庫(kù)中用戶列表users數(shù)據(jù)，獲取成功后在頁(yè)面中能夠直觀地看到用戶的姓名、電話、郵箱及當(dāng)前用戶的狀態(tài)。

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

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（‘修改狀態(tài)失敗’）;

};

this.$message.success（‘修改狀態(tài)成功’）;

}

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

查詢用戶功能，在頁(yè)面的搜索輸入框中輸入用戶名或者用戶名包含的字符等，就會(huì)顯示與搜索內(nèi)容匹配的用戶，實(shí)現(xiàn)查詢操作。

添加用戶功能，為頁(yè)面設(shè)置添加用戶操作，添加用戶的信息輸入部分選擇Element-UI組件庫(kù)中的<el-form>表單組件，并使用vue中的v-model實(shí)現(xiàn)表單數(shù)據(jù)的雙向綁定。在使用者輸入用戶名、密碼、電話以及郵箱后點(diǎn)擊確定后會(huì)向后端發(fā)起post請(qǐng)求，成功即可完成添加用戶操作，刷新頁(yè)面會(huì)看到添加的用戶信息。

修改用戶功能，為頁(yè)面設(shè)置修改用戶信息操作，同樣選擇<el-form>表單組件。在選擇修改用戶時(shí)會(huì)在信息輸入框中顯示用戶的原信息，幫助使用者直觀的看到用戶的原個(gè)人信息方便修改。在點(diǎn)擊確定后向后端發(fā)起put請(qǐng)求修改數(shù)據(jù)，請(qǐng)求成功后后端返回?cái)?shù)據(jù)即可完成用戶信息的修改。

刪除用戶功能，在刪除用戶操作中會(huì)首先詢問使用者是否確定修改，得到確定后發(fā)起delete請(qǐng)求執(zhí)行刪除功能。

4.3 ?商品管理模塊

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

打開商品列表頁(yè)面時(shí)向會(huì)后端發(fā)起get請(qǐng)求獲取數(shù)據(jù)庫(kù)中表goods的商品數(shù)據(jù)，分頁(yè)顯示于頁(yè)面中，返回的數(shù)據(jù)包含商品名稱、價(jià)格、重量以及商品創(chuàng)建時(shí)間。使用者可在搜索框中輸入商品信息來實(shí)現(xiàn)商品的查詢。

設(shè)置商品刪除功能，依舊采用delete請(qǐng)求執(zhí)行刪除操作，在與后端數(shù)據(jù)匹配成功后刪除數(shù)據(jù)庫(kù)與該商品有關(guān)的信息，并自動(dòng)更新前端頁(yè)面。

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

add（）{

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

if （！valid） {

return this.$message.error（‘請(qǐng)?zhí)顚懕匾倪x項(xiàng)！’） }

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’）

}）}}

以上代碼執(zhí)行添加商品的業(yè)務(wù)邏輯：處理添加的商品參數(shù)（型號(hào)等）、處理屬性（規(guī)格等）及發(fā)起請(qǐng)求。

4.4 ?訂單管理模塊

在訂單管理子頁(yè)面中使用者可以查詢和刪除訂單，訂單的基本信息包括訂單編號(hào)、付款狀態(tài)、發(fā)貨狀態(tài)以及下單時(shí)間。由于后端數(shù)據(jù)庫(kù)返回的下單時(shí)間并不是標(biāo)準(zhǔn)時(shí)間格式，返回的是需要?jiǎng)?chuàng)建的時(shí)間和GMT時(shí)間1970年1月1日之間相差的毫秒數(shù)，因此需要在main.js入口文件中使用vue.filter（）全局時(shí)間過濾器：

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}-$j5i0abt0b ${hh}：${mm}：${ss}`

}）

以上代碼將數(shù)據(jù)庫(kù)返回的毫秒數(shù)數(shù)字格式的數(shù)據(jù)轉(zhuǎn)化為標(biāo)準(zhǔn)的時(shí)間格式數(shù)據(jù)返回頁(yè)面。

在頁(yè)面中添加訂單刪除功能，采用發(fā)送delete請(qǐng)求執(zhí)行刪除操作，后端返回200的狀態(tài)碼后自動(dòng)更新頁(yè)面，即可實(shí)現(xiàn)刪除訂單操作。

5 ?結(jié) ?論

本文設(shè)計(jì)的電商管理平臺(tái)實(shí)現(xiàn)了電商管理的前端功能設(shè)計(jì)，使用vue.js的框架開發(fā)，極大地減少了開發(fā)的代碼量，且應(yīng)用了Element-UI組件庫(kù)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)降低了開發(fā)成本提高開發(fā)效率。經(jīng)過測(cè)試本平臺(tái)能夠滿足相關(guān)電商管理的基本需求，基本實(shí)現(xiàn)了對(duì)用戶、商品及訂單數(shù)據(jù)的增刪改查。 后續(xù)可以擴(kuò)展對(duì)訂單的批量退款退貨等業(yè)務(wù)，降低電商企業(yè)的運(yùn)營(yíng)成本。

參考文獻(xiàn)：

[1] 駱海東，馬衛(wèi)清，梁丹.面向零售電商的倉(cāng)庫(kù)管理系統(tǒng)設(shè)計(jì) [J].現(xiàn)代信息科技，2021，5（2）：27-31.

[2] 徐燕萍.基于B/S的企業(yè)銷售管理系統(tǒng)設(shè)計(jì) [J].軟件，2016，37（5）：84-88.

[3] 陳宇.基于Spring Boot的電商管理系統(tǒng)的設(shè)計(jì) [J].現(xiàn)代信息科技，2020，4（1）：25-26.

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

[5] 劉朔言，吳涵，楊一夫，等.基于Vue構(gòu)建現(xiàn)代化博物館可視化應(yīng)用 [J].電腦知識(shí)與技術(shù)，2021，17（14）：188-190.

作者簡(jiǎn)介：王思辰（1999—），男，漢族，重慶人，本科在讀，研究方向：Web前端開發(fā)技術(shù)。