摘    要

随着数字化时代的到来，人们对软件市场的需求不断加大，可视化管理系统代替人工管理的趋势持续上升，尤其电子商城类项目，针对后台管理的多样化需求尤为迫切。所以，为满足市场与日俱增的需求，开发电子商城后台管理系统，为方便商城后台管理简单化，便捷化。

该设计前端基于Vue2.0技术，采用ElementUI开源组件库组件、Html、css及js前端语言完成。后台使用Java接收发送请求，数据库使用小型Mysql数据库。

电子商城后台管理系统可针对商场内用户及用户数据统一管理，全部用户信息录入，对管理员赋权或禁用，更好的保障了用户信息的完整性和管理效率。针对商城内商品，采取分类管理方式，全部商品信息录入，跟进物流、付款状态。针对商城订单实现可视化列表操作，方便工作人员及时有效处理。为实现电子商城后台管理展示可视化页面，方便管理人员操作。

该设计从需求分析、设计开发、到软件测试均已通过，且均已达到预期标准。符合毕业设计的各项要求。

关键词：电子商城后台管理系统；Vue；MySQL

Background management system of e-mall based on Vue

Abstract

With the advent of the digital era, people's demand for software market continues to increase, and the trend of visual management system replacing manual management continues to rise, especially for e-mall projects, the diversified demand for background management is particularly urgent.Therefore, in order to meet the growing demand of the market, the development of e-mall background management system, to facilitate the mall background management simple, convenient.

The front-end of the design is based on vue2.0 technology, using elementui open source component library components, HTML, CSS and JS front-end language. The background uses Java to receive and send requests, and the database uses a small MySQL database.

The background management system of e-mall can manage the users and user data in the mall, input all user information, empower or disable the administrator, and better guarantee the integrity of user information and management efficiency.For the commodities in the mall, the classification management method is adopted, all the commodity information is entered, and the logistics and payment status are followed up. The visualization list operation is realized for the shopping mall order, which is convenient for the staff to handle in time and effectively. In order to realize the visual page of the backstage management of the electronic mall, it is convenient for the management personnel to operate.

The design from requirements analysis, design and development, to software testing have passed, and have reached the expected standard. Meet the requirements of graduation project.

Key Words：Background management system；Vue；MySQL

目    录

摘    要

Abstract

引    言

1  绪论

1.1  项目背景

2  系统实现

2.1  系统开发运行环境

2.2  系统分析用例图

2.3  流程分析图

2.4  系统介绍分析

3  需求分析

3.1  主要需求

3.2  项目的功能模块需求分析

4  数据库分析

4.1  实体属性图设计

4.2  数据库选择

4.3  数据表的设计

4.4  E-R图设计

5  软件测试

5.1  软件测试发展史

5.2  测试用例

5.3  测试方法

5.3  测试结果

5.4  测试心得总结

总    结

参 考 文 献

致    谢

引    言

随着时代发展，社会进步，信息技术已广泛适用于各行各业之中，数字化、可视化等专业名词也被广泛流传开来。基于Vue的电子商城后台管理系统能够对商品信息进行管理，给工作人员带来方便快捷的工作体验；模糊搜索、快速查找、商品分类清晰、操作简单。并且产品自身成本低且寿命长，安全可靠性很高。互联网普及时代能够合理利用资源来显著提高工作效率，也是电子商城后台管理规范化的重要标志。针对方便人们生活起居的电子商城，电子商城的后台管理是否便捷，操作是否方便，覆盖功能点是否全面是本论文研究的主要目的。

首先要确定产品定位，由于成本控制相对较低，在设计开发过程中应优先选取开源框架组件、小型数据库、低人工成本。其次应在开发前对产品需求作出全方面剖析，深层次理解用户对本系统的需求，给出细致完整的需求分析。开发环节要注意代码的可维护性，尽量灵活编写方便后期更改维护。测试用例与代码编写同时进行，测试用例应针对电子商城后台管理系统真实开发情况编写，扩散广度思维。

本系统的主要设计主要从以下几个方面做起：产品需求分析、业务流程分析、系统数据库的数据结构设计、系统的各项功能开发设计。这些工作的前期准备与实际的应用开发都需要相应的基础知识，能够更加有效的检验大学学习成果。

1  绪论

1.1  项目背景

电子商城的后台管理系统开发主要目的是利用数据库软件编写制造一个完整的管理软件，来实现迎合电子商城后台管理系统的市场需求，

用来实现用户信息管理、商品信息管理及订单处理工作等工作。对需求分析和开发设计实现过程、软件测试过程给出完整呈现。电子商城后台管理系统是基于Java、Web与数据库技术开发实现。

本系统的主要设计主要从以下几个方面做起：产品需求分析、业务流程分析、系统数据库的数据结构设计、系统的各项功能开发设计。这些工作的前期准备与实际的应用开发都需要相应的基础知识，能够更加有效的检验大学学习成果。巩固学习过的内容，也会在开发实践过程中对软件工程有新颖或深刻的不同理解。身处信息时代，人类需要合理有效的利用网络带来的馈赠，利用科技代替部分人工，

对不同领域产生的大量数据进行管理、加工和处理。作为计算机的三大主要应用（科学计算、过程控制和数据处理）之一的数据处理，现已上升为计算机应用的主要力量，现代信息管理系统几乎都以数据库技术作为核心。现在的电子商城后台管理多为手工处理，任务种类繁多，任务量大，人工需求多且内容容易出错。本系统的研究目的是用最小成本代价在尽可能短的时间内确定可行性问题是否能够解决，并给予解决方案与解决后成品样例。

前端部分选择的是Vue，利用其广泛的开源组件，大大节省了开发时间，也保证了界面的美观性与协调性。组件方面选择了目前最火的ElementUI组件，该组件的优势是内容齐全，组件样式繁多，覆盖面广，使用性强，非常适合毕业设计中前端部分代码的使用。

Vue是页面应用程序，是页面布局的更新，不需要每次页面的要求，要求所有数据和DOM，这样大大加快访问速度，提升用户体验。而且因为他三方的ui库很多，所以可以节约开发时间。

后端部分采取的是目前市场上使用最广泛的Java语言，Java的与发表较简单，并且学校也进行过系统的Java课程培训指导。不仅如此，Java在行业内部具有很强的竞争力，适用面很广泛。

2  系统实现  

2.1  系统开发运行环境

系统开发语言：Java、HTML、CSS 、JavaScript

前端框架：Vue2.0

运行平台：Windows10

数据库：MySQL

2.2  系统分析用例图

此系统的系统分析系统分析图用例图如图2.1所示：

图2.1  系统分析用例图

2.3  流程分析图

此系统的流程分析流程分析图用例图如图2.2所示：

图2.2流程分析图

2.4  系统介绍分析

1. 打开页面网址，首先进入的是登录界面，（输入超级管理员账号：hanhan123456；密码：999888777）登录超级管理员页面。
2. 输入的账号密码。
3. 若不符合判断规则，页面输入框下方给出响应提示，
4. 若输入账号密码与数据库已存账号密码一致，点击“登录”跳转到主页面。
5. 若输入账号密码与数据库已存账号密码不一致，则再次返回到登录页面。
6. 主页面主要分为三部分：头部栏、左侧导航栏、右侧主页面区。
7. 头部包括电子商城后台管理系统logo、名称与退出按钮。
8. 左侧导航栏包括四部分：”用户管理”、”限权管理”、”商品管理”、      “订单管理”。
9. 右侧主页面区用来显示具体内容。
10. 由鼠标在页面单击进行操作，操作简易快捷。
11. 退出登录后，系统回到登录界面，自动保存用户名密码。

3  需求分析

3.1  主要需求

1. 电子商城后台管理系统的开发主要以功能性为主
2. 界面设计以简洁为主，友好且美观。
3. 数据库存储性良好，安全可靠。
4. 商品或用户信息分类清晰、准确。
5. 支持模糊查询，确保数据查询的灵活性。
6. 支持分页功能，方便工作人员浏览。
7. 提供限权设置功能，灵活分配不同人员限权范围，减少由操作不当导致的缺陷发生。
8. 实现对订单的数据信息实时跟踪。
9. 具有易维护性和易操作性。
10. 提供各级菜单栏。

3.2  项目的功能模块需求分析

（1）用户设置模块：添加删除用户，编辑查看所有用户预留信息，提供搜索框支持精准查询及模糊查询功能，可分页支持跳转分页，有阿拉伯数字排序。

（2）管理员设置模块：超级管理员可添加删除管理员，查看所有管理员信息，可修改管理员权限，禁用或开启管理员权限，提供搜索框支持精准查询及模糊查询功能，可分页支持跳转分页，有阿拉伯数字排序。

（3）商品分类模块：显示所有商品，超级管理员可添加删除商品，查看所有商品信息（单价重量录入信息等），提供搜索框支持精准查询及模糊查询功能，每十条商品信息一分页，支持跳转分页，有阿拉伯数字排序。

（4）商品参数分类模块：静态属性由数据库自动导入，录入时添加。动态属性由商城后台管理系统工作人员手动添加，随时修改参数，可动态记录该商品信息。

（5）商品分类模块：由“大家电”、“热门推荐”、“海外购”、“苏宁房产”、“手机相机”五个一级菜单栏组成，一级菜单栏下分别有二级或三级菜单栏，涵盖所有商品分类。同时也可以编辑查看所有商品信息，添加新的商品信息到不同分类中，有阿拉伯数字排序。

（6）订单管理模块：显示订单编号、订单价格、是否付款、是否发货、下单时间信息，可进行编辑或删除操作。每十条商品信息一分页，支持跳转分页，有阿拉伯数字排序。

4  数据库分析

4.1  实体属性图设计

根据系统模块划分出以下实体属性图：

1. 用户列表用户列表实体属性图如图4.1所示：

图4.1 用户列表实体属性图

1. 用户列表角色列表实体属性图如图4.2所示：

图4.2 角色列表实体属性图

1. 用户列表权限列表实体属性图如图4.3所示：

图4.3 权限列表实体属性图

1. 用户列表商品名称实体属性图如图4.4所示：

图4.4 商品名称实体属性图

1. 用户列表商品分类实体属性图如图4.5所示：

图4.5 商品分类实体属性图

1. 订单列表，订单管理实体属性图如图4.6所示：

图4.6 订单管理实体属性图

4.2  数据库选择

选择MySQL数据库的理由是：

（1）MySQL是免费的开源软件，任何人都可以从MySQL网站正式下载数据库。

（2）MySQL数据库现在可以称为最快的SQL语言数据库。

（3）与其他数据库相比，MySQL的安装相对简单易行。

4.3  数据表的设计

在整个系统开发的同时，主要充分运用了MySQL数据库系统，而数据库所要实现的主要功能是存储数据。系统中涉及的各个数据表如下所示：

1. 用户模块表用户模块表如表4.1所示：

表4.1  用户模块表

名称	类型	是否为空	默认值	属性	备注
mg_id	Int(11)	否	NULL	Unique	主键id
mg_name	varchar(32)	否	NULL		名称
mg_pwd	Char(64)	否	NULL		密码
mg_time	Int(10)	否	NULL		注册时间
mg_mobile	Varchar(32)	是	NULL
mg_email	Varchar(64)	是	NULL
mg_state	Tinyint(2)	是	1		1：表示启用   0：表示禁用

（2）权限模块表权限模块表如表4.2 所示：

表4.2   权限模块表

名称	类型	是否为空	默认值	属性	备注
ps_id	smallInt(11)	否	NULL	Unique	主键id
ps_name	varchar(20)	否	NULL		权限名称
ps_pid	smallInt(11)	否	NULL		父id
ps_c	Vachar(32)	否	NULL		控制器
ps_a	Vachar(32)	否	NULL		操作方法

（3）商品模块表如表4.3商品模块表所示：

表4.3  商品模块表

名称	类型	是否为空	默认值	备注
goods_name	varchar(20)	否	NULL	商品名称
goods_price	smallInt(11)	否	NULL	商品价格
goods_number	Vachar(32)	否	NULL	商品数量
goods_weight	Vachar(32)	否	NULL	商品重量
cat_id	Enum(0,2,1)	否	NULL	类型id
goods_introduce	Vachar(32)	否	NULL	商品详情介绍
is_del	Int(11)	否	NULL	0：正常 1：删除
add_time	Int(11)	否	NULL	添加商品时间
upd_time	Int(11)	否	NULL	修改商品时间
cat_one_id	smallInt(11)	是	NULL	一级分类id
cat_two_id	smallInt(11)	是	NULL	二级分类id
hot_mumber	Int(11)	是	NULL	热卖数量

（4）订单模块表如表4.4订单模块表所示：

表4.4  订单模块表

名称	类型	是否为空	默认值	属性	备注
order_id	Int(11)	否	自动增长	Uunique	主键id
user_id	varchar(20)	否		NULL	下订单会员id

续表  4.4

名称	类型	是否为空	默认值	属性	备注
order_number	varchar(20)	否		NULL	订单编号
order_price	Int(11)	否		NULL	订单总金额
order_pay	Vachar(32)	否	1	NULL	支付方式：0：未支付；1：支付宝；2：微信
is_send	Enum(0,2,1)	否		NULL	订单是否已发货
pay_status	Enum（0,1）	否		NULL	订单状态0：未付款；1：已付款

（5）商品属性模块表如表4.5商品属性关联表所示：

表4.5  商品属性关联表

名称	类型	是否为空	默认值	属性	备注
id	Int(11)	否	NULL	Uunique	主键id
Goods_id	varchar(20)	否	NULL	NULL	下订单会员id
attr_id	varchar(20)	否	NULL	NULL	订单编号
attr_value	Int(11)	否	0.00	NULL	订单总金额
add_price	Vachar(32)	否	1	NULL	支付方式： 0：未支付； 1：支付宝；2：微信

（6）用户登录信息表如表4.6用户登录信息表所示：

表4.6  用户登录信息表

名称	类型	是否为空	默认值	属性	备注
user_id	Int(11)	否	NULL	Uunique	主键id
username	varchar(20)	否	NULL	NULL	账号
password	varchar(20)	否	NULL	NULL	密码
user_sex	Int(11)	否	NULL	NULL	性别
user_tel	Vachar(32)	否	NULL	NULL	手机

5  软件测试

5.1  软件测试发展史

软件测试方法不能完全标准化和统一的主要原因是它们有各种各样的软件产品用于软件测试，在软件测试中，也有许多常用的方法和手段，本文介绍的方法和手段可以用来测试更多的软件，在软件测试方法中，有六个软件测试概念是很重要的：白盒测试、测试方法和测试方法，黑盒检验、灰盒检验、有效和无效案例、限制条件和等价性检验。

5.2  测试用例

（1）左侧展示导航栏所有的整体分类，如：“用户管理”“限权管理”“商品管理”“订单管理”如图5.1所示：

图5.1  整体分类

（2）点击下拉箭头 显示二级菜单栏如图5.2所示：

图5.2  整体分类的二级菜单

（3）点击用户列表，显示用户列表主页面如图5.3所示：

图5.3  用户列表内容

①搜索框输入“admin”点击放大镜搜索。

预期结果：可搜索到姓名为admin的用户信息。

②搜索框输入“ad”点击放大镜搜索。

预期结果：可搜索到姓名包含ad的所有用户信息。

③核对姓名、邮箱、电话、角色、状态信息。

预期结果：与数据库中一致。

④点击操作列表中编辑按钮。

预计结果：弹出弹出框如图5.4所示：

图5.4  用户列表修改用户弹出框

⑤点击取消按钮。

预期结果：弹出框关闭，用户信息未修改与原来一致。

⑥修改用户信息 点击确定按钮。

预期结果：前端进行校验，校验为失败则给与相对提示，校验通过关闭弹出框并出现弹出页面显示更新成功，核对信息与修改完后信息一致。

⑦点击删除按钮。

预期结果：弹出弹出框与图5.5所示：

图5.5  删除用户信息确认框

⑧点击取消按钮。

预期结果：取消删除用户信息，弹出弹出框取消删除用户信息，列表与未点击前信息数量一致。

⑨点击确定按钮。

预期结果：确认删除用户信息，弹出弹出框成功删除用户信息，列表与为点击前数量信息减一。

⑩点击设置按钮。

预期结果：弹出弹出框如图5.6所示：

图5.6  设置按钮弹出框

⑪单击“取消”。

预期结果：未指定角色弹出窗口中未列出的角色与进行更改前的角色信息一致。

⑫单击“确定”。

预期结果：确认删除用户信息成功，删除用户信息列表后再点击不匹配数量信息并更改指定角色。

⑬点击确定按钮。

预期结果：确认删除用户信息，弹出弹出框成功删除用户信息，列表与为点击前数量信息不一致与修改分配角色一致。

（4）点击角色列表 显示内容如图5.7所示：

图5.7  角色列表信息框

①点击添加角色按钮。

预期结果：弹出弹出框如图5.8所示：

图5.8  角色列表信息框

②输入用户信息点击取消按钮。

预期结果：弹出窗口取消任务。

③输入用户信息，然后单击“确定”。

预期结果：确认添加用户信息弹出窗口，添加用户信息列表，添加新的用户信息。

④点击编辑信息按钮。

预期结果：弹出弹出框如图5.9所示：

图5.9  修改角色信息框

⑤点击取消按钮。

预期结果：弹出框关闭 用户信息未修改与原来一致。

⑥修改用户信息，点击确定按钮。

预期结果：前端进行校验，校验为通过给与相对提示，校验通过关闭弹出框并出现弹出页面显示更新成功，核对信息与修改完后信息一致。

⑦点击删除按钮。

预期结果：弹出弹出框如图5.10所示：

图5.10  删除用户信息确认框

⑧单击“取消”

预期结果：删除用户信息弹出窗口，取消删除用户信息列表，在单击前匹配信息编号。

⑨单击“确定”。

预期结果：确认删除用户信息弹出窗口，删除用户信息列表，并在单击之前减去其中一个定量信息。

⑩点击分配限权按钮。

预期结果：如图5.11所示：

图5.11  分配限权弹出框

⑪点击取消按钮。

预期结果：取消修改用户信息，弹出弹出框取消修改用户信息，列表与未点击前信息一致。

⑫点击确定按钮。

预期结果：确认修改用户信息，弹出弹出框成功修改用户信息，列表与修改时信息一致。

（5）点击限权列表 显示内容如图5.12所示：

图5.12  权限列表栏

（6）点击商品列表，显示内容格式如图5.13所示：

图5.13  商品分类栏

①搜索框输入“车载冰箱7.5L，冷暖两用汽车冰箱半导体12V迷你电冰箱升级款”点击放大镜搜索。

预期结果：可搜索到商品名称为车载冰箱7.5L 冷暖两用汽车冰箱半导体12V迷你电冰箱升级款的用户信息。

②搜索框输入“海外购自营”点击放大镜搜索。

预期结果：可搜索到商品名称包含“海外购自营”的所有用户信息。

③点击添加商品按钮。

预期结果：弹出弹出框如图5.14所示：

图5.14  添加商品栏

（7）点击分类参数 显示内容格式如下：

搜索框输入“”查询与数据库中一致，搜索框输入“”查询与数据库中一致。

（8）点击商品分类 显示内容格式如下：

显示所有商品信息，与数据库中一致。

点击修改按钮，弹出弹出框，可修改商品信息。

（9）订单列表：

①点击订单列表 显示内容如图5.15所示：

图5.15  订单列表栏

②点击编辑按钮，弹出弹出框如图5.16所示：

图5.16  修改地址栏

③点击编辑按钮。

预期结果：显示如图5.17所示：

图5.17  添加分类栏

④输入”99”点击搜索按钮。

预期结果：显示所有订单编号包含“99”的订单。

⑤查看订单编号、订单价格、是否付款、是否发货、下单时间信息。

预期结果：与数据库中内容一致。

（10）登录页面。

①输入网址进入登录界面。

预期结果：显示如图5.18所示：

图5.18  登录界面

②输入不符合规定用户名（3-8位字母数字）。

预期结果：用户名输入框下方弹出提示。

③输入正确用户名。

预期结果：用户名输入框下方提示消失。

④输入不符合规定密码（3-8位字母数字）。

预期结果：用户名输入框下方弹出提示。

⑤输入正确密码。

预期结果：用户名输入框下方提示消失。

⑥输入正确的账号密码，点击登录。

预期结果：成功跳转主页面 如图5.19所示：

       

图5.19  主界面

⑦点击退出。

预期结果：返回登录页面。

5.3  测试方法

功能测试：作为本次测试过程中最重要的测试方法，功能测试覆盖了整个系统的各个部分，测试作为公司研发过程中必不可缺的一份子，其重要性是首屈一指的。作为测试过程中主要的方法，功能测试被是测试工作人员必须要掌握的专业技能，从编写测试用例，到测试用例的执行，提出缺陷，描述缺陷，回归测试的进行。各项流程保障了产品的功能完整行。

5.3  测试结果

根据测试用例进行测试，本系统均已通过功能测试，缺陷均已修改完成。符合预期要求。

5.4  测试心得总结

首先，测试是确认软件是否正常运行。也就是说，在通常的情况下可以执行基本的功能。这需要与需求密切相关。如果软件不能满足最基本的需求，实际就是空壳。如果不知道什么是正确的，判断的根据是什么？这就需要需求文档和开发者提供对应的说明文档，根据需求文档和说明文档来判断缺陷是否是缺陷，再来让开发者进行修改。

换言之，只有在需要明确的时候，才会出现隐藏软件严重的错误和对开发者有用的错误。这些错误也能得到开发者的尊重和接受，反映我们测试的价值。

否则，如果不了解需求，可以指出接口中某些开发者不满意的边缘错误。他们认为测试不够。而且，我认为即使指出浪费时间，测试也没有意义。

文件因公司而异。正规公司有更详细的文件。如果你不知道这个需求，你也应该先去沟通。

测试的各部分也必须考虑优先级。这个软件的主要功能是什么？首先是是否完成功能，然后是一个界面，然后是一个界面美观程度，最后是帮助文件等。