王思辰 李林

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

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

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

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

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

1.1 ?vue.js

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

1.2 ?Element-UI

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

2 ?需求分析

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

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

3 ?模塊設(shè)計

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

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

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

4.1 ?登錄模塊

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

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

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

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

return request;

}）

Vue.prototype.$http = axios

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

4.2 ?用戶管理模塊

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

姓名、郵箱及電話的數(shù)據(jù)為了防止傳遞的數(shù)據(jù)值被直接修改，在數(shù)據(jù)的渲染時采用 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)的父級template標(biāo)簽中寫入v-slot：defalut=‘scope’，在開關(guān)中使用v-model=“scope.row.mg_state”進(jìn)行數(shù)據(jù)綁定，而后為開關(guān)添加狀態(tài)改變時的回調(diào)函數(shù)changeState（），將scope.row作為參數(shù)傳入，該回調(diào)函數(shù)利用async/await方法通過this.$http向后端發(fā)起put請求來同步修改用戶狀態(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對象），并作進(jìn)一步處理。

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

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

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

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

4.3 ?商品管理模塊

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

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

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

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

add（）{

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

if （！valid） {

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

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ù)（型號等）、處理屬性（規(guī)格等）及發(fā)起請求。

4.4 ?訂單管理模塊

在訂單管理子頁面中使用者可以查詢和刪除訂單，訂單的基本信息包括訂單編號、付款狀態(tài)、發(fā)貨狀態(tài)以及下單時間。由于后端數(shù)據(jù)庫返回的下單時間并不是標(biāo)準(zhǔn)時間格式，返回的是需要創(chuàng)建的時間和GMT時間1970年1月1日之間相差的毫秒數(shù)，因此需要在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}-$syggg00 ${hh}：${mm}：${ss}`

}）

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

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

5 ?結(jié) ?論

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

參考文獻(xiàn)：

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

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

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

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

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

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