基于Vue和SpringBoot的电商管理系统的设计与实现(一)

简介: 基于Vue和SpringBoot的电商管理系统的设计与实现

摘要

随着社会经济的高速增长,科技的日新月异,特别是进入数字化社会以来,快节奏已是生活的常态。人们开始追求高效、便捷的方式来满足日常生活需求。随即网上购物就愈发活跃,就连老年人也打破传统的采买方式开始尝试线上购物。此时商家便需要一个后台管理系统对订单进行系统的管理。

本系统是基于Java Web的电商后台管理系统,该系统使用VUE框架进行开发、ElementUI为UI组件、MySQL为数据的存储以及ES6作为语法规范。前端项目是基于Vue技术栈的单页面应用项目,前端负责绘制页面同时基于Axios技术调用后端提供的API接口。使用vue-router建立起url和页面之间的映射关系,Echarts来绘制相关的图形报表。管理员通过管理用户账号、商品分类、商品信息、订单、数据统计等业务功能在PC端进行展示,实现对商品的线上管理。

此PC后台管理系统是对商城后台管理员来使用,后台管理员基于此项目来管理商城中的商品、管理商品分类并且可查看商品相关的报表数据。对于管理员而言能够更方便高效的管理系统信息,更好的服务于消费者,取得更好的收益。

关键词:后台管理系统;电子商务;VUE;ElementUI

1 绪 论

1.1研究背景及意义

在经济迅速发展的大背景下,电子商务开始进入人们的视野,更多的人体验到一种新兴的购物方式-网购,它给人们的生活带来了便利。

由于目前网购平台发展稳定,人们的可选择性非常丰富,使得人们的日常生活需要愈发离不开网络购物。2020年,中国网民在互联网上购买的商品总价达11.8万亿元,这是一个相当庞大的数据,较2019年增加1.3万亿元,占网上零售额的82.98%。如图1.1所示。

通过进一步了解,可以发现近两年来更多老年人已经不再局限于传统依靠上街采买的方式,老年人开始在年轻人的帮助下利用手机使用购物软件购买所需要的商品。这样既节省时间也减了轻腿脚不便的老年人赶去集市的苦恼,同时网购与大多数老年人节俭的思想正相符,这让他们对网购的接受力大大提升。截止2020年,中国农村网民规模达3.09亿人,农村地区互联网普及率达55.9%。一半以上的农村地区接入互联网,这会让他们感受到网络所带来的便利性,越多的农村居民开始加入到网民行列,网络在村镇等经济相对不发达地区的渗透率也将持续提高。如图1.2所示。

每年电子商务的交易额会直接反映网络消费的发展形势。2020年中国电子商务交易总额达37.2万亿元,较2019年增加了2.4万亿元,同比增长6.87%。在这些具体数据中可以看出,中国网络零售市场交易规模在不断攀升,说明电子商务发展前景很不错,未来在中国网络规模的消费也会再上一个台阶。如图1.3所示。

面对如此多的购物者,那么商家也将会有更多的订单,不过倘若商家没有一个可以对商品有效管理的后台系统,那么后续将不利于商家更好的发展。因此,我们应该结合过往不断的更新设计高水平后台管理系统同时吸收高质量的东西,完成一个能够满足网上店铺需求的后台管理系统,通过此次设计希望实现商家对用户各种信息的掌握功能以及对各项数据的统计功能,同时希望卖家能够在做好服务的前提下,取得更好的效益。

1.2 国内外研究现状

电子商务在中国已有三十年历史,对中国经济的成长带来很大的帮助,已渗透到人们的日常生活中。

研究表明,1991年至1999年我国电商应用处于萌芽初生阶段,8848、易趣网和当当网是这一时期的典型代表。2000年至2009年我国电商应用处于初期竞争阶段,我国淘宝和京东电商网站逐渐进入人们的视野中。而易趣和淘宝两个电商巨头之间的竞争是我国电商行业发生的初次碰撞。

2010年至2014年我国电商应用处于高速成长阶段,在2010年淘宝迎来第二个双十一购物节,此时中国的电商巨头已涌现出来。国内电商公司为了赢得更大的利益,如苏宁易购、国美、京东等都纷纷以最优惠的价格吸引大众网民的眼球来消费,这是他们发起的价格战,在这次激烈的竞争中,我国各电商应用也吸取经验飞速成长。中国的电商发展到2014年的时候,其整体水平已经超过欧盟和日本等国家的电商,在电商整个运行过程中,某些方面甚至已经远超发达国家。

2015年至2017年我国电商应用处于稳定发展阶段,经过前几年的飞速发展,国内市场已出现各种各样的电商平台,可供人们在日常生活中的选择有很多。同时,各同行平台意识到应通过合并的方式合作共赢,例如:58网与赶集网合并、携程网与去哪儿网合并。我国电商应用间的关系已经由竞争阶段纷纷走向合作阶段。

2018年至2020年我国电商应用处于新的变化阶段,拼多多的迅速崛起,短视频平台迎来爆发。中国电商APP市场发展图如图1.4所示。

电子商务是时代潮流,但在国内仍存在很多问题,比如:1.安全问题。人们在使用银行卡时信息的暴露、金额数据传输过程中出错和涉及用户隐私等问题仍待加强。2.物流限制问题。由于偏远地区还未能使用网络,造成物流规模不健全以及无法配送的问题等都成为限制电子商务发展的因素。3.专业人才问题。计算机和网络人才的缺乏严重限制其发展,用人单位苦求人才,但电商专业的毕业学生由于在校学习内容有限,与实际工作无法对接,毕业后通常不能达到用人单位的要求,以至于不好就业。4.诚信缺失,售假屡禁不止。所以,尽管国内的后台管理系统已经处于一个成熟的发展阶段,但是设计一个适合商家的管理系统也很必要。

国内外都有很多基于Vue开发的网站,国外例如Vue.js Weekly news、Vuejsdevelopers、vuejsfeed等。2020年,全球存在25.6亿线上买家:中国线上买家将占全球总人口的32.9%,即8.433亿;印度将拥有3.12亿线上买家;美国将位居第三,为2.141亿,比去年增加450万。10年前,全球零售总额也仅略高于16万亿美元,而全球消费者在2022年网购的支出相较于2021年增加6036.8亿美元。到2025年,这一数字将高达7.391万亿美元。eMarketer市场研究公司预测,未来很长一段时间,全球仍然有许许多多的线上买家涌入市场。2020年至2025年全球线上买家增长率如图1.5所示。

但是,国外网站在一些方面也存在相应的缺点。例如:

  1. 付款方式单一。目前eBay只支持PayPal付款方式,同时收费项目多,每个店铺层级不同收费费用也不同。
  2. 国内近几年发展迅速,国内电商商家转战亚马逊平台,导致商家数量上升形成竞争激烈,店铺被封现象频繁。

2 需求分析

本章将要对系统需求进行分析,分别从三个模块来进行:

  1. 可行性分析;
  2. 功能需求分析;
  3. 非功能需求分析。

其中功能需求分析只针对后台管理员进行,原因是本次开发的后台管理系统是适用于后台管理员。针对非功能需求分析,本系统从易用性、流畅性、稳定性、可扩展性和安全性进行相应的分析。由此才能更好地了解本系统的相关需求,为后序工作打下基础。

2.1 可行性分析

(1)技术可行性。本系统主要面对管理员,方便商品在后台进行管理以及数据统计。该系统利用目前被企业以及开发者青睐的VUE+ElementUI框架来开发,这些框架提供了更加简单、容易理解的API,即更加的轻量级和容易上手,从而极大地提高了开发效率。

(2)经济可行性。使用免费开发软件,节约了成本,主要成本集中在时间上。对于管理员来说,无需在系统使用前进行详细培训,也能轻松操作,在此也节约管理员培训的经济费用。

(3)运行可行性。该系统开发充分考虑管理员操作方便的要求,尽量做到简单操作,直观,易于掌握。

(4)扩展可行性。本次开发的系统寿命在3年以上,后续会根据未来需求进行相应的扩展和优化。

(5)法律可行性。此系统用于私人毕业设计,系统涉及到数据均符合法律要求,根据我国软件相关法律,此系统在法律上可行。

2.2 后台管理员功能需求分析

本系统具有用户管理模块、权限管理模块(角色列表、权限列表)、商品管理(商品列表、分类参数和商品分类)模块、订单管理模块和数据统计模块。

(1)用户管理:主要是对系统中管理员信息在列表展示、对管理员信息的查询、添加管理员的信息并且对添加的信息进行校验、修改和删除信息、同时可对管理员的状态进行更改以及对管理员进行角色分配和底部分页的相关功能。

(2)权限管理:此模块包含角色列表和权限列表。其中权限列表主要是对本系统中所有权限和权限的等级进行展示;角色列表中有对每个角色下面目前拥有的权限进行展示并且可以对权限进行相应的清除操作、对角色的增删改、角色权限的分配一系列的功能。

(3)商品管理:对商品列表中的商品信息进行查询,填写商品的基本信息、商品参数、商品属性和商品内容等相关信息进行添加、管理员对商品进行编辑和删除。

(4)分类参数:首先选择三级商品分类,然后对选择的分类展示所属的动态参数和静态属性,动态参数和静态属性之间的切换,对动态参数和静态属性下面已有的参数进行展示、添加和清除以及对参数和属性的增删改等功能。

(5)商品分类:包括对三级分类的展示、添加商品各级的分类、编辑各级商品的分类和删除各级商品等相关功能。

(6)订单管理:对前台下单的所有商品进行展示和对列表中的商品进行查询的功能。

(7)数据统计:在数据报表中展示了2017年末到2018年初共六天的用户来源。管理员可以在具体的一天中看到用户来源于哪些地区同时不同的地区对具体的用户量也进行了展示。

2.3 非功能需求分析

此系统的功能应达到如下要求:

(1)易用性。本系统是专门为管理员进行的设计开发,在页面设计上,着重简洁、美观和易操作,让管理员在使用过程中方便对商品、订单以及其他管理员的信息数据进行高效管理,把繁杂的人力劳动转为线上操作,用更少的时间做更多的事。

(2)流畅性。一款好用的系统往往体现在用户体验感上,表现在使用过程中是否流畅、是否出现卡顿等问题。本系统在开发过程中有对此问题进行严格的考虑,通过提升代码质量,严格按照语法规范来进行编写,删除无用组件和减少层级以免占用大量内存,造成不必要的资源浪费来实现。本系统还使用异步加载的方法来提高页面加载速度,避免管理员长时间等候。

(3)稳定性。系统运行应做到稳定,以便管理员在后台管理系统中可正常操作和使用系统中各项功能。系统按照功能模块进行划分,用来提高独立性,做到高内聚低耦合,最终确保其稳定性。

(4)可扩展性。本项目开发最主要还是以功能需求为目的,满足目前管理员对功能的需要,但可能随着未来几年商家业务的不断扩展,还会对本系统做相应的调整以及添加新版块,考虑到可扩展性,不会对本项目产生太大影响。

(5)安全性。由于本系统涉及很多后台管理员的数据信息,专门在系统中添加权限管理模块,只有管理员拥有相对应的权限,系统中部分功能仅向管理员进行展示以及操作,若管理员拥有的权限较低,系统中的核心数据管理员无法掌握。

3 系统设计

依托于上一章对项目需求的分析,为系统设计提供了思路。本章将要开始对系统进行设计,分别从以下四个方面进行详细介绍,为下一章系统的实现做充分的准备,同时为系统的实现提供了清晰的条理框架。

3.1 系统总体功能设计

本系统主要包含五大模块,分别是:

  1. 用户管理模块。
  2. 权限管理(角色列表、权限列表)模块。
  3. 商品管理模块(商品列表、分类参数、商品分类)。
  4. 订单管理模块。
  5. 数据统计模块。

不同的管理员可根据自身需要以及自身拥有的权限对系统中的管理员信息、商品信息以及订单在列表中进行查看、按需添加、编辑和删除数据、分配角色、分配权限等等一系列功能的操作,可以保证后台管理系统信息的及时更新,更好的服务于消费者,保障消费者的权益。电商后台管理系统总体功能图如图3.1所示。

3.2 管理员功能模块设计

(1)系统登录

首先管理员要进入登录页面,在登录页面根据提示在输入框中输入用户名和密码,这两个输入框在系统开发时都做了相应的验证,验证输入的内容是否规范,当两项都符合标准之后,管理员便可点击确定按钮,此时会触发点击事件然后调用后台登录接口进行验证,后台服务器会根据提交的用户名和密码数据进行核实,登录成功与否,系统会进行相应提示。登录流程图如图3.2所示。

(2)用户管理

该模块对系统管理员进行信息查看、按要求添加数据、删改和分配角色等操作,在此针对分配角色进行介绍。管理员可点击分配角色按钮,在分配新角色下拉框中选择要新分配的角色并点击确定按钮,用户列表刚修改的那条数据中角色已更新成功。分配角色流程图如图3.3所示。

(3)权限管理

本模块中对数据列表中每个角色下拥有的三级权限进行展示、同时可对三级权限做清除的操作、对角色的增删改查和对角色分配权限的功能。主要对分配权限功能进行详细介绍。可对管理员的角色进行权限分配,点击分配权限按钮,弹出一个分配权限的对话框,并且在弹出对话框的同时把对应所有权限数据都获取到,在级联框中管理员选择到要分配的三级权限并点击确定按钮,系统会提示“分配权限成功”,在角色列表中的权限会进行更新。分配权限流程图如图3.4所示。

(4)商品列表

添加商品功能。管理员可对要添加的商品进行按需添加,添加商品时需要四步操作,分别是基本信息、商品参数、商品属性和商品内容。其中基本信息里的内容为必填项,并且只有在基本信息中的商品分类选择之后,后台才能获取到该选择分类中的商品参数和商品属性,把添加商品不需要的参数和属性勾选掉,留下的就是相应需要的参数和属性,再对商品内容进行描述,当以上步骤的内容都已添加,点击确定,商品列表会进行一次更新并且展示刚添加的商品信息内容。添加商品的流程图如图3.5所示。

(5)商品分类

此模块中有三级商品分类的查看、添加分类、编辑三级分类、对三级分类的删除和底部分页功能。此处展示删除功能。管理员可先展开一级、二级和三级分类,选择要删除的分类点击删除按钮,系统会弹出对话框并点击确定,系统会提示删除成功并且列表中已删除该条数据。删除商品分类流程图如图3.6所示。

(6)分类参数

该功能管理模块中可对动态参数和静态属性分别进行查看、添加、修改和删除的操作,这里展示对静态属性的修改操作。管理员可以对选择的商品分类进行静态属性的编辑,需要注意只允许为第三级分类设置相关属性。管理员首先要在商品分类下拉框中选择到三级,此时参数列表中会获取到后台返回的数据显示在列表中,点击编辑属性按钮,修改静态属性并确定,参数列表中便会显示刚修改的静态属性。编辑静态属性流程图如图3.7所示。

(7)订单管理

订单查询功能。管理员只需在搜索框中输入想要查找的订单编号,系统会搜索出带有订单编号关键字的订单信息。此功能可方便管理员对搜索出的订单内容做详细了解并及时跟进。查询订单流程图如图3.8所示。

3.3 数据库概念模型设计

此PC后台管理系统的服务对象是后台管理员。后台管理员的实体包含姓名、邮箱、电话、角色、状态和操作等属性,这些属性是对后台管理员基本信息的展示以及管理员的角色分配。有的管理员只允许有添加的权限,但没有删除的权限,不同的管理员由于身份不同导致权限也不同,并未把权限直接绑定到每个管理员上,而是在管理员与权限之间设置不同的角色。先把权限分配给不同的角色,再把角色分配给对应的管理员,只要管理员拥有角色,角色下所有权限都属于管理员。管理员实体图如图3.9所示。

商品实体包含商品名称、商品价格、商品重量、创建时间和操作等属性。这些属性可以很方便帮助管理员了解商品的基本信息,哪些商品创建的时间比较久可适当进行调整,哪些商品搞促销可进行商品价格的更改。商品实体图如图3.10所示。

订单实体有订单编号、订单价格、是否付款、是否发货、下单时间和操作等属性。这些属性可以帮助管理员查看买家购买的商品是否已发货、是否付款或者下单时间的长短尽快跟进订单进度确保商品能够尽快到购买者手中。订单实体图如图3.11所示。

用户实体这里指前端下单的用户,包含用户编号、用户名、性别、电话、邮箱、下单备注等属性。这里主要就是帮助后台管理员了解已下单用户的基本信息。用户实体图如图3.12所示。

系统总体的实体-联系图可以有效的展示现实环境中关系联系的方式,并且存在3种一般性约束联系,在下表中有所标示。本系统总体的E-R图如图3.13所示。

3.4 数据库物理模型设计

数据库在一款项目中是灵魂的存在。在不同的终端中同一款项目是共用同一份数据库和同一份接口服务器,因此数据库的设计对于本次开发的系统是否高效起决定性的作用。

本系统涉及到的表有:管理员信息表、权限列表、商品列表、商品分类表、商品属性表、商品属性关联表、商品分类关联表、角色列表、商品类型表、订单列表、商品订单关联表、用户数地区表、用户来源时间表、用户来源数量表

管理员信息表主要包含管理员编号、名称、密码、注册时间、角色编号、电话、邮箱和状态是否启用等字段。管理员信息表(sh_manager)如表3.1所示。

不同的权限会分配给不同的角色,权限列表中包含权限编号、名称、父级id、控制器、操作方法和权限等级等字段。权限列表(sp_permission)如表3.2所示。

商品表显示商品的一些基本信息,包含字段名商品id、添加商品时间、重量、名称、类型编号、商品详情、价格、修改商品时间、一级二级三级分类编号、数量、热卖数量、是否删除、是否促销和商品状态。商品列表(sp_goods)如表3.3所示。

商品分类表包含六个字段,分别是分类唯一编号、分类名称、分类父编号、分类层级和是否删除等。商品分类表(sp_category)如表3.4所示。

商品-属性关联表字段分别为:商品属性编号、商品编号、属性id、商品对应属性的值和需要添加额外增加的价钱等。商品-属性关联表(sp_goods_attr)如表3.5所示。

商品属性表包含商品属性编号、属性名称、商品类型编号、属性选择、可选值列表信息和删除时间标志等字段。商品属性表(sp_attribute)如表3.6所示。

订单表显示订单的一些基本信息,包含字段订单id、订单编号、订单总金额、支付方式、订单是否已经发货、支付宝交易流水号码、发票抬头、公司名称、发票内容、收货人地址、订单状态、记录生成时间和记录修改时间。订单列表(sp_order)如表3.7所示。

商品-分类关联表字段分别为:分类编号、父级编号、分类名称、是否显示、分类排序、数据标记和创建时间等字段。商品-分类关联表(sp_goods_cats)如表3.8所示。

商品-订单关联表字段分别为:主键id、订单id、商品id、商品单价、购买单个商品数量和商品小计价格。商品-订单关联表(sp_order_goods)如表3.9所示。

管理员绑定不同的角色,此角色下拥有不同权限,只要管理员拥有角色,角色下所有权限都属于用户。角色表中的字段有角色id、角色名称、权限ids、控制器-操作和角色描述。角色列表(sp_role)如表3.10所示。

类型表中的字段分别为类型id、类型名称和删除时间标志。类型表(sp_type)如表3.11所示。

数据报表可直观帮助管理员看到用户来源于哪些地区,数据报表中的字段有id、用户数、地区和日期。数据报表(sp_report_1)如表3.12所示。


相关文章
|
7天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
52 13
|
14天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
80 2
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
45 0
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
181 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
176 1
|
3月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
299 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
115 62
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
237 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
下一篇
DataWorks