孫世昌　劉嘉慧

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

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

中圖分類號：TP311.52;F713.36 文獻標識碼：A 文章編號：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語言不斷更新并且插件也在不斷更新的時代，環(huán)境的老式，保守和滯后行為是電商平臺系統(tǒng)網(wǎng)站的自殺行為。只有能夠隨時添加和刪除后臺系統(tǒng)的最新功能的電商管理系統(tǒng)才能跟蹤趨勢并繼續(xù)增長。

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

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

1開發(fā)原理和技術

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

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

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

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

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