4 系统实现
基于以上章节的介绍，本章节开始对系统进行实现。分别从以下九个模块进行详细的展示，包括对模块实现的介绍以及效果图。
4.1 登录模块的实现
通过ElementUI组件实现布局，在绘制页面期间会用到el-form(form表单)、el-from-item(form表单中的item项)、el-input(表单输入框)、el-button(按钮)以及字体图标，然后对表单进行数据绑定以及为表单添加验证规则来对数据进行校验。当点击登录按钮时不应当直接向后台发起网络数据请求，而是需要先对输入的表单数据进行一次预校验，只有通过预校验，才能向后台发起网络数据请求，不然系统会提示登录人员数据存在错误。登录页面效果如图4.1所示。
4.2 主页模块的实现
管理员登录成功之后，根据后台的响应状态在前端跳转到项目主页。首先主页布局分为上下两部分，其中下面又分为左右两部分，左侧是一个菜单，右侧为内容主题区。整个主页布局需要用到ElementUI的一些布局组件，分别有el-container(布局容器)、el-header(头部区域)、el-aside(侧边栏区域)和el-main(右侧主题区域)。主页面效果如图4.2所示。
4.3 用户管理模块的实现
该模块中点击用户列表，在右侧页面主题区域展示用户列表所对应的组件。该组件由两大部分组成，头部为面包屑导航区域，下面是一个卡片视图区域。卡片视图区域又分为三个部分，其中上面为搜索和添加管理员信息的区域，中间为用户列表区域，最底部为分页的页码条。实现方法首先创建用户列表链接对应组件页面，之后通过路由的形式在右侧主题区把用户列表组件展示出来。
4.3.1 面包屑导航和卡片视图区域模块
ElementUI中提供了Breadcrumb面包屑组件，使用之后在element.js头部中进行按需导入，在底部进行use()函数的调用。在卡片视图区域中对应的组件Card，并进行按需导入和函数调用，之后再进行样式的调整效果图便可完成。ElementUI中组件Input输入框和栅格系统Layout布局来把搜索区域和添加用户按钮进行布局。面包屑导航和卡片视图区效果图如图4.3所示。
4.3.2 表单数据校验模块
在点击添加按钮时，弹出添加按钮的对话框，把要添加的用户信息进行依次输入，其中用户名和密码进行字符长度的校验，邮箱和手机号使用正则表达式进行校验，只有表单中每一项信息都输入合理才能点击确定按钮进行添加。表单数据校验效果图如图4.4所示。
4.3.3 分配角色模块
在点击分配角色按钮时，弹出分配角色的对话框，把管理员的基本信息渲染到页面中，在展示对话框的同时把所有角色信息获取出，将获取到的所有角色列表渲染成一个下拉菜单用到ElementUI中的组件Select选择器，通过双向数据绑定到一个具体值，里面的所有选项通过for循环来生成。分配角色效果图如图4.5所示。
(1)角色为超级管理员：拥有本系统中所有模块的权限并且可对所有模块中拥有的功能进行操作。超级管理员身份登录效果图如图4.6所示。
(2)角色为普通管理员：拥有系统中的用户管理、商品管理和订单管理模块。其中在用户管理模块中，普通管理员只能在用户列表看到普通用户的数据信息，并且无法对用户进行角色分配。普通管理员身份登录效果图如图4.7所示。
(3)角色为普通用户：拥有系统中商品管理和订单管理模块。可对这两个模块功能进行相应操作，无法对其他身份人员数据信息进行查看和分配权限的功能。普通用户身份登录效果图如下图4.8所示。
4.3.4 底部分页模块
在ElementUI中提供了Pagination分页组件，首先要按需导入分页组件，然后定义size-change()和current-change()两个事件，在这两个事件中监听到最新的pageSize和页码值，只要pageSize和最新的页码值改变，就立即发起一次新的数据请求，最后又通过不同的属性配置了页码条。此功能的实现可根据管理员的需要，提供适当的数据。底部分页效果图如图4.9所示。
4.4 权限管理模块的实现
权限管理模块中的分配权限操作。该模块用到ElementUI中的组件Dialog对话框、Tree树形控件以及相关属性。当点击分配权限按钮时，立即把当前角色ID先保存到data中供后续使用，再点击确定按钮时，先获取到整个树形结构中半选和全选状态的ID值，然后把这些合并为一个完整的数组，紧接着把得到的数组做一次字符串拼接，用英文状态下的逗号拼接成一个字符串，再发起网络数据请求，把刚才保存的角色数据ID和新拼接成的ID字符串发送到服务器，当请求成功，则提示用户“分配权限成功”，并刷新角色列表同时关闭分配权限对话框。分配权限效果图如图4.10所示。
4.5 商品管理模块的实现
商品管理模块中的添加商品操作。为添加商品按钮绑定单击事件，在事件处理函数中通过路由导航的形式跳转到添加页面。绘制页面用到ElementUI中的组件有：Alert警告、Steps步骤条、Tap标签页和Form表单。添加商品效果图如图4.11所示。
4.6 商品分类模块的实现
商品分类模块中的删除操作。为防止管理员的误删操作，点击删除按钮时，用到ElementUI中弹出提示消息框的组件MessageBox弹框，然后根据ID删除对应分类信息，当点击确定按钮时，发起网络数据请求，来删除分类。删除分类的效果图如图4.12所示。
4.7 分类参数模块的实现
分类参数模块中的编辑操作。修改操作时，根据ID查询出对应的旧数据并且保存供表单中进行填充把参数名称加载出来，之后发起网络请求，提交本次修改。修改动态参数效果图如图4.13所示。
4.8 订单管理模块的实现
订单管理模块中的查询操作。当管理员在文本框中输入不同的订单编号时，系统可根据输入的订单编号进行订单的查询。实现方法是让文本框中输入的订单编号与data中存储的数据进行双向绑定，然后调用获取列表的函数再进行订单信息的查询。订单查询效果图如图4.14所示。
4.9 数据统计模块的实现
使用ECharts官方提供的组件来绘制数据报表。首先要导入安装的ECharts包，然后在页面上为ECharts准备一个具备大小的区域，需要将页面上的区域初始化为ECharts图形实例，其次就是准备数据和配置项，最后将数据展示到图表中。管理员可以使用鼠标跟随效果在数据报表中看到不同的时间用户来源于哪些地区。数据报表效果图如图4.15所示。
5 系统测试
本系统的功能根据之前的设计已全部实现，为避免使用人员在实际操作过程中出现不必要的各种问题，来保证系统正常使用，对本系统进行测试。软件测试就是通过多种测试手段验证软件开发是否达到开发预期结果，以保证系统的可靠性、易用性和完整性。
本系统采用黑盒测试。接下来本系统将要对选择的三个模块进行功能测试：
- 用户管理模块；
- 权限管理模块；
- 分类参数模块。
根据各个模块的功能按需测试，最终结果以表格形式呈现。
5.1 用户管理模块功能测试
用户管理模块中是对后台管理员信息的列表展示、对管理员信息的查询操作、添加管理员的信息并且对添加信息的校验、修改和删除管理员信息以及对管理员角色分配和底部分页显示的一系列测试。用户管理模块测试结果如表5.1所示。
5.2 权限管理模块功能测试
此模块包含角色列表和权限列表。权限列表只是对获取的数据进行展示，主要是对角色列表中查看、角色添加、编辑、删除和分配角色等一系列操作进行测试。针对这些功能测试是否符合事实，并且这些功能是否能够实现。权限管理模块测试结果如表5.2所示。
5.3 分类参数模块功能测试
商品参数用于显示商品固定的特征信息，此后台系统中参数分为动态参数和静态属性。本模块逻辑连接性很强，主要测试选中三级商品分类时页签和添加商品是否禁用。分类参数模块测试结果如表5.3所示。
6 总结与展望
6.1 总结
文章针对电子商务后台管理系统,设计了基于Vue+ElementUI的商品后台管理平台，将繁琐的人力劳动转换为高效的线上操作，有利于商品后台管理员对商品进行更方便、统一的管理，也有利于用户更及时、更全面地获取商品信息，提高用户对商品下单的积极性。本文完成的主要工作如下：
- 用户管理模块中实现对整个后台管理员基本信息的展示、状态的更改、添加管理员信息的自定义校验规则、对管理员角色的分配以及修改和删除的操作。
- 权限管理模块中首先在权限列表中对本系统涉及到的所有权限在列表中进行展示，以供管理员在工作中方便参考；在角色列表中首先对角色名称下拥有的三级权限可进行展示操作，并且可对权限进行清除操作、在角色列表中添加角色、编辑和删除角色、给对应的角色分配权限等一系列功能的实现。
- 商品管理模块商品分类列表中展示了三级商品分类，管理员还可以对列表中的三级分类进行展开查看，同时系统还允许添加新的分类、编辑和删除分类以及分页功能的实现。
- 分类参数模块中，可为选中的三级商品分类展示动态参数和静态属性，同时可为相应的参数以及属性做增、删和改的操作。
- 数据统计中数据报表模块是基于时间统计的折线图。统计用户在某一时间来源于哪些地区，并伴有鼠标跟随效果，方便查看用户来源。
6.2 展望
本后台管理系统基本功能已经完善，但仍有不足之处，需要针对以下方面进行进一步优化：
- 生成打包报告。根据生成的报告可以发现项目中的问题进行相应的解决。
- 数据库表的优化。本系统涉及到的表还是相对较多，后序会根据本系统的需要再对数据库中的表进行相应的合并和优化。
- 本系统缺少前端用户下单平台。后序将会根据本系统的后台管理开发一款移动配套项目，与本系统进行配套使用，形成业务闭环。
致 谢
穿越时光的隧道，值此在郑航的两年本科求学生涯即将结束，一想起即将要给单纯而又美好的学生时代和校园生活说再见的时候，便思绪万千。
今天亦是平凡的一天，也是限量版的一天。“It’s time to say goodbye”。再次祝愿一起度过美好大学时光的所有人，平安喜乐。
参考文献
[1]杨妍.基于Spring Boot与Vue的系统管理模块开发探究[J]. 电商技术, 2019,43(2): 32-34.
[2]陈倩怡,何军.Vue+Springboot+MyBatis技术应用解析[J]. 电脑编程与维护,2020(1): 14-15,28.
[3]练达,谢晓玲,刘萍萍.服务于农村经济的电商管理系统[J]. 自动化技术与应用, 2020(12):164-167．
[4]卢宏才,程建峰.基于“互联网+”的学生顶岗实习管理系统设计[J]. 电脑知识与技术, 2021(08):132-134.
[5]王禹程.基于Java语言的人力资源信息系统研究[J].电子设计工程,2019,27(02):25-28+33.
[6]金昌锦.大学生就业信息跟踪及管理系统设计与实现[J].电子技术与软件工程,2021(21):112-114.
[7]金忆琳,柯海丰.基于工程教育认证的课程评价管理系统设计与开发[J].计算机时代,2020(12):38-40+46.
[8]苏庭波,王双喜.基于SSM的校友管理系统的设计与实现[J].工业控制计算机,2018,31(10):131-132.
[9]熊淑华.网页设计中JSP和ASP技术的应用研究[J].网络安全技术与应用,2018(11):48+50.
[10]Ezzaddin Ahmed Othman Saeed. The Design and Implementation of Teaching Assistance Management System[D].华南理工大学 2019.
[11]Sonam Agrawal,Rajan Dev Gupta. Development and Comparison of Open Source based Web GIS Frameworks on WAMP and Apache Tomcat Web Servers[J].ISPRS-International Archives of the Photogramme.2014(1):92-96.
[12]Deqing Li,Honghui Mei,Yi Shen,Shuang Su,Wenli Zhang,Junting Wang,Ming Zu,Wei Chen. ECharts:A declarative framework for rapid construction of web-based visualization[J].Visual Informatics.2018(2):136-146.
[13]Di Giacomo M. MySQL:lessons learned on a digital library[J].IEEE Software.2005(3):10-13.
引用说明：
引用以上内容的用户，必须同意以下内容，否则请勿引用！
- 出于自愿而使用本文，了解引用本文的风险，且同意自己承担引用本文的风险。
- 利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关，作者对此不承担任何责任。
- 在任何情况下，对于因引用本文而导致的任何难以合理预估的损失（包括但不仅限于商业利润损失、业务中断与业务信息丢失），作者概不承担任何责任。
- 必须了解使用本文内容的风险，作者不对其提供二次维护服务，也不提供任何有关资料。
