基于springboot+vue实现的KPL比赛网上售票系统 （源码+L文+ppt）4-068
4.2 系统结构设计
架构图是系统的体系结构，体系结构是体系结构体系的重要组成部分。KPL比赛网上售票系统的总体结构设计如图4-2所示。
图4-2 系统总体架构图
4.3数据库设计
在电脑资讯系统中，以资料库为基础。当前计算机体系中最重要的是数据库。数据库的发展好坏，直接关系到整个系统的性能与运行效率。
4.3.1 数据库设计原则
利用 ER模式进行数据库的概念结构设计。E-R模型法的组成元素有：实体、属性、联系，E-R模型用E-R图表示，是一个关于工作环境中的事件的信息，而一个属性是关于物理特征的说明。在系统的设计过程中，资料库发挥了关键作用。下面设计出这几个关键实体的实体—关系图；本系统主要E-R实体如图4-3所示：
图4-3系统主要E-R实体图
4.3.3 数据库表设计
KPL比赛网上售票系统有一个内部数据库。对于数据库系统设计一般基于对我国现有数据库系统进行优化管理的操作系统。通常广泛采用的数据库资源管理软件系统主要类型包括mysqlserver、mysql、oracle等。该管理系统主要采用了mysql大型数据库资源管理软件。
下表将详细列出KPL比赛网上售票系统的数据库中所有列表。每一份量表的设计成果列出数据库的表信息属于设计的一部分，下面介绍数据库中的各个表的详细信息。
表4-1：比赛信息
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint |
| 主键 | 主键 |
|
| addtime | timestamp |
| 创建时间 |
| CURRENT_TIMESTAMP |
| bisaimingcheng | varchar | 200 | 比赛名称 |
|
|
| bisaisaicheng | varchar | 200 | 比赛赛程 |
|
|
| saishijianjie | longtext | 4294967295 | 赛事简介 |
|
|
| saishitupian | longtext | 4294967295 | 赛事图片 |
|
|
| bisaididian | varchar | 200 | 比赛地点 |
|
|
| bisaishijian | datetime |
| 比赛时间 |
|
|
| discussnum | int |
| 评论数 |
| 0 |
| price | double |
| 价格 |
|
|
| storeupnum | int |
| 收藏数 |
| 0 |
| number | int |
| 座位总数 |
|
|
| selected | longtext | 4294967295 | 已选座位[用,号隔开] |
|
|
表4-2：用户
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint |
| 主键 | 主键 |
|
| addtime | timestamp |
| 创建时间 |
| CURRENT_TIMESTAMP |
| yonghuzhanghao | varchar | 200 | 用户账号 |
|
|
| xingming | varchar | 200 | 姓名 |
|
|
| mima | varchar | 200 | 密码 |
|
|
| xingbie | varchar | 200 | 性别 |
|
|
| shouji | varchar | 200 | 手机 |
|
|
| touxiang | longtext | 4294967295 | 头像 |
|
|
| money | double |
| 余额 |
| 0 |
表4-3：管理员表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint |
| 主键 | 主键 |
|
| username | varchar | 100 | 用户名 |
|
|
| password | varchar | 100 | 密码 |
|
|
| image | varchar | 200 | 头像 |
|
|
| role | varchar | 100 | 角色 |
| 管理员 |
| addtime | timestamp |
| 新增时间 |
| CURRENT_TIMESTAMP |
表4-4：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-5：收藏表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| 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 |
| inteltype | varchar | 200 | 推荐类型 |
|
|
| remark | varchar | 200 | 备注 |
|
|
表4-6：订单
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint |
| 主键 | 主键 |
|
| addtime | timestamp |
| 创建时间 |
| CURRENT_TIMESTAMP |
| orderid | varchar | 200 | 订单编号 |
|
|
| tablename | varchar | 200 | 商品表名 |
| bisaixinxi |
| 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 | 收货人 |
|
|
| remark | varchar | 200 | 备注 |
|
|
| sfsh | varchar | 200 | 是否审核 |
|
|
| shhf | longtext | 4294967295 | 审核回复 |
|
|
| role | varchar | 200 | 用户角色 |
|
|
表4-7：通知公告分类
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint |
| 主键 | 主键 |
|
| addtime | timestamp |
| 创建时间 |
| CURRENT_TIMESTAMP |
| typename | varchar | 200 | 分类名称 |
|
|
表4-8：通知公告
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| 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-9：论坛交流
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| 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-10：比赛信息评论表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| 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-11：配置文件
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint |
| 主键 | 主键 |
|
| name | varchar | 100 | 配置参数名称 |
|
|
| value | varchar | 100 | 配置参数值 |
|
|
| url | varchar | 500 | url |
|
|
4.4 系统时序图
对于系统设计的详细描述主要采用了时序图的方式，时序图描述了对象之间传递消息的时间顺序, 用来表示用例中的行为顺序, 是强调消息时间顺序的交互图; 时序图描述的事物: 时序图描述系统中类和类之间的交互, 将这些交互建模成消息交换, 时序图描述了类以及类之间的交换以完成的期望行为的消息, 时序图中每条消息都代表了类的一个操作或者引起状态机改变的触发事件。
5 系统的实现
5.1前台功能实现
5.1.1系统首页页面
当人们打开系统的网址后，首先看到的就是首页界面。在这里，人们能够看到系统的导航条，通过导航条导航进入各功能展示页面进行操作。系统首页界面如图5-1所示：
图5-1 系统首页界面
在注册流程中，用户在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息，检查用户名是否唯一，并将新用户数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知用户完成注册。这个过程实现了新用户的数据收集、验证和存储。系统注册页面如图5-2所示：
图5-2系统注册页面
比赛信息：在比赛信息页面的输入栏中输入比赛名称和价格进行查询，可以查看到比赛详细信息，并进行立即预订、选座、评论或收藏操作；比赛信息页面如图5-3所示：
图5-3比赛信息详细页面
5.1.2个人中心
个人中心：在个人中心页面可以对个人中心、修改密码、我的发布、我的订单和我的收藏进行详细操作；如图5-4所示：
图5-4个人中心界面
我的订单：在我的订单页面的可以对未支付、已支付、已完成、已退款和已取消订单进行详细操作；我的订单页面如图5-5所示：
图5-5我的订单详细页面
5.2后台管理员功能实现
在登录流程中，用户首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证用户凭证。如果认证成功，后端返回给前端，允许用户访问系统。这个过程涵盖了从用户输入到系统验证和响应的全过程。管理员登录界面图5-6所示。
图5-6 管理员登录界面
管理员进入主页面，主要功能包括对系统首页、个人中心、用户管理、比赛信息管理、论坛交流、系统管理、订单管理等进行操作。管理员主页面如图5-7所示：
图5-7管理员主界面
用户管理功能在视图层（view层）进行交互，比如点击“查询、添加或删除”按钮或填写用户表单。这些用户表单动作被视图层捕获并作为请求发送给相应的控制器层（controller层）。控制器接收到这些请求后，调用服务层（service层）以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层）交互，后者负责具体的数据操作如查看、修改或删除用户信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便用户功能可以看到最新的信息或相应的操作反馈。用户界面如图5-8所示：
图5-8用户管理界面
比赛信息管理功能在视图层（view层）进行交互，比如点击“查询、添加或删除”按钮或填写比赛信息表单。这些比赛信息表单动作被视图层捕获并作为请求发送给相应的控制器层（controller层）。控制器接收到这些请求后，调用服务层（service层）以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层）交互，后者负责具体的数据操作如查看、修改、查看评论或删除比赛信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便比赛信息功能可以看到最新的信息或相应的操作反馈。比赛信息管理界面如图5-9所示：
图5-9比赛信息管理界面
管理员点击交流论坛，在交流论坛界面输入帖子标题进行查询、添加或删除交流论坛列表，并根据需要对交流论坛详情信息进行查看、修改、查看评论或删除操作；如图5-10所示：
图5-10交流论坛界面
管理员点击系统管理，在通知公告界面输入标题进行查询、添加或删除通知公告列表，并根据需要对通知公告详情信息进行查看、修改或删除操作；还可以对轮播图管理和通知公告分类进行详细操作；如图5-11所示：
图5-11系统管理界面
管理员点击订单管理，在已完成订单界面输入订单编号和商品名称进行查询或删除已完成订单列表，并根据需要对已完成订单详情信息进行查看或删除操作；还可以对已取消订单、已退款订单、未支付订单和已支付订单进行详细操作；如图5-12所示：
图5-12订单管理界面