当前位置：首页 > news >正文

Spring Boot 3 + Vue 3 + MySQL 乒乓球室管理系统源码前后端分离项目实战

news 2026/7/12 11:35:10

一、项目简介

本系统是一套基于 Spring Boot 3 + Vue 3 前后端分离架构的乒乓球室综合管理平台，覆盖场地预约、器材租用、订单支付、报损处理、公告发布及数据统计等核心业务。系统采用前后端分离架构，后端提供 RESTful API，前端通过 Axios 调用接口并渲染页面。系统包含普通用户端和管理员端两大角色，用户可在线预约场地、租用器材并查看订单与公告；管理员则负责场地、器材、订单、租用申请、报损、用户及公告的全流程管理。

二、技术栈

技术	说明
后端框架	Spring Boot 3
ORM	MyBatis-Plus（含逻辑删除、自动填充）
权限	无框架级权限，角色由前端路由控制
前端框架	Vue 3（Composition API + setup 语法）
状态管理	无 Pinia/Vuex，使用组件内局部状态
构建工具	Vite
数据库	MySQL 8
前端 UI 库	Element Plus
路由	Vue Router（createWebHistory）
HTTP 客户端	Axios（通过 request 工具封装）
跨域	后端 CorsConfig 允许 localhost:3000
文件上传	MultipartFile → 本地 uploads 目录

三、功能模块

管理员端

数据统计面板：查看系统整体运营概览，作为管理后台默认首页，可扩展为统计图表展示。
场地管理：新增、编辑、删除场地，字段包括名称、位置、价格、描述、状态；支持查看场地列表。
维护管理：查看所有维护记录（关联场地名称/位置）；按场地ID查询维护记录；新增维护记录时自动将场地状态设为“维护中”；完成维护时自动恢复场地为“可用”；删除维护记录时自动检查并恢复场地状态。
器材管理：新增、编辑、删除器材，字段包括名称、类型、总库存、可用库存、价格、描述、图片；支持更新器材状态。
订单管理：查看所有订单（场地预约、器材租金、报损赔偿三类），展示关联的场地/器材详情；支持更新订单支付状态。
租用管理：查看所有器材租用申请（含用户ID、器材名称、数量、状态）；审核申请（通过/拒绝），通过时自动扣减器材库存；查看租用记录详情。
报损管理：查看所有报损记录（器材名称、用户、原因、赔偿金额）；处理报损时输入赔偿金额，金额大于0时自动生成赔偿订单。
用户管理：查看所有用户列表（隐藏密码）；新增、编辑用户（校验用户名唯一性）；删除用户。
公告管理：新增、编辑公告（标题、内容、状态：草稿/已发布）；发布公告（草稿转为已发布并记录发布时间）；撤回公告（已发布转为草稿，清除发布时间）；删除公告（逻辑删除）；按标题/内容/状态搜索公告。

普通用户端

注册新账号：填写用户名、密码、姓名、手机号完成注册，系统校验用户名唯一性。
登录系统：通过用户名和密码登录，支持普通用户与管理员角色切换。
查看场地列表：浏览所有乒乓球场地信息，包括名称、位置、单价、状态、描述。
预约场地：选择场地、预约日期、开始/结束时间，系统自动校验时间冲突（重叠时段不可预约）。
查询场地可用性：输入场地ID、日期、时间段，实时返回该时段是否可预约。
查看已预约时段：按场地和日期查询已被预约的时间段列表（排除已取消的预约）。
查看我的租用申请：按用户ID查看所有器材租用申请记录及状态（待审核/租用中/已归还/已拒绝）。
提交器材租用申请：选择器材、填写数量、预计归还日期，提交后等待管理员审核。
归还器材：对状态为“租用中”的租用记录发起归还，系统自动恢复器材库存并生成租金订单。
提交报损申请：对损坏的器材提交报损单，填写器材ID、损坏原因，等待管理员处理。
查看报损记录：查看本人提交的报损列表及处理状态（待处理/已处理）。
查看我的订单：按用户ID查看所有订单（场地预约订单、器材租金订单、报损赔偿订单），含关联的场地/器材详情。
查看公告列表：浏览管理员发布的公告（标题、内容、发布时间）。
查看订单剩余支付时间：对未支付的场地预约订单，查看距离超时（5分钟）的剩余秒数。

四、项目总结

本系统技术亮点在于使用 Spring Boot 3 + Vue 3 最新版本构建前后端分离项目，搭配 MyBatis-Plus 实现高效数据操作与逻辑删除；业务逻辑覆盖场地预约、器材租用、报损处理等完整闭环，且包含自动状态变更与订单生成机制。系统结构清晰、接口规范，适合作为 Java 全栈课程设计、毕业设计或乒乓球场馆管理类项目的学习与二次开发参考。