基于Vue.js的电商管理平台的设计与实现
来源:用户上传
作者:王思辰 李林
摘 要：随着电子商务的迅猛发展，电商服务平台应运而生，此外，在企业逐步信息化的趋势下信息化已经悄无声息地走进每个企业内部，因此电商管理平台的研究与开发对于电商企业来说显得尤为重要。本电商管理平台主要使用vue.js的Web技术对其进行研究设计与实现，旨在更加高效、便捷地管理后台传入的数据，且能够帮助使用者更好地进行用户、商品以及订单管理。
关键词：vue.js;Element-UI;电商管理
中图分类号：TP311 文献标识码：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 引 言
互联网不断发展的时代为电子商务行业带来了极大的发展机遇，各类大型电商企业都建立了属于自己的生态链。在如今电商行业逐渐走向规模化的同时为电子商务企业实现了电子商务交易量的不断上涨，面对如今新消费环境下订单量不断增加的趋势，电商企业需要研究一套适应发展的管理平台以更好地迎接未来的业务挑战，而如何处理这些数据借此实F这些数据本身的价值成为电子商务企业需要研究的方向。设计电商管理平台的初衷就是为了帮助企业人员更好地处理用户、商品以及订单的数据，能够实现对这些数据的查询、增加、修改和删除。
1 相关技术介绍
1.1 vue.js
Vue是目前前端三大主流框架之一，是一种实现数据双向绑定的MVVM框架，通过使用vue能够增强开发人员现有的HTML，极大地提高开发效率及开发人员的经验。
1.2 Element-UI
Element-UI是一套由前端团队推出的基于vue.js2.0的桌面端UI框架，该组件库秉持一致、反馈、效率以及可控的设计原则帮助使用vue的前端开发人员更加快速的设计网页。
2 需求分析
目前市场上针对企业内部的电商管理平台功能比较单一，因此功能完善、操作简单且方便管理的电商管理平台将会得到企业的信赖。本电商管理平台能够满足使用者了解和处理商品、订单和用户信息的需求，方便使用者随时监控和处理一些数据。通过对相关产品的调研了解到电商管理平台最需要的就是能够查看和处理商品、订单和用户这三类最为重要的数据，这也是电商管理最基本的需求。由此，进而确定了本平台的三个主要功能：用户管理、商品管理以及订单管理。
使用者能够在该平台中查看用户、商品和订单的相关信息，且用户管理为使用者提供对用户信息添加、修改、删除、查询及权限控制的服务，商品管理能够帮助使用者查看各个商品的信息，提供商品添加和删除功能，订单管理可以实时观测订单付款和发货状态，提供订单查询和删除功能。平台整合了vue和Element-UI作为系统架构基础，client-Server作为主要架构模式即以请求-响应方式工作，客户端发送请求信息，服务端接收请求做出相应处理，前端将数据展示给用户，借由此系统架构面向使用者。
3 模块设计
系统模块主要分为四部分：登录登出、用户管理、商品管理及订单管理。该平台主要设计为向有权限进行数据管理的人员使用，相关注册需求需要在后端进行权限给予，因此暂不设计注册功能，只设计登录及退出功能。在首次打开该平台时，会将页面定向到登录页面，使用者需要输入账号密码后在向后台请求权限通过后方可进入主页进行数据的查询和处理。系统模块设计如图1所示。
4 设计实现
使用vue-cli脚手架搭建该项目的整体框架，后续安装好项目所需要的依赖和插件，以及将项目设计的相关模块页面放入src文件夹中的component文件夹下。在页面设计中主要运用Element-UI组件库的相关组件渲染到页面中构成页面元素，在功能实现中主要运用vue.js的插值语法”{{ }}”将数据绑定到页面的元素中。平台主界面如图2所示。
4.1 登录模块
在进入平台登录页面时使用者需要输入账号和密码，点击登录后会向后端发起post请求，账号和密码参数分别对应数据库中表login的username及password。此外还设置了重置按钮用来重置输入框内容。
转载注明来源:https://www.xzbu.com/1/view-15421695.htm
