摘 要

随着我国互联网普及率的提高，电子商务发展插上了腾飞的翅膀，一路高歌猛进。本后台系统旨在借助先进的计算机、快捷的网络以及庞大的云数据存储来帮助电商更加方便的统计电商数据。

本系统以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 功能模块 登录模块 用户管理 权限管理 商品管理 订单管理 数据统计 第五章 系统数据库设计 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接口说明 6.2 API请求支持的方法 6.3 通用返回状态说明

第七章 系统展示

总 结

本文详细介绍了基于VUE框架开发的电商后台管理系统，该系统不仅包含对用户、商品的信息进行操作，还记录了订单的相关信息以及对物流进度的实时更新。具有准确性、实时性安全性等特点，因此并不会存在库存数据不准确，导致超卖；财务结算复杂，很多线下流程；权限管理不严谨，存在安全隐患；售后问题容易跟丢；发货时效慢；运营操作繁琐，效率低等等的问题。也正是如此强大的系统，导致在开发时屡次出现难题，花费了大量时间来解决。

开发此系统也有效的锻炼了实践能力和解决问题能力，为今后的学习打下了坚实的基础！当然，该系统也存在一些不足、需要改进的地方，比如：并没有关于客服服务的模块等等，整体设计还有很大的进步空间。

参考文献

【1】Vue.js-黑马19年8月最新版—前端 -webpack-vuecli-vue-vuejs

【2】从三大方面对电商后台管理系统进行了整体的介绍

【3】【毕业设计】基于Vue.js画作交流平台的设计与实现