基于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 技术亮点

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

7.2 业务价值

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

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

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