简介基于SpringBoot与Vue开发的健身房管理系统面向Java后端与Vue前端学习者、毕业设计学生聚焦健身房日常运营中的会员、课程、教练、设备、预约及财务管理等核心场景。项目采用前后端分离架构后端基于JavaSpringBootJDK1.8构建前端使用Vue数据库采用MySQL 5.7便于理解从数据建模、接口开发到页面联调的完整流程。压缩包共445个文件包含122个Java源码、46个Vue组件、SQL数据库脚本、Maven/XML/JS配置及界面静态资源包体约10.71MB目录结构清晰。资源附有数据库脚本与万字文档源码经过调试可正常运行支持远程调试、二次开发与项目讲解能帮助使用者快速部署和进行功能扩展。已有52人学习使用适合作为毕业设计选题、课程实训项目或SpringBootVue技术栈的综合练习具备较强的实践参考价值。1. 先看成色一个能跑起来的 gym 全栈项目值在哪我拿到这份源码包时最先注意到的是几个备份文件update-password.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak后面跟着1-install.bat、2-run.bat、3-build.bat。这种文件布局说明它不是随手导出的空模板而是一个基于 springboot vue 的前后端分离后台管理工程被人按健身房业务改过一轮改的时候还保留了备份。整套东西包含前端后端完整源码、mysql 数据库脚本和一份万字文档后端锁定 JDK1.8数据库建议 5.7和我这几年帮人调 springboot 毕设时常用的技术栈完全一致。对正在找 springboot vue 毕业设计素材的人或者想弄清楚会员管理、教练排课、预约和财务模块到底怎么落地的后端工程师这套代码都是一个能直接上手的对照物。2. 前后端分离下的健身房业务建模与表结构落点2.1 为什么 SpringBoot Vue 能在毕设场景里站得住这个项目不是老式 JSP 单体应用。根目录里有.classpath和mvnw.cmd说明它是标准 Maven 结构能被 Eclipse 或 IDEA 直接导入同时自带 Maven Wrapper环境里不装全局 Maven 也能通过mvnw.cmd构建。后端 SpringBoot 负责把业务以 REST 接口形式暴露在 8080 端口前端 Vue 开发服务器跑在独立端口通过 devServer 的 proxy 把/api前缀的请求转发到后端这样就实现了前后端分离。前后端分离的价值在调试阶段最明显。前端可以先用 mock 把页面排版和交互跑通后端用 Postman 或 curl 把接口调通两者通过接口文档对接不需要互相等待。对毕设项目来说这种结构还更容易在答辩时形成完整的表述链条数据库中一张表对应后端一个 Controller再对应前端一个页面评审老师顺着这条链路就能理解你的工作量。技术选型上JDK1.8 搭配 SpringBoot 2.x 是目前多数学校机器和云服务器都能稳定运行的下限稳定性和资料丰富度都不错。MySQL 5.7 作为开源关系型数据库对中小型管理系统已经足够重点是它的utf8mb4字符集能正确存储中文会员姓名和备注信息。Vue 端则比较灵活2.x 配 Element UI、3.x 配 Element Plus 都常见这款项目源码里保留了后台管理模板常见的布局文件说明前端是拿成熟后台模板改的组件间的关系比从零写的更好理解。提示如果你要在自己电脑上复现先确认本机java -version是 1.8再确认 MySQL 服务已启动否则后端会在一开始连接数据库时就抛异常退出。2.2 核心业务模块如何翻译成数据模型健身房系统的业务边界很清晰会员要办卡、上课、预约教练要维护自己的课程和档期设备要登记状态所有涉及钱的都要落到财务记录。把这些业务拆开核心表至少需要成员表、教练表、课程表、预约表、设备表和支付表。下面这段 SQL 是会员表和课程表的基础建表语句也是整个项目最常被检索到的部分CREATE TABLE member ( id BIGINT AUTO_INCREMENT PRIMARY KEY, member_no VARCHAR(32) NOT NULL COMMENT 会员编号, name VARCHAR(50) NOT NULL COMMENT 姓名, phone VARCHAR(20) DEFAULT NULL COMMENT 手机号, level TINYINT DEFAULT 1 COMMENT 会员等级1普通 2高级, expire_date DATETIME DEFAULT NULL COMMENT 会员到期时间, status TINYINT DEFAULT 1 COMMENT 1正常 0停用, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, KEY idx_phone (phone) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT会员表; CREATE TABLE course ( id BIGINT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL COMMENT 课程名称, coach_id BIGINT NOT NULL COMMENT 教练ID, start_time DATETIME NOT NULL COMMENT 上课时间, end_time DATETIME NOT NULL COMMENT 下课时间, capacity INT DEFAULT 10 COMMENT 预约容量, price DECIMAL(10,2) DEFAULT 0.00 COMMENT 课程价格, status TINYINT DEFAULT 1 COMMENT 1上架 0下架, KEY idx_coach_id (coach_id), CONSTRAINT fk_course_coach FOREIGN KEY (coach_id) REFERENCES coach(id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT课程表;会员编号单独用member_no而不是直接暴露自增主键是为了对外展示时有个稳定的业务编号也给后续导出 Excel、打印会员卡留下方便。expire_date用 DATETIME前端展示可以直接格式化后端判断过期也只需要和当前时间比较。课程表里的coach_id使用外键约束保证课程不会落到一个不存在的教练身上如果项目更注重写入性能也可以用普通索引替代外键业务里自行校验这个项目保留外键对毕设逻辑更友好。各表之间的关联关系可以整理成下面的结构表名关键字段关联关系memberid, member_no, phone, expire_date被 booking.member_id 关联一对多coachid, name, phone, specialty被 course.coach_id 关联一对多courseid, name, coach_id, start_time, end_time被 booking.course_id 关联一对多bookingid, member_id, course_id, status同时关联 member 和 courseequipmentid, name, maintenance_status被 equipment_repair 关联一对多paymentid, member_id, amount, pay_type关联 member记录缴费流水预约表booking是这个系统的枢纽它的member_id和course_id上都要建索引。会员在页面上看到课程列表点预约时后端先做一步容量判断SELECT COUNT(*) FROM booking WHERE course_id ? AND status 1如果预约人数已经等于course.capacity就直接返回“课程已满”。这一步在数据库层完成避免两个用户同时提交时超卖。金额字段一律用DECIMAL(10,2)不要用 FLOAT 或 DOUBLE。Java 侧接收也建议用BigDecimal否则会员续费、课程退款这类场景会出现 0.10.2 不等于 0.3 的精度问题。这个项目里所有涉及钱的地方都应该走payment表不要在member表里只放一个balance字段了事账单流水才是财务模块能讲清楚的重点。提示导入数据库脚本时如果报Cannot add foreign key constraint常见原因是 coach 表没有先建。这个项目里表创建顺序应该是 coach 在 course 之前报错时按依赖顺序重排即可。2.3 后端接口边界用 RESTful 把功能切成资源业务建模之后接口层要把这些资源切成可管理的小块。以会员管理为例后端一般是一个MemberController统一放在/api/member下RestController RequestMapping(/api/member) public class MemberController { GetMapping(/page) public Result page(RequestParam(defaultValue 1) Integer current, RequestParam(defaultValue 10) Integer size, RequestParam(required false) String name, RequestParam(required false) Integer status) { PageMember page memberService.pageQuery(current, size, name, status); return Result.ok(page); } GetMapping(/{id}) public Result getById(PathVariable Long id) { return Result.ok(memberService.getById(id)); } }/api/member/page用 GET 传current和size语义是“拿分页数据”/api/member/{id}用 GET 表示“查单条”。新增用 POST/api/member修改用 PUT/api/member/{id}删除用 DELETE/api/member/{id}。前端 Vue 页面里的新增、编辑、删除操作和后端接口方法一一对齐不会出现接口命名混乱。注意这里的分页参数用了current和size这是 MyBatis-Plus 分页模型的命名。前端如果习惯传pageNum、pageSize可以在 controller 入口做一次转换也可以在请求层直接用current。关键是前后端要统一否则接口调试时会出现第一页正常、翻页后数据错乱的表象。课程、教练、设备这些模块的接口结构可以完全复用这套模式列表加一个/page详情加/{id}写操作按 POST、PUT、DELETE 区分。财务模块建议单独划分到/api/payment不要把充值金额计算逻辑塞在会员更新接口里。后端接口清晰了前端页面开发就变成纯粹的按接口填表格这也是这类管理系统项目能快速完成的核心原因。3. SpringBoot 侧实现从 MyBatis-Plus 到 JWT 鉴权的落地3.1 ORM 选型与启动脚本的配合我拿到这种 springboot 后台项目通常会先看一眼pom.xml里的 ORM 依赖。常见做法是使用 MyBatis-Plus因为它的BaseMapper直接内置了单表 CRUD会员管理这类增删改查页面几乎不用写 XML。如果资源里用的是原生 MyBatis也能从mapper/*.xml看到对应 SQL写法会更啰嗦一点但排查问题反而更直观。假设你要自己搭同款加下面这个依赖dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.4.3.4/version /dependency版本选择要和 SpringBoot 2.x 保持匹配3.4.x 对 JDK1.8 支持很好如果你用 SpringBoot 3.x需要换成 mybatis-plus-spring-boot3-starter。引入依赖之后在启动类或配置类上加MapperScan(com.example.mapper)让 MyBatis-Plus 扫描到所有 mapper 接口这一步忘了配启动时必然会报找不到 bean。这个项目根目录里的三个批处理脚本正好对应管理系统常见的启动步骤脚本文件期望行为验证方式1-install.bat安装 Maven 依赖并编译窗口出现 BUILD SUCCESS2-run.bat启动 SpringBoot 服务控制台出现 Started Application3-build.bat打包前端并生成 dist前端目录出现 dist 文件夹这三个脚本本质上就是把mvn clean install、mvn spring-boot:run、npm install npm run build分别封装了一下。由于项目带了mvnw.cmd即使机器上没有全局 Maven也可以直接执行mvnw.cmd spring-boot:run启动后端这对换新电脑跑项目非常友好。我会在第一次运行时先打开1-install.bat因为它会把依赖拉全后面再跑后端不会在启动中途卡在下载依赖上。3.2 登录、Token 与权限控制健身房管理系统的后台通常有管理员和普通员工两类角色前端根据角色控制菜单显隐还不够后端接口必须做登录校验。最常见方案是 JWT用户登录成功后后端签发一个 token 返回给前端前端每次请求把 token 放在Authorization头里后端用拦截器统一校验。写一个拦截器并不复杂Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { try { Claims claims JwtUtil.parse(token.substring(7)); request.setAttribute(userId, claims.get(userId)); return true; } catch (Exception e) { response.setStatus(401); return false; } } response.setStatus(401); return false; } }这里先放行OPTIONS预检请求否则前端在跨域场景下会拿不到业务接口的响应。JwtUtil.parse负责解析并验证签名解析失败说明 token 过期或被篡改直接返回 401前端收到 401 后跳回登录页。需要告诉拦截器哪些路径放行在 WebMvcConfigurer 里注册registry.addInterceptor(jwtInterceptor) .addPathPatterns(/api/**) .excludePathPatterns(/api/login, /api/register, /error);这里把登录接口和 Swagger 静态资源排除掉其余/api/**全部走鉴权。如果你的系统要区分“管理员才能删除教练”可以在 Controller 方法前加上RequireRole(ADMIN)之类的自定义注解在拦截器里读取 token 中的role字段做二次判断对毕设来说拦截器加简单角色字段判断已经足够不必引入完整的 Spring Security 体系。提示JWT 的密钥不要写死在业务代码里放到 application.yml 的配置项中使用Value注入。换电脑调试时改配置文件比改代码要安全得多。3.3 分页查询多条件筛选以会员列表为例后台管理系统的列表页最常见的两个问题数据量大了之后加载慢多条件筛选组合出来结果不对。MyBatis-Plus 解决前者靠分页插件解决后者靠条件构造器。首先注册分页插件Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }然后 service 层这样写public PageMember pageQuery(Integer current, Integer size, String name, Integer status) { LambdaQueryWrapperMember wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(name), Member::getName, name) .eq(status ! null, Member::getStatus, status) .orderByDesc(Member::getCreateTime); return memberMapper.selectPage(new Page(current, size), wrapper); }selectPage会把current和size拼成LIMIT语句避免手写LIMIT (pageNum-1)*pageSize时算错下标。like第一个参数用StringUtils.hasText(name)意思是在 name 为空时不拼接 like 条件避免生成无意义的WHERE name LIKE %%。eq同理只在你真的传入 status 时才过滤。如果会员表有几十万条like查询无法用索引优化时要在 SQL 层面控制比如限制必须选择手机号或会员编号才能搜索。不过在这个管理系统中会员量级通常在万级以下idx_phone索引加order by create_time desc已经能保证首屏体验。注意分页插件默认不会优化多表 join 的 count 查询如果你把预约记录也 join 进来count 会慢常见做法是单独写 count 方法或者用子查询分页。4. Vue 侧实现路由守卫、Axios 封装与后台管理组件4.1 工程结构与路由懒加载源码包根目录里那几个.vue.bak文件不会是正式的页面文件而是作者改前端时留下的备份。这类后台管理系统的前端通常沿用了 vue-element-admin 的布局src/views下按业务模块建目录src/layout放整体框架。我在处理这个项目时会先把每个业务页面和接口对应关系列出来再进路由文件里把路径对齐。路由使用懒加载可以避免首屏把所有页面一次性加载const routes [ { path: /login, component: () import(/views/login/index.vue) }, { path: /dashboard, component: () import(/layout/index.vue), redirect: /member, children: [ { path: /member, name: Member, component: () import(/views/member/index.vue), meta: { title: 会员管理, requiresAuth: true } }, { path: /course, name: Course, component: () import(/views/course/index.vue), meta: { title: 课程管理, requiresAuth: true } } ] } ]component: () import(...)是动态 importwebpack 会把它拆成独立 chunk用户访问哪个页面才下载对应的 JS。meta.requiresAuth配合路由守卫可以统一拦截未登录状态router.beforeEach((to, from, next) { const token sessionStorage.getItem(token) if (to.meta.requiresAuth !token) next(/login) else next() })这里用sessionStorage而不是localStorage只要标签页关闭登录态就失效符合后台管理系统安全习惯。如果把路由做成动态菜单还要在登录后根据角色从后端拉一次菜单列表再用router.addRoute注册复杂度会高一些但基本逻辑不变。4.2 Axios 实例与 Token 注入Vue 页面里如果每个组件都单独import axios再写一遍请求头token 一变就要全局替换。更可控的做法是建一个utils/axios.js统一实例化 axios 并在拦截器里注入 tokenconst service axios.create({ baseURL: process.env.VUE_APP_BASE_URL || /api, timeout: 10000 }) service.interceptors.request.use(config { const token sessionStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) service.interceptors.response.use( res res.data, err { if (err.response err.response.status 401) { sessionStorage.removeItem(token) router.push(/login) } return Promise.reject(err) } )baseURL优先读环境变量VUE_APP_BASE_URL开发环境不配置时走/api由 vue.config.js 的 devServer 代理转发。请求拦截器把所有请求自动加上Bearer前缀与后端JwtInterceptor校验逻辑对应。响应拦截器只在遇到 401 时清 token 并跳登录其他错误仍然由每个页面的catch自行处理避免全部吞掉导致页面无提示。接下来我在开发时通常会顺手把接口地址整理成独立文件例如src/api/member.jsexport function getMemberPage(params) { return service.get(/member/page, { params }) } export function addMember(data) { return service.post(/member, data) }这样做的好处是页面组件只关心方法名后端接口改了只需集中修改 api 文件。会员、课程、预约、财务几个模块都适用这个模式不用在每个组件里重复写 URL。下面是本项目最常见的页面-接口对应关系前端页面接口路径请求方法会员列表/api/member/pageGET新增会员/api/memberPOST编辑会员/api/member/{id}PUT删除会员/api/member/{id}DELETE课程预约/api/bookingPOST缴费记录/api/payment/pageGET4.3 会员管理页面的增删改查会员管理是整个管理系统组件写法的缩影上方是搜索条件中间是表格右侧是新增/编辑弹窗。用 Element UI 的el-table渲染列表模板里只写数据绑定el-table :datalist border el-table-column propmemberNo label会员编号 width140 / el-table-column propname label姓名 width120 / el-table-column propphone label手机号 width160 / el-table-column propexpireDate label到期时间 / el-table-column label操作 width180 template slot-scopescope el-button sizemini clickopenForm(scope.row)编辑/el-button el-button sizemini typedanger clickremove(scope.row.id)删除/el-button /template /el-table-column /el-table表格的操作列用slot-scope拿到当前行数据点击编辑时把该行对象传入openForm。脚本部分的重点在请求顺序methods: { async fetchData() { const res await this.$http.get(/member/page, { params: { current: this.current, size: this.size, name: this.query.name } }) this.list res.data.records this.total res.data.total }, submitForm() { this.$refs.form.validate(async valid { if (!valid) return const { id } this.form if (id) { await this.$http.put(/member/${id}, this.form) } else { await this.$http.post(/member, this.form) } this.dialogVisible false this.fetchData() }) } }fetchData里一定要同时重置当前页到第一页否则在第三页筛选数据后接口返回第一页数据但 current 仍然是 3页面会出现空白。submitForm里通过id是否存在来决定走 PUT 还是 POST这就是后端 REST 接口设计中同一个资源两种操作的落地。删除操作我会在弹框确认后再调 DELETE避免误触删完之后同样要重新拉列表并且如果当前页只剩一条数据页码要回退一页这个细节很容易被忽略。前端遇到表单校验不通过时this.$refs.form.validate会走 reject页面没有错误提示。加一个catch(() {})或 loading 状态体验会好很多。修改密码这类独立页面也可以沿用update-password.vue的写法保存成功后强制重新登录防止旧 token 继续生效。5. 拿到 gym 管理系统代码后先做这三件事再谈改需求5.1 用批处理和 Maven Wrapper 把启动顺序理清楚源码包里的1-install.bat、2-run.bat、3-build.bat其实是三种不同生命周期的命令。我通常先导数据库再执行mvnw.cmd -DskipTests clean package打包后端最后单独跑前端 devServer。命令行方式比双击 bat 更可控mysql -uroot -p --default-character-setutf8mb4 gym.sql mvnw.cmd -DskipTests clean package java -jar target/gym-server.jar第一次最值得花时间的就是装依赖Maven 和 npm 任何一个源慢都会卡住。国内网络环境直接推荐在settings.xml配阿里云镜像前端用npm config set registry https://registry.npmmirror.com再跑npm install。后端起来后看到Started GymApplication再打开前端页面能少排很多时间。5.2 数据库脚本导不进去时看这三个参数导入数据库脚本失败绝大多数原因集中在三处字符集、表顺序、时区。脚本里建表统一用utf8mb4导入命令里加--default-character-setutf8mb4能避免中文乱码外键依赖表要先建教练表再生产课程表否则会报Cannot add foreign key constraint。后端配置数据库连接时常见写法是spring: datasource: url: jdbc:mysql://localhost:3306/gym?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 123456serverTimezoneAsia/Shanghai不配MySQL 8 驱动会报时区错误MySQL 5.7 同样建议加上统一时间和避免少 8 小时是小事但排查起来很费劲。5.3 前端代理和后端 context-path 对不上前端开发环境的接口请求默认走/api要确认vue.config.js里的 proxy 指向了后端实际端口同时后端server.servlet.context-path不要重复加了/api否则代理会把/api转发给后端后端又把/api/api当路径直接 404devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }验证代理是否生效最简单的方法是浏览器打开http://localhost:端口/api/member/page能返回 JSON 说明链路是通的。5.4 保留 .bak 文件当手动版本管理源码包里那几个.vue.bak是作者调试时留下的回滚点。我在改页面时也会保留一份.bak改崩了直接复制回来比 git revert 还快。等到系统稳定之后这些文件可以用一条命令清理清理前确认*.vue文件本身还在for %f in (*.vue.bak) do copy %f %~nf /y这条命令把.bak复制回原来文件反过来做大批量误操作恢复也够用。本文还有配套的精品资源点击获取