【毕业项目】基于VUE开发的电商后台管理系统

摘 要

随着我国互联网普及率的提高，电子商务发展插上了腾飞的翅膀，一路高歌猛进。本后台系统旨在借助先进的计算机、快捷的网络以及庞大的云数据存储来帮助电商更加方便的统计电商数据。
本系统以html、css、javascript作为开发语言。采用前后端分离思想，PC端使用Vue.js框架，服务端采用node.js作为开发平台，Webpack为静态模块打包器，Element-ui为UI组件，less为CSS预处理语言，ES6作为规范。PC端包含用户管理模块、权限管理模块、角色管理模块、商品管理模块、分类参数管理模块、订单管理模块、数据统计模块。服务器端通过node.js开发，搭建在本地服务器上，数据库录入本地服务器，通过预留的接口地址进行数据库数据的增删改查。

关键词：电商后台管理系统 Html Javascript Vue.js Element-ui Es6

ABSTRACT

With the improvement of the Internet penetration rate in China, the development of e-commerce has taken off, and has made great progress all the way. The background system aims to help e-commerce statistics more convenient with the help of advanced computers, fast network and huge cloud data storage.
The system uses HTML, CSS, JavaScript as the development language. The idea of separating the front end and the back end is adopted, and the PC side is used Vue.js The framework is adopted by the server node.js As a development platform, webpack is a static module packer, element UI is a UI component, less is a CSS preprocessing language, and ES6 is a specification. The PC includes user management module, authority management module, role management module, commodity management module, classification parameter management module, order management module and data statistics module. Server side through node.js Development, set up on the local server, the database input to the local server, through the reserved interface address to add, delete, modify and query the database data.

Keywords: e-commerce background management system; HTML; JavaScript; Vue.js Element-ui; Es6

第一章 前 言

随着我国互联网普及率的提高，电子商务发展插上了腾飞的翅膀，交易额年均增长28%，2010年我国电子商务市场交易额更是达到4.5万亿元。而且由于这几年网民的暴增与电子商务平台的增多，网购已经“飞入寻常百姓家”，这给运营多年或是后起之秀的网站给予希望。于是电商后台管理系统层出不穷，它就像人体的骨架，为用户前端（APP、PC、微信商城等）的展示和业务逻辑，提供支撑。不同的电商业务对电商后台架构要求各不相同。因此，一个好的电商后台管理系统是十分重要的，不论是对于公司，或者个人来说，都能给处于在这个互联网快速发展的人带来一种空前的便利。
但是后台系统普遍存在问题，比如库存数据不准确，导致超卖；财务结算复杂，很多线下流程；权限管理不严谨，存在安全隐患；售后问题容易跟丢；发货时效慢；运营操作繁琐，效率低等等。对此，我开发了一个全新的电商后台管理系统，很好的从根源解决这些问题。
本系统以html、css、javascript作为开发语言。采用前后端分离思想，PC端使用Vue.js框架，服务端采用node.js作为开发平台，Webpack为静态模块打包器，Element-ui为UI组件库，less为CSS预处理语言，Node.js通过babel体验ES6模块化，采用vue-rouer跳转，运用axios封装AJAX请求。PC端包含用户管理模块、权限管理模块、角色管理模块、商品管理模块、分类参数管理模块、订单管理模块、数据统计模块。服务器端通过node.js开发，搭建在本地服务器上，数据库录入本地服务器，通过预留的接口地址进行数据库数据的增删改查。

第二章 系统开发理论基础

2.1 开发语言简介

HTML（Hyper Text Markup Language）

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

CSS（Cascading Style Sheets）

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Javascript（简称“JS”）

JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

Less（CSS预处理语言）

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

ES6（ECMAScript 6）

ECMAScript6是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

2.2 框架简介

Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

第三章 系统设计

3.1 系统功能描述

本系统需要登录获取权限后才可以进行各功能操作，包括用户的一些权限分配以及商品的各种参数调整、数量等和商品的物流进度，同时拥有各数据的统计表，以更清晰的显示后台信息

3.2 软件架构分析

系统主要架构为C/S模式下的三层体系结构，分别为客户端、服务器端和数据库。客户端：基于node.js平台开发，使用vue.js框架以及Element-ui组件库。服务端：解析所有客户端发送来的请求。数据库：系统使用My SQL数据库，数据库接收服务器端SQL请求进行操作，实现数据的检索与存储。用户在客户端程序向服务器发送请求，服务器通过对客户端发起的请求进行处理并对数据库进行操作，再将操作结果返回到客户端。软件架构如图所示：

第四章 系统功能实现

4.1 功能结构

根据对用户需求的详细分析，如下图所示的客户端功能结构图。

4.2 功能模块

登录模块

• 登录：当文本框失去焦点后，会进行验证处理，提示用户格式输错获取文本框没有输入内容，并且在登录之前，会对用户输入的账号密码先进行预处理，如果不通过则登录失败
• 重置：会对账号及密码文本框清空
• 退出：退出当前用户并且清除token数据

用户管理

• 添加用户：弹出添加用户对话框，需要填写用户名、密码、邮箱、手机号来添加用户，并且跟登录一样，也会进行验证处理以及预处理
• 编辑用户：用户可以重新修改邮箱及手机号，同时含有验证处理以及预处理功能
• 删除用户：确认后将永久删除该用户
• 搜索用户：输入想查询用户的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能
• 分配角色：弹出要分配角色的用户的分配角色对话框，可在三级选择器选择想分配的新角色
• 更改用户状态：可更改用户是否可登录状态

权限管理

• 添加角色：弹出添加角色对话框，需要填写角色名称、角色描述来添加角色，同时含有验证处理以及预处理功能
• 编辑角色：用户可以重新修改角色名称、角色描述，同时含有验证处理以及预处理功能
• 删除角色：确认后将永久删除该角色
• 删除角色权限：确认后将永久删除该角色下拥有的权限
• 分配权限：可以给角色添加新权限或者消除已有权限

商品管理

• 添加商品：点击添加商品，将编程式跳转至添加商品页面需要完成商品基本信息、商品参数、商品属性、商品图片、商品内容的填写方可成功添加商品
• 编辑商品：用户可以重新修改商品名称、商品价格及数量，同时含有验证处理以及预处理功能
• 删除商品：确认后将永久删除该商品
• 搜索商品：输入想查询商品的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能
• 选择商品分类：可在三级选择器选择想查看的商品
• 添加参数：弹出添加参数对话框，需要填写动态参数来添加参数，同时含有验证处理以及预处理功能
• 编辑参数：用户可以重新修改动态参数，同时含有验证处理以及预处理功能
• 删除参数：确认后将永久删除该参数
• 添加属性：弹出添加属性对话框，需要填写静态属性来添加属性，同时含有验证处理以及预处理功能
• 编辑属性：用户可以重新修改静态属性，同时含有验证处理以及预处理功能
• 删除属性：确认后将永久删除该属性
• 添加分类：弹出添加分类对话框，需要填写分类名称以及通过三级选择器选泽父级分类来添加分类，同时含有验证处理以及预处理功能
• 编辑分类：用户可以重新修改分类名称
• 删除分类：确认后将永久删除该分类

订单管理

• 搜索订单：输入想查询订单的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能
• 编辑订单：可以重新修改订单的地址
• 查看物流：弹出信息对话框，查看物流的具体进度信息

数据统计

• 数据报表：通过折线图显示每一天的用户来源

第五章 系统数据库设计

5.1 MYSQL概述

MySQL是一款开源的关系数据库管理系统。在2009年的时候，甲骨文公司（Oracle）收购昇阳微系统公司，因此MySQL成为Oracle旗下产品。
MySQL由于其高性能、低成本、高可靠性的优点，已经成为了现在最流行的数据库。MySQL被广泛地应用在互联网上的各种中小型网站中。随着MySQL的不断成熟和发展，它也逐渐用于更多大规模网站和应用。
关于数据库设计是整体系统开发中的核心技术。数据库位于系统的底层、读写最频繁，正确地设计存放数据才能保证数据的正确性、一致性和高效性。

5.2 MYSQL需求分析

sp_attribute表

字段名	类型	约束	备注
attr_id	smallint(5)	主键	主键id
attr_name	varchar(32)		属性名称
cat_id	smallint(5)	外键	外键，类型id
attr_sel	enum(‘only’,‘many’)		only:输入框(唯一) many:后台下拉列表/前台单选框
attr_write	enum(‘manual’,‘list’)		manual:手工录入 list:从列表选择
attr_vals	text		可选值列表信息,例如颜色：白色,红色,绿色,多个可选值通过逗号分隔
delete_time	int(11)		删除时间标志

5.3 逻辑结构设计

sp_attribute(attr_id, attr_name, cat_id, attr_sel, attr_write, attr_vals, delete_time)

sp_category(cat_id,cat_name,cat_pid,cat_level,cat_deleted,cat_icon,cat_src)

sp_consignee(cgn_id,user_id,cgn_name,cgn_address,cgn_tel,cgn_code,delete_time)

sp_express(express_id,order_id,express_com,express_nu,create_time,update_time)

sp_goods(goods_id, goods_name,goods_price,goods_number,goods_weight,cat_id,goods_introduce,goods_big_logo,goods_small_logo,is_del ,add_time,upd_time,delete_time,cat_one_id,cat_two_id,cat_three_id,hot_mumber,is_promote,goods_state)

sp_goods_attr(id,goods_id,attr_id,attr_value,add_price)

sp_goods_pics(pics_id,goods_id, pics_big,pics_mid,pics_sma)

sp_manager(mg_id,mg_name,mg_pwd,mg_time,role_id,mg_mobile,mg_email,mg_state`)

sp_order(order_id,user_id,order_number,order_price,order_pay,is_send,trade_no,order_fapiao_title,order_fapiao_company,order_fapiao_content,consignee_addr,
pay_status,create_time,update_time)

sp_order_goods(id,order_id,goods_id,goods_price,goods_number,goods_total_price)

sp_permission(ps_id,ps_name,ps_pid,ps_c,ps_a,ps_level`)

sp_permission_api(id,ps_id,ps_api_service,ps_api_action,ps_api_path,ps_api_order)

sp_report_1(id,rp1_user_count,rp1_area,rp1_date)

sp_report_2(id,rp2_page,rp2_count,rp2_date)

sp_report_3(id,rp3_src,rp3_count,rp3_date)

sp_role(role_id,role_name,ps_ids,ps_ca,role_desc)

sp_type(type_id,type_name,delete_time)

sp_user(user_id,username,qq_open_id,password,user_email,user_email_code,is_active,user_sex,user_qq,user_tel,user_xueli,user_hobby,user_introduce,create_time,update_time)

sp_user_cart(cart_id,user_id,cart_info,created_at,updated_at,delete_time)

第六章 API接口

6.1 API V1接口说明

• 接口基准地址：http://127.0.0.1:8888/api/private/v1/
• 服务端已开启 CORS 跨域支持
• API V1 认证统一使用 Token 认证
• 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
• 使用 HTTP Status Code 标识状态
• 数据返回格式统一使用 JSON

6.2 API请求支持的方法

• GET（SELECT）：从服务器取出资源（一项或多项）
• POST（CREATE）：在服务器新建一个资源
• PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）
• PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）
• DELETE（DELETE）：从服务器删除资源
• HEAD：获取资源的元数据
• OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的

6.3 通用返回状态说明

第七章 系统展示

总 结

本文详细介绍了基于VUE框架开发的电商后台管理系统，该系统不仅包含对用户、商品的信息进行操作，还记录了订单的相关信息以及对物流进度的实时更新。具有准确性、实时性安全性等特点，因此并不会存在库存数据不准确，导致超卖；财务结算复杂，很多线下流程；权限管理不严谨，存在安全隐患；售后问题容易跟丢；发货时效慢；运营操作繁琐，效率低等等的问题。也正是如此强大的系统，导致在开发时屡次出现难题，花费了大量时间来解决。
开发此系统也有效的锻炼了实践能力和解决问题能力，为今后的学习打下了坚实的基础！当然，该系统也存在一些不足、需要改进的地方，比如：并没有关于客服服务的模块等等，整体设计还有很大的进步空间。

参考文献

【1】Vue.js-黑马19年8月最新版—前端 -webpack-vuecli-vue-vuejs
【2】从三大方面对电商后台管理系统进行了整体的介绍
【3】【毕业设计】基于Vue.js画作交流平台的设计与实现