基于springboot vue 的购物网站系统设计与实现

博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php phython node.js uniapp 微信小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1500+毕设题目方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址介绍翰文编程-CSDN博客
文末下方有源码获取地址

4 系统设计

4.1 系统功能模块设计

经过分析本系统的实际需求，系统主要分为三个模块，用户、商家以及管理员，具体的功能模块如图4-1所示：

图4-1 功能模块设计图

4.2 系统功能流程设计

系统在登录流程设计时，既要对功能进行周到的考虑，而且，还要是设计的流程简洁实用。在登录模块流程设计时候，用户在正确的输入用户名和password组合后，才可以通过系统的审核，登录到系统，操作本权限内的更多系统提供的功能。否则，系统将拒绝用户的登录请求。并给出相应的操作提示，如下图4-2示：

图4-2 功能流程设计图

（1）基础数据增加流程

给系统中的每个信息流添加数据是功能模块中最基础的，系统增加的流程一般采取先点击添加按钮进行开始操作，然后输入所需要添加的数据信息进行填充，填充完毕以后，系统自动判断数据是否合法，如果合法则添加成功，否则的话，则进行错误提示，重新进行操作，具体设计如下图4-3所示：

图4-3基础数据增加流程图

（2）基础数据修改流程

给系统中的每个信息流修改数据是功能模块中最基础的，系统修改的流程一般采取先点击修改按钮进行开始操作，然后输入所需要修改的数据信息进行填充，填充完毕以后，系统自动判断数据是否合法，如果合法则添加成功，否则的话，则进行错误提示，重新进行操作。数据修改流程图如图4-4所示。

图4-4 基础数据修改流程图

（3）基础数据删除流程

给系统中的每个信息流删除数据是功能模块中最基础的，系统删除的流程一般采取先点击删除按钮进行开始操作，然后输入所需要删除的数据信息进行删除。数据删除流程图如图4-5所示。

图4-5基础数据删除流程图

4.3 数据库设计

在进行数据库设计时，需要建立一个数据模型来使杂乱无章的用户需求变得井井有条。经常选用的就是E-R模型。E-R图反应了实体与实体之间的关系。

用户信息E-R图如图4-6所示。

图4-6用户信息E-R图

购物车E-R图如图4-7所示。

图4-7购物车E-R图

商家信息E-R图如图4-8所示。

图4-8商家信息E-R图

商品信息E-R图如图4-9所示。

图4-9商品信息E-R图

订单信息E-R图如图4-10所示。

图4-10订单信息E-R图

本无可购物网站整体的E-R图如图4-11所示：

图4-11无可购物网站的E-R图

4.4数据库中的表格设置情况如下：

表4-1：订单

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
orderid	varchar	200	订单编号
tablename	varchar	200	商品表名		shangpinxinxi
userid	bigint		用户id
goodid	bigint		商品id
goodname	varchar	200	商品名称
picture	longtext	4294967295	商品图片
buynumber	int		购买数量
price	double		价格		0
total	double		总价格		0
type	int		支付类型		1
status	varchar	200	状态
address	varchar	200	地址
tel	varchar	200	电话
consignee	varchar	200	收货人
logistics	longtext	4294967295	物流
remark	varchar	200	备注
shangjiahao	varchar	200	商户名称
sfsh	varchar	200	是否审核
shhf	longtext	4294967295	审核回复
role	varchar	200	用户角色

表4-2：公告信息分类

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
typename	varchar	200	分类名称

表4-3：公告信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
introduction	longtext	4294967295	简介
typename	varchar	200	分类名称
name	varchar	200	发布人
headportrait	longtext	4294967295	头像
clicknum	int		点击次数		0
clicktime	datetime		最近点击时间
thumbsupnum	int		赞		0
crazilynum	int		踩		0
storeupnum	int		收藏数		0
picture	longtext	4294967295	图片
content	longtext	4294967295	内容

表4-4：论坛表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	帖子标题
content	longtext	4294967295	帖子内容
parentid	bigint		父节点id
userid	bigint		用户id
username	varchar	200	用户名
avatarurl	longtext	4294967295	头像
isdone	varchar	200	状态
istop	int		是否置顶		0
toptime	datetime		置顶时间

表4-5：商品信息评论表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		关联表id
userid	bigint		用户id
avatarurl	longtext	4294967295	头像
nickname	varchar	200	用户名
content	longtext	4294967295	评论内容
reply	longtext	4294967295	回复内容

表4-6：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值
url	varchar	500	url

表4-7：用户

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yonghuzhanghao	varchar	200	用户账号
mima	varchar	200	密码
yonghuxingming	varchar	200	用户姓名
xingbie	varchar	200	性别
nianling	int		年龄
touxiang	longtext	4294967295	头像
money	double		余额		0

表4-8：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表4-9：在线客服

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
adminid	bigint		管理员id
ask	longtext	4294967295	提问
reply	longtext	4294967295	回复
isreply	int		是否回复

表4-10：收藏表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
refid	bigint		商品id
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)		1
inteltype	varchar	200	推荐类型
remark	varchar	200	备注

表4-11：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
image	varchar	200	头像
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4-12：购物车表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tablename	varchar	200	商品表名		shangpinxinxi
userid	bigint		用户id
goodid	bigint		商品id
goodname	varchar	200	商品名称
picture	longtext	4294967295	图片
buynumber	int		购买数量
price	double		单价
shangjiahao	varchar	200	商户名称

表4-13：商品种类

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinzhonglei	varchar	200	商品种类
image	longtext	4294967295	图片

表4-14：地址

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
address	varchar	200	地址
name	varchar	200	收货人
phone	varchar	200	电话
isdefault	varchar	200	是否默认地址[是/否]

表4-15：商品信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangpinmingcheng	varchar	200	商品名称
shangpinzhonglei	varchar	200	商品种类
shangpintupian	longtext	4294967295	商品图片
shangpinxiangqing	longtext	4294967295	商品详情
shangjiahao	varchar	200	商家号
shangjiamingcheng	varchar	200	商家名称
lianxidianhua	varchar	200	联系电话
shangjiadizhi	varchar	200	商家地址
clicknum	int		点击次数		0
discussnum	int		评论数		0
price	double		价格
storeupnum	int		收藏数		0

表4-16：商家

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
shangjiahao	varchar	200	商家号
mima	varchar	200	密码
shangjiamingcheng	varchar	200	商家名称
shangjiadizhi	varchar	200	商家地址
lianxidianhua	varchar	200	联系电话
shangjiayouxiang	varchar	200	商家邮箱
yingyezhizhao	longtext	4294967295	营业执照
shangpuzhaopian	longtext	4294967295	商铺照片
shangjiajieshao	longtext	4294967295	商家介绍
money	double		余额		0

5系统的功能实现

5.1前台用户功能实现

对于任何网站，相应完成除了信息查看外，更多的操作，就必然要通过系统的身份审核，要通过相应的身份审核，就必然要进行注册，通过注册操作，可以获得合法的使用权限。在系统的注册页面，要根据系统的要求，如账号、密码等资料的填写及确认。另外，用户在注册时，系统处了进行必填项的非空检测外，还要对用户填入的信息进行数据库重复比对操作。如果，用户填入的用户名在数据库中已经存在，即已经被其他人注册，则系统会进行用户名重复的响应提示。在所有的登录注册都能够通过管理员审核后，表示用户是能够按照此账号名和密码对系统进行登录的。审核通过后首页会自动弹出注册成功的提示。以用户名为xxx,密码123456为例进行用户注册，如下图5-1所示：

图5-1用户注册界面

在设计系统的登录流程时，通常会从实用和有效性来考虑，即所设计的流程简单实用还要能够有效的屏蔽非法的登入系统，保护系统数据的安全。用户需要登录本系统时，需要在登录框中对应的输入个人的用户账号和密码，点击登录时，系统会自动接收到的帐密组合，在相应的存储数据表中检索，若检索能够得到结果，则表示该账密组合合法，则允许登录，系统会自动跳转页面，若检索无结果，则表示系统中不存在此账密组合用户，则给出错误提示，并停留登录页面。如下图5-2所示：

图5-2用户登录界面

主界面主要分为首页、商家、商品信息、论坛、公告信息轮播区，其原理就是在发出相应的查询申请时，系统会调用已设定好的MySQL数据库命令在指定的数据表中进行数据的检索，并且将检索得到的结果存储为数据集的形式，这样可以方便多个数据准确的绑定到GridView控件上，来完成属性和内容的对应和显示。通常的情况，系统会以DataKeyNames属性来绑定对应行的主键。这样的操作方式，可以很大限度上避免以后在数据操作时，发生错误。例如在以后的数据修改、删除操作。都需要进行数据的准确定位，通过DataKeyNames就可以避免定位出错，进而避免错误的删除或修改的发生。如下图5-3所示:

图5-3 系统主界面

用户点击商品信息页面的搜索栏输入商品名称、商品种类，进行查询，然后可以查看商品等信息，如果有需要可以添加到购物车、立即购买、收藏或者评论等操作，如图5-4所示：

图5-4商品信息页面

用户点击商家页面的搜索栏输入商家号、商家名称，进行查询，然后可以查看商家等信息，还可以点击下载等操作，如图5-5所示：

图5-5商家页面

购物车:用户将想要购买的商品加入购物车，加入购物车后可以增减数量、删除、点击购买，可一键清除失效商品，如图5-6所示：

图5-6购物车页面

主要代码

   /*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody CartEntity cart, HttpServletRequest request){//ValidatorUtils.validateEntity(cart);cart.setUserid((Long)request.getSession().getAttribute("userId"));cartService.insert(cart);return R.ok();}/*** 前端保存*/@RequestMapping("/add")public R add(@RequestBody CartEntity cart, HttpServletRequest request){//ValidatorUtils.validateEntity(cart);cartService.insert(cart);return R.ok();}/*** 获取用户密保*/@RequestMapping("/security")@IgnoreAuthpublic R security(@RequestParam String username){CartEntity cart = cartService.selectOne(new EntityWrapper<CartEntity>().eq("", username));return R.ok().put("data", cart);}/*** 修改*/@RequestMapping("/update")@Transactional@IgnoreAuthpublic R update(@RequestBody CartEntity cart, HttpServletRequest request){//ValidatorUtils.validateEntity(cart);cartService.updateById(cart);//全部更新return R.ok();}

在个人中心页面可以更新个人详细信息，还可以对我的发布、我的订单、我的地址、我的收藏进行详细操作；如图5-7所示：