基于web版的電商管理系統(tǒng)

孫世昌　劉嘉慧

摘要：前端工程化和前后端分離似乎已經(jīng)是現(xiàn)在互聯(lián)網(wǎng)行業(yè)中深入人心的想法，利用前后端分離的技術(shù)做后臺(tái)管理系統(tǒng)可以讓數(shù)據(jù)變得可視化，讓管理人員可以輕松直觀的將從后端接口傳遞過(guò)來(lái)的數(shù)據(jù)進(jìn)行增刪改查操作。同時(shí)網(wǎng)絡(luò)技術(shù)發(fā)發(fā)展，讓網(wǎng)上購(gòu)物成為一種潮流，越來(lái)越多的企業(yè)和商家做起了電商平臺(tái)，本文主要研究前后端分離的開(kāi)發(fā)模式在web端的電商管理系統(tǒng)中的應(yīng)用，重點(diǎn)分析Vue.js的MVVM開(kāi)發(fā)模式在前端開(kāi)發(fā)的作用。以及如何使用Element-ui使前端開(kāi)發(fā)更加快速便捷。

關(guān)鍵詞：Vue.js;Element-ui;JavaScript;快速開(kāi)發(fā);插件

中圖分類號(hào)：TP311.52;F713.36 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-9129（2020）06-0048-01

Abstract：Front-endengineeringandfront-endseparationseemstohavebeenapopularideaintheInternetindustry.Usingthetechnologyoffront-endseparationtodoback-endmanagementsystemcanmakethedatabecomevisual，andmanagerscaneasilyandintuitivelyadd，delete，modifyandcheckthedatatransferredfromtheback-endinterface.Atthesametime，withthedevelopmentofnetworktechnology，onlineshoppinghasbecomeatrend.Moreandmoreenterprisesandbusinesseshavestartedtobuilde-commerceplatform.Thispapermainlystudiestheapplicationofthedevelopmentmodeoffrontandbackendseparationinthee-commercemanagementsystemoftheWebend，andfocusesontheanalysisoftheroleofVVVMdevelopmentmodeofVue.jsinthefront-enddevelopment.AndhowtouseElement-UItomakefront-enddevelopmentfasterandeasier.

Keywords：vue.js;Element-UI;JavaScript;Rapiddevelopment;Theplug-in

引言：在HTML語(yǔ)言不斷更新并且插件也在不斷更新的時(shí)代，環(huán)境的老式，保守和滯后行為是電商平臺(tái)系統(tǒng)網(wǎng)站的自殺行為。只有能夠隨時(shí)添加和刪除后臺(tái)系統(tǒng)的最新功能的電商管理系統(tǒng)才能跟蹤趨勢(shì)并繼續(xù)增長(zhǎng)。

在基于B/S的系統(tǒng)中，頁(yè)面通過(guò)瀏覽器直接在web網(wǎng)頁(yè)中渲染出來(lái)，可以讓用戶直接在瀏覽器網(wǎng)頁(yè)中訪問(wèn)，也不需要安裝和配置環(huán)境，方便且輕便[1]。

Vue.js的MVVM開(kāi)發(fā)模式，避免了MVC開(kāi)發(fā)模式做一些數(shù)據(jù)解析時(shí)會(huì)使Controller變得復(fù)雜而且臃腫，不利于后期的維護(hù)和修改的缺點(diǎn)，它可以通過(guò)多個(gè)獨(dú)立并且具有復(fù)用性的單個(gè)小組件一起構(gòu)建出界面多且功能復(fù)雜的應(yīng)用[2]。

1開(kāi)發(fā)原理和技術(shù)

1.1開(kāi)發(fā)原理。Vue.js中數(shù)據(jù)主要是通過(guò)MVVM的形式進(jìn)行實(shí)現(xiàn)數(shù)據(jù)雙向綁定，數(shù)據(jù)驅(qū)動(dòng)頁(yè)面，數(shù)據(jù)劫持等功能的。

MVVM可以拆分成三部分：View——ViewModel——Mode1[3]

MVVM的全稱是Model-View-ViewMode，和只能單向通信的MVC不同，MVVM采用的是雙向的數(shù)據(jù)綁定方式，ViewModel是其中的中轉(zhuǎn)站更是核心[4]。當(dāng)用戶更改頁(yè)面中數(shù)據(jù)，即View發(fā)生變動(dòng)，可以通過(guò)ViewModel反映到Model中，反之Model中的數(shù)據(jù)改變，也可以通過(guò)ViewModel讓頁(yè)面中的數(shù)據(jù)發(fā)生相應(yīng)的改變，真正讓Vue.js實(shí)現(xiàn)了數(shù)據(jù)的響應(yīng)式。

Vue.js的數(shù)據(jù)雙向綁定主要通過(guò)Object.defineProperty的get和set來(lái)實(shí)現(xiàn)的，通過(guò)遍歷data中的數(shù)據(jù)將數(shù)據(jù)代理到this上并添加getter和setter方法，開(kāi)發(fā)者開(kāi)源用對(duì)數(shù)據(jù)進(jìn)行編譯，當(dāng)data中數(shù)據(jù)改變時(shí)，就會(huì)調(diào)用setter方法，并采用發(fā)布訂閱（watcher）的模式實(shí)現(xiàn)數(shù)據(jù)與視圖同步的效果[5]。這種模式非常適合用于編寫前端邏輯非常復(fù)雜的頁(yè)面，尤其是當(dāng)該頁(yè)面需要大量的DOM操作的邏輯，利用MVVM就可以使前端頁(yè)面的邏輯極大地簡(jiǎn)化[3]。

Vue框架中所有的頁(yè)面都可以通過(guò)一個(gè)或者多個(gè).vue文件來(lái)構(gòu)建。.vue是一種自定義的文件類型，用類HTML語(yǔ)法描述一個(gè)Vue組件，每個(gè).vue文件包含三種不同類型的頂級(jí)語(yǔ)言塊，這三種語(yǔ)言塊分別是用于聲明模板元素的