基于SpringBoot+vue的体育馆使用预约平台

1. 演示地址

后台：http://tiyuguan.xiaobias.com/tiyuguan/admin/dist/index.html
前台：http://tiyuguan.xiaobias.com/tiyuguan/front/index.html
管理员：admin/admin
用户：a1/123456、a2/123456
资源：https://fifteen.xiaobias.com/source/144

2. 项目简介

体育馆使用预约平台是一个基于Web的在线预约系统，主要提供体育场地的查询、预约和管理服务。该系统分为前台用户界面和后台管理界面，用户可以在线查看场地信息、预约场地、参与论坛讨论，管理员可以管理场地信息、处理预约订单、发布公告等。

核心功能：

• 场地信息展示与查询
• 在线预约系统
• 用户收藏管理
• 论坛交流功能
• 公告信息发布
• 后台数据管理

3. 技术栈

后端技术

• 核心框架: Spring Boot 2.2.2.RELEASE
• 持久层: MyBatis Plus 2.3
• 数据库: MySQL 5.7
• 安全框架: Apache Shiro 1.3.2
• 工具库: Hutool 4.0.12, FastJson 1.2.8
• 模板引擎: Thymeleaf

前端技术

• 后台管理: Vue + Element UI
• 前台展示: Layui + jQuery
• 图标处理: SVG Icons
• 幻灯片: Swiper
• 地图服务: 高德地图API

开发工具

• 项目管理: Maven
• 数据库管理: SQLyog

4. 详细介绍

4.1 系统架构

本项目采用典型的前后端分离架构，后端提供RESTful API接口，前端通过Ajax调用接口获取数据并渲染页面。

4.2 数据库设计

系统包含多张核心数据表：

4.2.1 主要数据表结构

• changdi(场地表)：存储场地基本信息、价格、时间段等
• changdi_order(场地预约表)：记录用户预约信息
• yonghu(用户表)：存储用户账户信息
• gonggao(公告表)：管理系统公告信息
• forum(论坛表)：存储用户发帖和回帖信息
• dictionary(字典表)：管理系统各类分类数据

4.2.2 表关系设计

场地与预约是一对多关系，用户与预约是一对多关系，通过外键关联确保数据一致性。

4.3 功能模块

4.3.1 用户模块

• 用户注册/登录
• 个人信息管理
• 场地收藏功能
• 预约记录查询

4.3.2 场地模块

• 场地信息展示
• 多条件筛选查询
• 场地详情查看
• 在线预约功能

4.3.3 预约模块

• 时间段选择
• 价格计算
• 预约状态管理
• 订单取消功能

4.3.4 论坛模块

• 发帖/回帖功能
• 帖子分类
• 内容管理

4.3.5 后台管理

• 场地信息管理
• 用户管理
• 订单管理
• 公告管理
• 数据统计

5. 部分代码

5.1 后端实体类示例

// 场地实体类对应数据库表@Entity@Table(name="changdi")publicclassChangdi{@Id@GeneratedValue(strategy=GenerationType.IDENTITY)privateIntegerid;privateStringchangdiUuidNumber;// 场地编号privateStringchangdiName;// 场地名称privateStringchangdiPhoto;// 场地照片privateIntegerchangdiTypes;// 场地类型privateBigDecimalchangdiOldMoney;// 原价privateBigDecimalchangdiNewMoney;// 现价privateStringshijianduan;// 时间段privateIntegershijianduanRen;// 人数privateIntegerchangdiClicknum;// 点击次数privateIntegerbanquanTypes;// 半全场类型privateIntegershangxiaTypes;// 上下架状态privateStringtuijian;// 推荐吃饭地点privateIntegerchangdiDelete;// 逻辑删除privateStringchangdiContent;// 场地简介privateDatecreateTime;// 创建时间// getters and setters}

5.2 MyBatis XML映射文件片段

<!-- 场地查询映射配置 --><selectid="selectListView"parameterType="map"resultType="com.entity.view.ChangdiView">SELECT<includerefid="Base_Column_List"/>FROM changdi a<where><iftest="params.changdiName !=''and params.changdiName != null">and a.changdi_name like CONCAT('%',#{params.changdiName},'%')</if><iftest="params.changdiTypes != null and params.changdiTypes !=''">and a.changdi_types = #{params.changdiTypes}</if><iftest="params.shangxiaTypes != null and params.shangxiaTypes !=''">and a.shangxia_types = #{params.shangxiaTypes}</if></where>order by a.${params.orderBy} desc</select>

5.3 前端Vue组件示例

// 场地列表Vue组件Vue.component('changdi-list',{template:`<div class="recommend index-pv3"> <div class="box" style='width:80%'> <div class="title main_backgroundColor"> <span>DATA SHOW</span> <span>场地展示</span> </div> <div class="list"> <div v-for="(item,index) in changdiList" :key="index" @click="jump('../changdi/detail.html?id='+item.id)" class="list-item"> <div class="list-item-body animation-box"> <img class="sub_borderColor" :src="item.changdiPhoto?item.changdiPhoto.split(',')[0]:''" alt=""/> <div class="name">{{item.changdiName}}</div> </div> </div> </div> </div> </div>`,props:['changdiList'],methods:{jump(url){window.location.href=url;}}});

5.4 预约业务逻辑代码

// 预约场地服务层方法@ServicepublicclassChangdiOrderService{@AutowiredprivateChangdiOrderDaochangdiOrderDao;@AutowiredprivateYonghuDaoyonghuDao;@AutowiredprivateChangdiDaochangdiDao;@TransactionalpublicvoidaddOrder(ChangdiOrderEntityorder){// 验证用户余额YonghuEntityuser=yonghuDao.selectById(order.getYonghuId());ChangdiEntitychangdi=changdiDao.selectById(order.getChangdiId());if(user.getNewMoney().compareTo(changdi.getChangdiNewMoney())<0){thrownewRuntimeException("用户余额不足");}// 扣除用户余额user.setNewMoney(user.getNewMoney().subtract(changdi.getChangdiNewMoney()));yonghuDao.updateById(user);// 生成订单号order.setChangdiOrderUuidNumber(String.valueOf(System.currentTimeMillis()));order.setInsertTime(newDate());order.setCreateTime(newDate());// 保存订单changdiOrderDao.insert(order);}}

6. 部分截图

7. 项目总结

体育馆使用预约平台是一个功能完备的在线预约系统，具有以下特点：

7.1 技术亮点

1. 采用前后端分离架构，提高开发效率和系统可维护性
2. 使用MyBatis Plus简化数据库操作，提高开发效率
3. 实现完整的权限管理系统，保证数据安全
4. 响应式前端设计，适配多种设备访问
5. 模块化设计，便于功能扩展和维护

7.2 业务价值

1. 为体育馆提供数字化管理解决方案
2. 方便用户在线查询和预约场地，提升用户体验
3. 减少人工管理成本，提高场地利用率
4. 通过论坛功能增强用户粘性和社区活跃度

该项目展示了如何将传统体育场馆业务与现代Web技术相结合，实现了业务流程的数字化和自动化，具有良好的实用性和推广价值。