孙世昌　刘嘉慧

摘要：前端工程化和前后端分离似乎已经是现在互联网行业中深入人心的想法，利用前后端分离的技术做后台管理系统可以让数据变得可视化，让管理人员可以轻松直观的将从后端接口传递过来的数据进行增删改查操作。同时网络技术发发展，让网上购物成为一种潮流，越来越多的企业和商家做起了电商平台，本文主要研究前后端分离的开发模式在web端的电商管理系统中的应用，重点分析Vue.js的MVVM开发模式在前端开发的作用。以及如何使用Element-ui使前端开发更加快速便捷。

关键词：Vue.js;Element-ui;JavaScript;快速开发;插件

中图分类号：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語言不断更新并且插件也在不断更新的时代，环境的老式，保守和滞后行为是电商平台系统网站的自杀行为。只有能够随时添加和删除后台系统的最新功能的电商管理系统才能跟踪趋势并继续增长。

在基于B/S的系统中，页面通过浏览器直接在web网页中渲染出来，可以让用户直接在浏览器网页中访问，也不需要安装和配置环境，方便且轻便[1]。

Vue.js的MVVM开发模式，避免了MVC开发模式做一些数据解析时会使Controller变得复杂而且臃肿，不利于后期的维护和修改的缺点，它可以通过多个独立并且具有复用性的单个小组件一起构建出界面多且功能复杂的应用[2]。

1开发原理和技术

1.1开发原理。Vue.js中数据主要是通过MVVM的形式进行实现数据双向绑定，数据驱动页面，数据劫持等功能的。

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

MVVM的全称是Model-View-ViewMode，和只能单向通信的MVC不同，MVVM采用的是双向的数据绑定方式，ViewModel是其中的中转站更是核心[4]。当用户更改页面中数据，即View发生变动，可以通过ViewModel反映到Model中，反之Model中的数据改变，也可以通过ViewModel让页面中的数据发生相应的改变，真正让Vue.js实现了数据的响应式。

Vue.js的数据双向绑定主要通过Object.defineProperty的get和set来实现的，通过遍历data中的数据将数据代理到this上并添加getter和setter方法，开发者开源用对数据进行编译，当data中数据改变时，就会调用setter方法，并采用发布订阅（watcher）的模式实现数据与视图同步的效果[5]。这种模式非常适合用于编写前端逻辑非常复杂的页面，尤其是当该页面需要大量的DOM操作的逻辑，利用MVVM就可以使前端页面的逻辑极大地简化[3]。

Vue框架中所有的页面都可以通过一个或者多个.vue文件来构建。.vue是一种自定义的文件类型，用类HTML语法描述一个Vue组件，每个.vue文件包含三种不同类型的顶级语言块，这三种语言块分别是用于声明模板元素的