基于Spring Boot 的“七匹狼皮带”商城系统的设计与实现（代码+数据库+LW）-优快云博客

摘要

近年来随着社会科技的不断发展，人们的生活方方面面进入了信息化时代。计算机的普及，使得我们的生活更加丰富多彩，越来越多的人使用通过网络来购买各类的商品。早期商品的销售和购买都是通过实体店，这种购买方式需要耗费额外不少的选购时间，且不利于同类产品不同厂商的比较，而通过网上销售和购买则可以随时随地随心的发布和购买，“七匹狼皮带”商城系统的开发正是为此。系统是一款web项目，采用java进行编写，使用mysql进行数据库的管理，使用navicat作为图形界面操作数据库，采用B/S架构进行系统的开发。系统采用流行的Springboot框架结合前台vue-cli进行设计与开发，提高系统的系统可维护性和拓展性，并实现了相关功能，经过测试，系统能够完成预设的基本功能，实现线上商品交易的全过程。

关键词：商城，springboot，vue-cli，B/S

目录

引言

1.1 研究背景与意义

国内网络的大发展起源于2000年左右，各大互联网巨头比如阿里巴巴、腾讯、网易、百度等都在那个时间附近成立。伴随着这些大型企业的成立和宽带的大幅度提速，以及国外互联网企业的进入，国内的网络产品越来越丰富。其中对企业或者个人影响较大的就是越来越多的使用计算机系统来优化信息管理，从超市的进销存条形码扫描支付管理系统，到医院的药品管理挂号系统等，都能够显著解决现实中的一些具体问题，提升管理效率。对于个人来说，计算机技术与网络的普及同样使得我们的生活更加丰富多彩，越来越多的人使用通过网络来购买各类的商品。早期商品的销售和购买都是通过实体店，这种购买方式需要耗费额外不少的选购时间，且不利于同类产品不同厂商的比较，而通过网上销售和购买则可以随时随地随心的发布和购买，“七匹狼皮带”商城系统的开发正是为此[1]。

用例图

如下图是系统管理员用例图：

如下图是系统注册用户用例图：

系统主要模块设计

系统的主要模块有用户模块、商品模块、公告模块、订单模块、轮播图模块、关于我们模块等。用户模块包括管理员模块和注册用户模块。模块的基本操作都是以增删改查为主，有的模块涉及得较多，比如所有的四种操作都有，且查询的方式较多，有的则是简单的按照id查询就可以了。

数据库表设计

本系统采用了MYSQL数据库管理系统，主要的数据库表格包括管理员表格、公告表格、token表格、收藏表格等，部分数据库表的设计结果如下：

表4-1管理员表

字段名	中文名	类型	长度	是否主/外键	默认值
id	编号	bigint	20	主键	AUTO_INCREMENT
addtime	发布时间	timestamp		N	null
password	密码	varchar	100	N	null
role	角色	varchar	100	N	null
username	用户名	varchar	100	N	null

管理员中设置role属性也是为了更好操作管理员信息，比如在后台页面的时候可以根据role的值，来展示对应的功能列表。

表4-2公告表

字段名	中文名	类型	长度	是否主/外键	默认值
id	编号	bigint	20	主键	AUTO_INCREMENT
introduction	介绍	longtext		N	null
title	标题	varchar	200	外键	null
content	内容	longtext		N	null
picture	显示图片	varchar	200	N	null
addtime	发布时间	timestamp		N	null

公告表是为了管理员方便在系统中发布消息使用，通过发布时间属性可以排列新闻的展示顺序。

表4-3 token表

字段名	中文名	类型	长度	是否主/外键	默认值
id	编号	bigint	20	主键	AUTO_INCREMENT
role	角色	varchar	100	N	null
username	用户名	varchar	100	N	null
token	token值	varchar	200	N	null
tablename	表名	varchar	200	N	null
addtime	登入时间	timestamp		N	null
expiratedtime	到期时间	timestamp		N	null
userid	用户id	bigint	20	外键	null

Token保存用户的登录信息，当一定时间不操作，则token实例会进行销毁。所以需要有登录时间和到期时间两个属性。Role字段的设定是为了对应不同的角色可以显示不同的操作界面等信息。

表4-4收藏表

字段名	中文名	类型	长度	是否主/外键	默认值
id	编号	bigint	20	主键	AUTO_INCREMENT
userid	用户id	bigint	20	外键	null
tablename	表名	varchar	200	N	null
refid	商品id	bigint	20	外键	null
addtime	收藏时间	timestamp		N	null
type	收藏类型	varchar	200	外键	null
inteltype	推荐类型	varchar	200	N	null
picture	图片	varchar	200	N	null
remark	介绍	longtext		N	null

收藏表的设置是由于用户和商品在收藏的关系上是多对多，所以收藏表格需要设置两个外键，分别是refid关联商品表，userid关联用户表。

首页功能实现

用户进入本系统可查看网站信息，导航栏包括首页、商品信息页、购物车页等。在导航栏下方设置轮播图展示区，按10s进行切换，这样的好处可以把最好的图片放在轮播图中，增强系统的美观，同时吸引用户的眼球。轮播图下方是系统简介和商品介绍信息，系统首页界面如下图5-2所示。

用户登录功能模块

用户登录界面分为前台登录界面和后台登录界面，这里主要是是考虑到数据的安全性所做的一般性的设计。为了保证系统的安全性，系统前后台用户登录的页面不同，管理员和注册用户具体的登录界面如下图所示，需要输入正确的用户名和密码，点击登录即可，通过HTTP协议，将数据传递到后台。后台会查验数据库中的是否有该用户信息，有的话，登录成功，进行页面跳转，并通过浏览器的内置session对象类生保存生成的token字符串的值。这里说明一下，使用token是为了保证登录账户的安全性。

5商品列表与详情功能实现

会员用户可以查看到具体的商品信息，商品信息会根据商品类别进行排列，根据自己的需要点击商品可以查看到商品详情信息。商品详情展示了商品介绍等信息，如图23所示。页面首先获取到商品类别list集合，然后展示出来，具体的商品列表数据则是根据商品类别id获取到了该类别id下的所有商品list集合，商品详情是通过该商品id获取的。

在线购物功能实现

用户点击物品之后，会展示商品详情信息，商品详情信息中有一个操作列表，包括有加入购物车与提交订单，在跳转之前，系统会在后台获取到该物品的id信息，然后通过查询操作，然后展示到购物车页面。如果还需要购买物品，点击继续购物就可以，也可以选择下单结算，下单结算之后需要支付费用，完成之后则需要填写送货地址。如下图是购物车页面，当点击对应商品的选择框之后，总价才会进行相应的显示。

商品管理功能实现

管理员用户点击商品信息管理然后点击新增之后，页面会跳转到新增商品界面，需要填写商品的名称、选择商品类别等。这些信息填写正确之后，提交转到后台进行创建商品实例。注册用户查看网页中商品信息的时候，通过调取数据库的商品数据进行查看。在添加物品图片信息的时候，由于图片一般所占的内存较大，所以不放在数据库中，而是把图片的存放地址（也就是图片名）放到数据库中，使用的时候直接引用图片的url地址就可以了。

总结

系统的开发告一段落，在系统开发的过程，通过查找文献和资料，参照许多有关的案例逻辑思路及代码，实现了如今系统的基本功能。总体来看，系统是一款经济实用、功能简洁且易操作的系统，基本上是能够满足使用者需求的，也符合初始项目开发的目标。本文主要研究技术包括有html、css、js页面展示技术，java编程语言技术和MySQL对于数据库的管理等，JSP作为早期动态页面技术如今虽然在大型的企业级应用较少，所以本系统采用vue-cli技术实现前后台的分离，通过对vue组件的封装来提升系统拓展性和代码的整洁性。另外Java作为企业级应用服务器端语言长期占有较高的地位，这也是本系统使用java进行项目开发的原因。系统开发思路主要是考虑到越来越多的个人通过网络来购买商品。而通过这样一个简单的系统，用户只需要有一台上网的手机或者电脑，就可以实现畅快的“七匹狼皮带”商品购买体验。

系统还有一些功能是有待提升的，比如在页面显示上，主要是考虑PC端的使用，没有使用更灵活的前台代码，让页面显示技能满足PC端又能满足手机端的使用效果。其次，系统的界面设计有待提升，主要是由于前台的工作量较大，主要是为了实现功能为主，未来可以增加系统页面的美观度的开发；其次，系统的功能性不强，比如在会员用户在购买商品之后，如果有疑问不能够进行咨询，这一类的功能设定有待完善；最后对于数据库存储方面，这里为了操作方便，是缺少外键关联设置且加入了过多的属性，当然这样的好处是可以更方便的对数据进行处理，但是这样就给了数据的有效性和冗余性造成问题，而且系统存有大量的用户信息记录，可能会带来一定的数据风险，未来如果系统升级，可以进行该点的修改。