【毕业项⽬】基于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 ta
ken 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数据
⽤户管理
添加⽤户：弹出添加⽤户对话框，需要填写⽤户名、密码、邮箱、⼿机号来添加⽤户，并且跟登录⼀样，也会进⾏验证处理以及预处理编辑⽤户：⽤户可以重新修改邮箱及⼿机号，同时含有验证处理以及预处理功能
删除⽤户：确认后将永久删除该⽤户
搜索⽤户：输⼊想查询⽤户的相关信息，点击搜索按钮后便可显⽰查询的信息，含有⼀键清空功能
手机上可以打html与css的app分配⾓⾊：弹出要分配⾓⾊的⽤户的分配⾓⾊对话框，可在三级选择器选择想分配的新⾓⾊
更改⽤户状态：可更改⽤户是否可登录状态
权限管理
添加⾓⾊：弹出添加⾓⾊对话框，需要填写⾓⾊名称、⾓⾊描述来添加⾓⾊，同时含有验证处理以及预处理功能
编辑⾓⾊：⽤户可以重新修改⾓⾊名称、⾓⾊描述，同时含有验证处理以及预处理功能
删除⾓⾊：确认后将永久删除该⾓⾊
删除⾓⾊权限：确认后将永久删除该⾓⾊下拥有的权限
分配权限：可以给⾓⾊添加新权限或者消除已有权限
商品管理
添加商品：点击添加商品，将编程式跳转⾄添加商品页⾯需要完成商品基本信息、商品参数、商品属性、商品图⽚、商品内容的填写⽅可成功添加商品
编辑商品：⽤户可以重新修改商品名称、商品价格及数量，同时含有验证处理以及预处理功能
删除商品：确认后将永久删除该商品
搜索商品：输⼊想查询商品的相关信息，点击搜索按钮后便可显⽰查询的信息，含有⼀键清空功能
选择商品分类：可在三级选择器选择想查看的商品
添加参数：弹出添加参数对话框，需要填写动态参数来添加参数，同时含有验证处理以及预处理功能
编辑参数：⽤户可以重新修改动态参数，同时含有验证处理以及预处理功能
删除参数：确认后将永久删除该参数
添加属性：弹出添加属性对话框，需要填写静态属性来添加属性，同时含有验证处理以及预处理功能
编辑属性：⽤户可以重新修改静态属性，同时含有验证处理以及预处理功能
删除属性：确认后将永久删除该属性
添加分类：弹出添加分类对话框，需要填写分类名称以及通过三级选择器选泽⽗级分类来添加分类，同时含有验证处理以及预处理功能编辑分类：⽤户可以重新修改分类名称
删除分类：确认后将永久删除该分类
订单管理
搜索订单：输⼊想查询订单的相关信息，点击搜索按钮后便可显⽰查询的信息，含有⼀键清空功能
编辑订单：可以重新修改订单的地址
查看物流：弹出信息对话框，查看物流的具体进度信息
数据统计
数据报表：通过折线图显⽰每⼀天的⽤户来源
第五章系统数据库设计
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_c ontent,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_xu eli,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接⼝说明
接⼝基准地址：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 通⽤返回状态说明
第七章系统展⽰
总结

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。