摘 要
随着数字化时代的到来，人们对软件市场的需求不断加大，可视化管理系统代替人工管理的趋势持续上升，尤其电子商城类项目，针对后台管理的多样化需求尤为迫切。所以，为满足市场与日俱增的需求，开发电子商城后台管理系统，为方便商城后台管理简单化，便捷化。
该设计前端基于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.3 流程分析图
此系统的流程分析流程分析图用例图如图2.2所示：
2.4 系统介绍分析
- 打开页面网址，首先进入的是登录界面，（输入超级管理员账号：hanhan123456；密码：999888777）登录超级管理员页面。
- 输入的账号密码。
- 若不符合判断规则，页面输入框下方给出响应提示，
- 若输入账号密码与数据库已存账号密码一致，点击“登录”跳转到主页面。
- 若输入账号密码与数据库已存账号密码不一致，则再次返回到登录页面。
- 主页面主要分为三部分：头部栏、左侧导航栏、右侧主页面区。
- 头部包括电子商城后台管理系统logo、名称与退出按钮。
- 左侧导航栏包括四部分：”用户管理”、”限权管理”、”商品管理”、 “订单管理”。
- 右侧主页面区用来显示具体内容。
- 由鼠标在页面单击进行操作，操作简易快捷。
- 退出登录后，系统回到登录界面，自动保存用户名密码。
3 需求分析
3.1 主要需求
- 电子商城后台管理系统的开发主要以功能性为主
- 界面设计以简洁为主，友好且美观。
- 数据库存储性良好，安全可靠。
- 商品或用户信息分类清晰、准确。
- 支持模糊查询，确保数据查询的灵活性。
- 支持分页功能，方便工作人员浏览。
- 提供限权设置功能，灵活分配不同人员限权范围，减少由操作不当导致的缺陷发生。
- 实现对订单的数据信息实时跟踪。
- 具有易维护性和易操作性。
- 提供各级菜单栏。
3.2 项目的功能模块需求分析
（1）用户设置模块：添加删除用户，编辑查看所有用户预留信息，提供搜索框支持精准查询及模糊查询功能，可分页支持跳转分页，有阿拉伯数字排序。
（2）管理员设置模块：超级管理员可添加删除管理员，查看所有管理员信息，可修改管理员权限，禁用或开启管理员权限，提供搜索框支持精准查询及模糊查询功能，可分页支持跳转分页，有阿拉伯数字排序。
（3）商品分类模块：显示所有商品，超级管理员可添加删除商品，查看所有商品信息（单价重量录入信息等），提供搜索框支持精准查询及模糊查询功能，每十条商品信息一分页，支持跳转分页，有阿拉伯数字排序。
（4）商品参数分类模块：静态属性由数据库自动导入，录入时添加。动态属性由商城后台管理系统工作人员手动添加，随时修改参数，可动态记录该商品信息。
（5）商品分类模块：由“大家电”、“热门推荐”、“海外购”、“苏宁房产”、“手机相机”五个一级菜单栏组成，一级菜单栏下分别有二级或三级菜单栏，涵盖所有商品分类。同时也可以编辑查看所有商品信息，添加新的商品信息到不同分类中，有阿拉伯数字排序。
（6）订单管理模块：显示订单编号、订单价格、是否付款、是否发货、下单时间信息，可进行编辑或删除操作。每十条商品信息一分页，支持跳转分页，有阿拉伯数字排序。
4 数据库分析
4.1 实体属性图设计
根据系统模块划分出以下实体属性图：
- 用户列表用户列表实体属性图如图4.1所示：
|
|
图4.1 用户列表实体属性图
- 用户列表角色列表实体属性图如图4.2所示：
|
|
图4.2 角色列表实体属性图
- 用户列表权限列表实体属性图如图4.3所示：
|
|
图4.3 权限列表实体属性图
- 用户列表商品名称实体属性图如图4.4所示：
|
|
图4.4 商品名称实体属性图
- 用户列表商品分类实体属性图如图4.5所示：
|
|
图4.5 商品分类实体属性图
- 订单列表，订单管理实体属性图如图4.6所示：
|
|
图4.6 订单管理实体属性图
4.2 数据库选择
（1）MySQL是免费的开源软件，任何人都可以从MySQL网站正式下载数据库。
（2）MySQL数据库现在可以称为最快的SQL语言数据库。
（3）与其他数据库相比，MySQL的安装相对简单易行。
4.3 数据表的设计
在整个系统开发的同时，主要充分运用了MySQL数据库系统，而数据库所要实现的主要功能是存储数据。系统中涉及的各个数据表如下所示：
- 用户模块表用户模块表如表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：表示禁用 |
| 名称 | 类型 | 是否为空 | 默认值 | 属性 | 备注 |
| 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 | 手机 |
