文章目录
-
前言
一、功能设计
二、功能实现
系统首页设计
系统前台基本功能设计与实现
编辑
系统后台管理功能设计与实现
三、库表设计
四、论文
前言
本文主要讲述了基于SpringBoot+Vue模式的街球社区网站的设计与实现。这里所谓的街球社区网站是通过类似于百度贴吧之类的网上论坛使得所有的街球爱好者有一个可以互相交流的平台,并使所有用户可以在社区进行教学视频的观看以及相关体育运动产品的选购,平台的盈利主要靠投放商家的广告以及商品买卖的分红。
从长期的发展目标来看,街球社区网站并不仅仅是对于体育商品和街球服务的推广,而是通过网络,使所有街球爱好者、体育用品的厂商及其他的合作伙伴可以紧密联系在一起,这也是互联网+时代发展的必由之路。街球社区网站的最终目标是将此模式发展成一种社会趋势,使得其他行业也可以效仿,亦或是我们可以进行其他网站的制作以此实现最大的社会价值。
街球社区网站提供了多种功能,街球爱好者们可以在社区上面互相交流,也可以观看近期精彩的街球视频,更可以在网站上购买相关的体育用品,诸如篮球鞋、护具等。与传统的网商相比,街球社区能够提供精准的投放,大大节省宣传成本。
一、功能设计
街街球社区网站总体上分为前台和后台,前台和后台独立存在但又相辅相成,前后台访问的是同一个数据库,但是所访问的数据库对象不同。
前台系统功能模块分为
(1)帖子展示模块:按照更新时间或浏览量来显示帖子列表。
(2)视频展示模块:显示街球视频并提供下载功能。
(3)用户信息管理模块:按照相关的法律法规,管理用户信息。
(4)购物车模块:用户可以将想购买的商品添加到购物车。
(5)收银台模块:对购物车中的商品结账。
(6)订单查询模块:用户可以查看当前订单的状态。
(7)论坛公告模块:用户通过公告了解社区最新动态。
后台系统功能模块分为
(1)帖子管理模块:管理员按照国家网络安全的相关规定,可以对帖子及其发帖人进行相关处理。
(2)用户管理模块:管理员可以对会员信息进行维护。
(3)管理员管理模块:可以修改管理员的信息。
(4)订单管理模块:管理员拥有一定的权限可以查询异常的订单资料并对其进行处理。
(5)公告管理模块:管理员拥有一定的权限可以处理公告信息。
二、功能实现
系统首页设计
街球社区网站的首页面采用了最简单的上中下结构，头部为导航菜单。中间部分的左侧可以进行用户的注册登录以及公告浏览、户籍列表展示，右侧为迁入信息的管理。网站尾部是版权信息级作者联系方式等。
界面设计如图5-1所示。
图5-1 系统首页
系统前台基本功能设计与实现
登录注册模块设计与实现
用户点击注册后会进入注册页面,界面的设计如图5-2所示。注册时需要用户填写必要的信息,比如用户名密码、真实姓名、QQ和邮箱等。此外,用户的QQ在数据库中设置为唯一,一个QQ号只能注册一个用户,论坛中如果相互添加好友,则用户的QQ将作为公开信息方便各个用户之间的互相交流。
用户注册页面有严格的表单验证,如果不符合格式规则是无法成功进行注册的。所有验证通过之后用户的信息会被添加至数据库中的用户信息表。
图5-2 用户注册页面
用户注册需要的表单
| 名称 | 类型 | 含义 |
| userName | Text | 输入用户名称 |
| password | Password | 输入密码 |
| passwordOne | Password | 输入确认密码 |
| userRealname | Text | 输入真实姓名 |
| userAddress | Text | 输入住址 |
| userSex | radio | 选择性别 |
| userTel | Text | 输入联系方式 |
| | Text | 输入E-mail地址 |
| 确定 | Button | 提交用户信息 |
| 取消 | Button | 取消注册 |
登录和验证
（1）用户登录程序流程描述
用户注册完成拥有了自己的帐号之后可以进入登录页面。在文本框中填写自己的用户名和密码，如果数据库中存在相匹配的信息就能成功登录，否则会提示 帐号或密码错误，提示完会清空文本框的值。这个功能的流程图如下图所示。
图5-3 用户登录程序流程图
用户修改和注销
用户成功登陆之后可以修改自己的资料，修改时可以将除用户名之外的资料都进行修改，不过有一个限制那就是每个月只能修改一次，以防帐号被恶意修改。修改信息填写完成之后如果可以正确通过验证，用户的资料就可以被更新到用户表中。
界面的设计如图5-5所示。
图5-5 用户修改模块
此外，为了最大程度上提升用户体验感又不会威胁用户帐号安全的前提下，网站可以在不关闭浏览器的情况下进行用户的退出店系统的功能，原理是将登录时存储的session信息清除掉。
页面设计如表5-4所示。
表5-4 用户修改主要控件信息列表
| 名称 | 类型 | 含义 |
| userName | Text | 输入用户名称 |
| password | Password | 输入密码 |
| passwordOne | Password | 输入确认密码 |
| userRealname | Text | 输入真实姓名 |
| userAddress | Text | 输入住址 |
| userSex | radio | 选择性别 |
| userTel | Text | 输入联系方式 |
| | Text | 输入E-mail地址 |
| 确定 | Button | 提交用户信息 |
| 取消 | Button | 取消注册 |
帖子与商品展示模块设计与实现
此外，为了方便用户在逛论坛时点击社区内的精准推送链接进行购物,本论坛的帖子与商品都设计了两种浏览方式:
第一种为按照类别进行浏览,第二种比较常用,是按照排行榜进行浏览,比如按照帖子或商品的浏览量或收藏量去浏览。
购物车模块的设计与实现
当用户在浏览论坛时看到自己心意的商品后,可以将商品添加至购物车等待购买。当然如果后悔了又不想买了,也随时可以将购物车中的商品移除出去;如果想要支付则可以直接点击确认支付按钮进行结账。
此模块的最核心功能就是将商品添加至购物车与结账功能。购物车的主要功能是:用户在浏帖子时可以将帖子中的商品添加到购物车里,添加到购物车中的商品用户可以对其进行管理,比如说自己想购买多件,就可以点击数量栏增加数量或减少数量等。购物车模块的难点个人认为就是最终价格的计算,因为数据会一直变换,涉及到的计算会比较多。
收银台模块的设计与实现
在购车中确定自己想要购买的商品后,首先要确认商品的数量与价格,确认无误之后会进入订单填写的步骤,用户要填写自己真实的收货信息,比如姓名、邮政编码、收货地址、联系电话等。
填写完这些信息之后,最终进入到收银台页面,用户可以选择自己喜欢和方便的支付方式为商品买单。本网站支持银联在线支付、各种App支付等。
收银台主要控件信息列表：
userName Text 收货人账号
userRealname Text 收货人姓名
userTel Text 收货人联系电话
userAddress Text 收货人地址
odderSonghuodizhi Text 送货住址
查看订单模块的设计与实现
用户填写完自己的收件信息如地址、邮编、电话号码后,订单就会生成,用户也可以在订单查询页面查看自己的订单的最新动态。
公告管理模块的设计与实现
街球社区网站的公告模块主要显示网站的重要维护信息以及重点的通告,比如网站的新规则新规定等。还可以将网站的最新活动推送给广大用户,这样也可以吸引更多没有注册的用户在网站进行注册。
系统后台管理功能设计与实现
街球社区网站的后台管理模块主要包括:用户信息的管理、管理员信息的管理、商品信息的管理、订单信息的管理、公告信息的管理等。这些基本信息的管理主要是连接数据库可进行数据的操作,比如在表单内提交用户注册或登录的信息后,数据库要立即将表中的数据进行更新。更新之后才能更及时更准确的显示在数据显示页面上。
街球社区网站的订单信息管理模块是对用户订单信息以及订单详细信息的管理。当用户购买商品之后,会在数据库中更新两个表的信息。首先第一个更新的是订单表,订单表中会将用户的信息,下单日期,订单状态进行显示;第二个更新的表是订单详细表,这个表会与第一个表用外键进行关联,这个表中更新的数据更加详细,比如有商品的名字、数量和价格等。
商品管理模块除了对商品的描述,价格等信息的显示之外,还可以上传商品的图片,使用户可以更加了解真实商品的样子。除此之外,管理员还可以进行活动的设置,比如特价活动、促销优惠等,还可以将各种活动以及商品的排行榜放到页面最显眼的位置去引流。
各大论坛或者大型的网站上甚至是政务部门或者学校部门的官网上都会有公告信息栏,这个模块主要是让管理员发布一些网站的规定,或者是一些新的活动去吸引更多的用户来到我们社区网站。
三、库表设计
下面详细介绍下本系统的数据表：
1．商品表
表4-1 t_goods（户籍信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | goods _id | 商品编号 | Int | 4 |
| 2 | goods _name | 商品名 | varchar | 50 |
| 3 | goods _miaoshu | 商品描述 | varchar | 5000 |
| 4 | goods _pic | 商品图片 | varchar | 50 |
| 5 | goods _address | 商品地址 | varchar | 50 |
2. 商品类别表
表4-2 t_category（商品类别表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | category _id | 类别编号 | Int | 4 |
| 2 | category _name | 类别名称 | Varchar | 50 |
| 3 | category _miaoshu | 类别描述 | Varchar | 5000 |
3. 订单表
表4-3 t_order（订单信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | order _id | 订单ID | Int | 4 |
| 2 | order _bianhao | 订单编号 | Varchar | 50 |
| 3 | order _date | 订单生成日期 | varchar | 50 |
| 4 | order _zhuangtai | 订单状态 | varchar | 50 |
4．订单明细信息表
表4-4 t_orderItem（订单明细信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | baoxiu _id | 订单明细编号 | Int | 4 |
| 2 | baoxiu _id | 订单编号 | Int | 4 |
| 3 | baoxiu _nr | 订单内容 | Int | 4 |
| 4 | baoxiu _pingjia | 订单评价 | Int | 4 |
5．用户信息表
表4-5 t_user（用户信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | user_id | 用户ID | Int | 4 |
| 2 | user_name | 用户名 | Varchar | 50 |
| 3 | user_pw | 用户密码 | Varchar | 50 |
| 4 | user_realname | 真实姓名 | Varchar | 50 |
| 5 | user_address | 住址 | Varchar | 50 |
| 6 | user_sex | 性别 | Varchar | 50 |
| 7 | user_tel | 联系电话 | Varchar | 50 |
| 8 | user_email | 用户邮箱 | Varchar | 50 |
| 9 | user_qq | 用户QQ | Varchar | 50 |
6.管理员信息表
表4-6 t_admin（管理员信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | userId | 管理员ID | int | 4 |
| 2 | userName | 管理员名称 | Varchar | 50 |
| 3 | userPw | 管理员密码 | Varchar | 50 |
7.公告信息表
表4-7 t_gonggao（公告信息表）
| 序号 | 名称 | 别名 | 类型 | 长度（字符） |
| 1 | gonggao_id | 公告编号 | Int | 4 |
| 2 | gonggao_title | 公告标题 | Varchar | 50 |
| 3 | gonggao_content | 公告内容 | Varchar | 5000 |
| 4 | gonggao_data | 公告创建时间 | Varchar | 50 |
| 5 | gonggao_fabuzhe | 发布人 | Varchar | 50 |
四、论文
