ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Spring Boot+Vue停车场系统毕设实战指南

Spring Boot+Vue停车场系统毕设实战指南 简介本资源是一套面向高校计算机专业毕业生的完整停车场管理系统毕业设计源码聚焦城市停车管理痛点融合Java Spring Boot后端与Vue.js前端技术栈实现车辆进出、费用计算、车位预约、用户管理及数据分析等核心功能。资源包共416个文件含99个Java后端业务逻辑与控制器代码、41个Vue组件页面如IndexMain.vue、BreadCrumbs.vue等、21个JS工具脚本、161个SVG图标资源以及MySQL建表SQL、application.yml配置、bat启动脚本和完整说明文档压缩包仅12.56MB轻量易部署。已有97人学习下载适合JavaVue初学者系统掌握前后端分离开发流程快速复现可运行项目。读者可直接导入IDE运行全栈服务结合源码理解Spring Boot自动配置、MyBatis数据交互、Vue路由与状态管理并通过配套文档厘清数据库设计、模块划分与LunW论文/报告撰写逻辑具备教学参考与工程实践双重价值。1. 为什么一个「超时代停车场管理平台」毕业设计能卡住90%的JavaVue新手这不是一个炫技的Demo而是一套真实可跑、带完整业务闭环的停车管理系统车辆入场自动识别模拟、车位状态实时更新、月租/临时车计费逻辑、管理员工单审核、微信扫码支付对接模拟、报表导出、权限分级——全部用 Spring Boot Vue MySQL 实现且源码结构清晰、注释到位、数据库脚本可直接执行。它不是教你怎么写“Hello World”而是教你如何把「用户扫码进场→系统分配空位→计费引擎启动→生成账单→导出Excel」这条链路在本地环境一气呵成跑通。适合两类人一是计算机专业大四学生赶毕设 deadline需要可交付、可答辩、可演示的完整工程二是刚转行的 Java 或前端新人想用一个有真实业务厚度的项目练手——它不追求高并发或微服务拆分但每层都踩在企业开发的真实节奏上Controller 层做参数校验和 DTO 转换、Service 层封装事务与业务规则、Mapper 层用 MyBatis-Plus 避免 SQL 手写、Vue 用 Composition API Pinia 管理状态、路由按角色动态加载、Axios 封装统一错误拦截。你不需要懂 Kafka 或 Redis就能靠这套代码理解「一个功能从点击按钮到数据落库」的全链路。2. 搭建前必做的三件事环境版本对齐、目录结构解剖、数据库初始化2.1 Spring Boot 和 Vue 版本怎么选别被“最新版”坑了标题里没写具体版本但根据当前主流教学实践和该类毕设项目的稳定需求Spring Boot 2.7.18兼容 JDK 8/11 Vue 3.2.47基于 Vite 4.5 构建是实测最稳组合。为什么不是 Spring Boot 3.x因为 3.x 默认要求 JDK 17且移除了spring-boot-starter-web中的javax.servlet包大量毕设教程、MyBatis-Plus 3.5.x 插件、甚至部分国产中间件 SDK 还未完全适配强行升级会导致RequestBody解析失败、PageHelper分页异常、Swagger UI 白屏等玄学问题。Vue 为何不选 3.4Vite 5.x 对 Node.js 20 依赖过强而很多学生机仍装着 Node 16.xVite 4.5 在 Node 16.14 上零报错。提示检查你的 JDK 版本java -versionNode 版本node -v若 JDK 是 17请手动降级到 11推荐 OpenJDK 11.0.22或改用 Spring Boot 2.7.18 —— 这是本项目真正落地的基线。2.2 解压后先看这 4 个关键目录别急着 run拿到.zip后解压看到的典型结构如下已去除非核心文件parking-system/ ├── backend/ # Spring Boot 工程Maven │ ├── src/main/java/com/example/parking/ │ │ ├── ParkingApplication.java # 启动类 │ │ ├── controller/ # REST 接口含 /api/car/in, /api/fee/calculate │ │ ├── service/ # 核心业务CarService、FeeCalculationService │ │ ├── mapper/ # MyBatis-Plus Mapper 接口 │ │ └── entity/ # POJOCarInfo、ParkingRecord、User │ ├── src/main/resources/ │ │ ├── application.yml # 数据库连接、日志、跨域配置 │ │ └── mapper/ # XML 映射文件如有复杂查询 │ └── pom.xml # 关键依赖spring-boot-starter-web、mybatis-plus-boot-starter、druid-spring-boot-starter ├── frontend/ # Vue 3 Vite 工程 │ ├── src/ │ │ ├── api/ # Axios 封装useCarApi.ts、useFeeApi.ts │ │ ├── router/ # 路由定义admin.ts、user.ts含权限守卫 │ │ ├── stores/ # Pinia storeparkingStore.ts 管理车位状态 │ │ └── views/ # 页面组件ParkIn.vue、FeeDetail.vue、ReportExport.vue │ ├── vite.config.ts # 配置代理/api → http://localhost:8080 │ └── package.json # 关键依赖vue、pinia、axios、element-plus ├── db/ # 数据库脚本 │ ├── parking_system.sql # 完整建表语句含 car_info、parking_record、sys_user 表 │ └── init_data.sql # 插入测试数据3 个管理员、5 个车位、20 条历史记录 └── docs/ ├── LunW.md # 毕业论文核心章节需求分析、ER 图、系统流程图 └── 部署说明.md # Windows/Linux 下启动步骤、常见端口冲突处理注意backend/src/main/resources/application.yml中的spring.datasource.url默认为jdbc:mysql://localhost:3306/parking_system?useSSLfalseserverTimezoneAsia/Shanghai若你 MySQL 端口不是 3306或数据库名已存在请提前修改密码字段password: root是明文上线前必须加密可用jasypt-spring-boot-starter。2.3 MySQL 初始化一条命令导入但必须避开字符集陷阱进入db/目录用 MySQL 客户端执行mysql -u root -p parking_system.sql但90% 的翻车发生在字符集上。如果你的 MySQL 服务端默认字符集是latin1尤其 Windows 上旧版 MySQL 5.7执行后中文会变问号sys_user.nickname字段存进去全是??。解决方法分两步确认 MySQL 服务端字符集登录 MySQL 后执行SHOW VARIABLES LIKE character_set%; SHOW VARIABLES LIKE collation%;正常应显示character_set_server utf8mb4collation_server utf8mb4_0900_ai_ciMySQL 8.0或utf8mb4_general_ciMySQL 5.7。若非 utf8mb4请在my.iniWindows或my.cnfLinux中强制设置[mysqld] character-set-server utf8mb4 collation-server utf8mb4_unicode_ci skip-character-set-client-handshake true [client] default-character-set utf8mb4重启 MySQL 服务后再执行parking_system.sql。该 SQL 文件头部已声明CREATE DATABASE IF NOT EXISTS parking_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;但前提是服务端支持。3. 后端启动从编译失败到接口返回 200 的全流程排错3.1 Maven 编译失败先查这 3 个高频原因运行mvn clean compile报错大概率不是代码问题而是环境或配置问题现象Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile原因pom.xml中maven.compiler.source和maven.compiler.target设为11但本地 JDK 是 8 或 17。解决打开pom.xml找到properties节点改为匹配你 JDK 的版本maven.compiler.source11/maven.compiler.source maven.compiler.target11/maven.compiler.target若 JDK 是 8改成1.8若是 17改成17注意 Spring Boot 2.7.x 不支持 JDK 17 的新特性建议统一用 11。现象Cannot resolve symbol MyBatisPlusAutoConfiguration原因IDEA 没识别mybatis-plus-boot-starter依赖或 Maven 仓库下载中断。解决右键项目 →Maven → Reload project若仍失败在 IDEA 设置中检查 Maven 路径是否指向你本地安装的 Maven而非内置 Bundled或手动删掉~/.m2/repository/com/baomidou/mybatis-plus-boot-starter/目录重新 reload。现象Caused by: java.lang.ClassNotFoundException: javax.servlet.http.HttpServletRequest原因Spring Boot 2.7.x 仍用javax.*但你误加了jakarta.servlet-api依赖常见于复制粘贴其他项目 pom。解决检查pom.xml删除所有含jakarta的 dependency确保只有spring-boot-starter-web它自带javax.servlet-api。3.2 启动成功但访问/api/car/list返回 404路由和包扫描没对上ParkingApplication.java是启动入口但 Spring Boot 默认只扫描同包及子包。若你的 Controller 不在com.example.parking.controller下或包名写错就会 404。验证方法启动时观察控制台日志搜索Mapped关键字Mapped {[/api/car/in],methods[POST]} onto public com.example.parking.common.Rjava.lang.String com.example.parking.controller.CarController.in(com.example.parking.entity.CarInfo)若没看到任何Mapped日志说明 Controller 没被扫描到。检查清单CarController.java的 package 声明是否为package com.example.parking.controller;RestController注解是否在类上不是Controller方法上是否有PostMapping(/in)且类上有RequestMapping(/api/car)application.yml中是否误加了spring.mvc.servlet.path/xxx导致全局路径偏移应删除或设为空3.3 数据库连不上别只看 URL检查这 4 个隐藏开关即使application.yml写对了也可能连不上因为 MySQL 8.0 默认关闭了远程访问且新用户需显式授权。确认 MySQL 服务正在运行netstat -ano | findstr :3306Windows或sudo lsof -i :3306Mac/Linux确认 root 用户允许本地连接登录 MySQL执行SELECT host,user FROM mysql.user WHERE userroot; -- 若结果只有 localhost需添加 % CREATE USER root% IDENTIFIED BY your_password; GRANT ALL PRIVILEGES ON *.* TO root% WITH GRANT OPTION; FLUSH PRIVILEGES;检查防火墙Windows 防火墙可能阻止 3306 端口临时关闭测试Linux 执行sudo ufw allow 3306Druid 连接池超时若日志出现Connection refused但在 MySQL 客户端能连可能是 Druid 配置过严。在application.yml中增加spring: datasource: druid: initial-size: 5 min-idle: 5 max-active: 20 test-on-borrow: false test-on-return: false test-while-idle: true time-between-eviction-runs-millis: 60000 min-evictable-idle-time-millis: 300000 validation-query: SELECT 14. 前端启动与联调Vue 项目跑不起来90% 是代理和跨域惹的祸4.1npm run dev报错ERR! code ELIFECYCLE先清 npm 缓存再重装这是 Node.js 生态的经典玄学。不要反复npm install按顺序执行# 1. 清理 node_modules 和 lock 文件 rm -rf node_modules package-lock.json # 2. 清理 npm 缓存关键 npm cache clean --force # 3. 切换淘宝镜像国内加速 npm config set registry https://registry.npmmirror.com # 4. 重新安装用 npm不是 cnpm避免兼容问题 npm install # 5. 启动 npm run dev若仍报错Cannot find module vue/compiler-sfc说明 Vue 版本与 Vite 不匹配。打开package.json确认dependencies: { vue: ^3.2.47 }, devDependencies: { vite: ^4.5.0, vitejs/plugin-vue: ^4.5.0 }三者 major 版本必须一致都是 3.x / 4.x否则编译器无法识别script setup语法。4.2 页面空白或 Network 显示Failed to load resource: net::ERR_CONNECTION_REFUSED代理没配对Vue 开发服务器默认跑在http://localhost:5173后端是http://localhost:8080。浏览器同源策略会拦截跨域请求。vite.config.ts中的代理配置是救命稻草// vite.config.ts export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 必须和后端实际端口一致 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 把 /api/car/in → /car/in } } } })验证代理是否生效打开浏览器开发者工具 → Network 标签页 → 点击“入场”按钮 → 查看请求 URL 是否为http://localhost:5173/api/car/in且 Status 为200若显示http://localhost:8080/api/car/in并报错则代理未生效检查target地址是否拼错比如写成http://127.0.0.1:8080而本地 hosts 未映射。4.3 登录成功但跳转到 403Pinia store 未持久化导致权限丢失Vue 用 Pinia 管理用户登录态但默认 store 是内存态。刷新页面后userInfo变空路由守卫判断!store.userInfo就重定向到登录页造成“明明登了却进不去”的假象。修复方案在src/stores/userStore.ts中启用持久化import { defineStore } from pinia import { User } from /types export const useUserStore defineStore(user, { state: (): { userInfo: User | null } ({ userInfo: null }), // 关键开启持久化 persist: { key: parking_user, storage: localStorage // 刷新不丢 } })同时在src/router/index.ts的路由守卫中不能只依赖store.userInfo要加一层localStorage.getItem(parking_user)的兜底router.beforeEach(async (to, from, next) { const userStore useUserStore() if (!userStore.userInfo localStorage.getItem(parking_user)) { // 从 localStorage 恢复 const data JSON.parse(localStorage.getItem(parking_user)!) userStore.$patch(data) } if (to.meta.requiresAuth !userStore.userInfo) { next({ path: /login }) } else { next() } })提示persist插件需单独安装npm install pinia-plugin-persistedstate并在main.ts中注册import { createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstate const pinia createPinia() pinia.use(piniaPluginPersistedstate)5. 避坑指南毕业答辩前必须扫清的 5 个血泪雷区5.1 【现象】导出 Excel 报java.lang.NoClassDefFoundError: org/apache/poi/ss/usermodel/Workbook原因后端pom.xml缺少 Apache POI 依赖或版本冲突如引入了poi-3.17但 Spring Boot 2.7 自带poi-4.1.2。解决在pom.xml中显式添加排除传递依赖dependency groupIdorg.apache.poi/groupId artifactIdpoi-ooxml/artifactId version4.1.2/version exclusions exclusion groupIdorg.apache.xmlbeans/groupId artifactIdxmlbeans/artifactId /exclusion /exclusions /dependency并确保xmlbeans版本与 POI 匹配4.1.2 对应xmlbeans-3.1.0。5.2 【现象】Vue 打包后放入 Spring Bootstatic目录访问首页白屏Console 报Failed to load resource: the server responded with a status of 404 ()原因Vite 打包的index.html中资源路径是相对路径如./assets/index-xxx.js但 Spring Boot 的静态资源映射根路径是/导致浏览器尝试从http://localhost:8080/assets/...加载而实际文件在http://localhost:8080/static/assets/...。解决修改vite.config.ts设置baseexport default defineConfig({ base: /static/, // 让所有资源路径以 /static/ 开头 build: { outDir: ../backend/src/main/resources/static // 直接输出到 Spring Boot static 目录 } })然后执行npm run build再启动 Spring Boot 即可。5.3 【现象】微信扫码支付模拟成功但数据库payment_status字段始终为0未支付原因FeeService.calculateFee()方法中调用paymentService.simulateWechatPay()后没有将返回的true结果更新到ParkingRecord实体并执行updateById()。解决检查FeeController.pay()方法确保有// 1. 调用支付模拟 boolean paid paymentService.simulateWechatPay(record.getId()); // 2. 更新记录状态 if (paid) { record.setPaymentStatus(1); // 1已支付 parkingRecordMapper.updateById(record); }且ParkingRecord实体中paymentStatus字段必须有TableField注解否则 MyBatis-Plus 忽略该字段。5.4 【现象】管理员后台查看报表图表显示空白Console 报Uncaught ReferenceError: echarts is not defined原因package.json中echarts是devDependencies生产环境未安装或main.ts中未全局挂载。解决移动依赖npm install echarts --save不是--save-dev在main.ts中import * as echarts from echarts const app createApp(App) app.config.globalProperties.$echarts echarts在使用图表的组件中如ReportChart.vueconst chartRef ref() onMounted(() { const chart echarts.init(chartRef.value) chart.setOption({ /* 配置项 */ }) })5.5 【现象】毕设答辩演示时MySQL 突然宕机show databases显示Access denied for user rootlocalhost原因MySQL root 密码被意外修改或skip-grant-tables模式残留导致权限混乱。解决Windows 快速恢复停止 MySQL 服务net stop mysql以安全模式启动mysqld --skip-grant-tablescmd 保持窗口打开新开 cmd登录mysql -u root无需密码执行USE mysql; UPDATE user SET authentication_stringPASSWORD(new_password) WHERE Userroot; FLUSH PRIVILEGES; EXIT;重启 MySQL 服务net start mysql用新密码登录验证。6. 毕设加分技巧让答辩老师眼前一亮的 3 个低成本改造6.1 给停车场加个「热力图」用 ECharts Mock 数据模拟实时车位占用不用接入真实摄像头只需在frontend/src/views/ParkingMap.vue中加一个 ECharts 散点图数据来自后端/api/parking/status接口返回所有车位坐标 状态// 后端 Controller 新增 GetMapping(/status) public RListParkingSpot getSpotStatus() { ListParkingSpot spots parkingSpotService.list(); // ParkingSpot 包含 x, y, status 字段 return R.success(spots); }前端渲染逻辑const option { tooltip: {}, visualMap: { min: 0, max: 1, calculable: true, inRange: { color: [green, red] }, // 空绿占红 textStyle: { color: #fff } }, series: [{ type: scatter, data: spots.map(s [s.x, s.y, s.status]), // [x, y, status] symbolSize: function (val) { return val[2] 1 ? 20 : 12; // 占用车位放大 } }] }效果地图上绿色圆点代表空位红色大圆点代表已占老师一眼看出“东区拥堵”。数据用Math.random()生成即可答辩时说“已预留 IoT 设备接入接口”。6.2 把「月租车续费」做成定时任务用 Spring Boot Scheduler 模拟自动扣费毕业设计常被问“怎么保证月租到期自动提醒”答案不是写个 cron 表达式就完事而是展示完整的业务闭环。在application.yml中启用定时spring: task: scheduling: enabled: true创建RenewalScheduler.javaComponent public class RenewalScheduler { Scheduled(cron 0 0 2 * * ?) // 每天凌晨2点执行 public void checkAndRenew() { // 查询 tomorrow 到期的月租车 ListCarInfo expiring carService.list( new QueryWrapperCarInfo() .eq(car_type, monthly) .le(expire_date, LocalDate.now().plusDays(1)) ); for (CarInfo car : expiring) { // 调用 FeeService 续费逻辑扣款、更新 expire_date feeService.renewMonthlyCar(car.getId()); // 发送短信通知模拟 smsService.send(您的车牌 car.getPlateNumber() 月租将于明日到期已自动续费); } } }在LunW.md的“系统设计”章节画一张时序图Scheduler → FeeService → SMS Service标注“解耦设计便于替换为 RabbitMQ 延迟队列”。6.3 给论文加个「压力测试对比表」用 JMeter 测 100 并发下的响应时间别只写“系统性能良好”用数据说话。用 JMeter 做两组测试场景并发数平均响应时间错误率CPU 使用率无缓存纯 DB100842ms0%65%加 Redis 缓存车位状态100127ms0%32%操作步骤下载 JMeter新建线程组100 线程Ramp-up 10 秒添加 HTTP 请求GET http://localhost:8080/api/parking/status添加监听器聚合报告、View Results Tree先跑无 Redis 版本注释掉Cacheable再跑加 Redis 版本Cacheable(value parkingStatus, key #root.methodName)答辩时说“测试证明加入 Redis 后响应时间降低 85%CPU 降低一半为未来支持 1000 车位打下基础。”——老师立刻知道你懂架构演进。我带过 7 届毕设见过太多同学卡在“能跑”和“能讲”之间。这套停车场系统真正的价值不是代码多炫而是它把「需求→设计→编码→测试→部署→答辩」每个环节的坑都踩了一遍。你照着本文调通的那一刻收获的不只是一个毕设分数更是面对任何新项目时那种“我知道第一步该查什么日志、第二步该看哪个配置、第三步该怀疑哪行代码”的笃定。希望帮到你。本文还有配套的精品资源点击获取
返回列表