Spring Boot+Vue智慧停车场项目实战：从环境搭建到部署运行 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度这次我们来看一个基于 Spring Boot Vue 的前后端分离智慧停车场管理系统项目。对于正在寻找 Java 实战项目、准备毕业设计或者想系统学习前后端分离开发的同学来说这是一个非常典型的练手案例。它涵盖了从数据库设计、后端接口开发到前端页面构建的完整流程并且“源码文档”齐全目标是能够“完美运行”。这个项目的核心价值在于其完整性和实用性。它不是一个简单的 CRUD 演示而是模拟了真实的停车场管理业务场景比如车位管理、车辆进出记录、收费计算等。技术栈选用了当前企业开发中最主流的组合Spring Boot 作为后端框架Vue.js 作为前端框架MySQL 作为数据库。这意味着你通过这个项目学到的技术可以直接应用到未来的工作和面试中。本文将带你从零开始手把手拆解这个项目的核心模块、部署步骤和关键代码。我们会重点关注如何让项目在你的本地环境“完美运行”包括环境准备、数据库初始化、前后端服务启动、功能联调测试以及部署过程中最常见的坑和解决方案。无论你是 Java 新手想找一个入门项目还是毕业生急需一个高质量的毕设选题这篇文章都能提供清晰的路径。1. 核心能力速览在深入代码之前我们先快速了解这个智慧停车场管理系统的核心能力和技术规格让你对项目有一个全局认识。能力项说明项目类型前后端分离的 Web 应用毕业设计/实战项目技术栈后端Spring Boot, MyBatis/MyBatis-Plus, MySQL前端Vue.js, Element-UI/Ant Design Vue, Axios核心功能用户/角色权限管理、停车场/车位信息管理、车辆进出场记录、停车费用计算与统计、数据可视化报表部署方式本地开发环境IDEA VS Code 本地 MySQL生产部署可打包为 Jar/War 或使用 Docker 容器化硬件门槛开发机普通配置即可8G内存i5以上CPU无需独立显卡。生产环境视并发量而定。启动方式后端通过 IDEA 运行 Spring Boot 主类或使用mvn spring-boot:run命令启动。前端使用npm run serve启动开发服务器。接口能力提供完整的 RESTful API支持前端 Ajax 调用便于后续扩展为小程序或APP后端。适合场景计算机专业毕业设计、Java/Vue 全栈学习练手项目、中小型停车场管理系统原型开发。2. 适用场景与使用边界这个项目非常适合以下几类同学毕业设计选题项目业务逻辑清晰停车场管理功能模块完整增删改查、统计报表技术栈主流Spring BootVue文档齐全是计算机相关专业本科毕设的优质选择。Java全栈学习如果你想从零开始学习如何构建一个完整的前后端分离应用这个项目提供了从数据库设计、后端接口编写到前端页面渲染的全链路实践。面试项目积累在面试中一个自己从头到尾部署、理解并可能进行过二次开发的项目远比一个简单的 Demo 更有说服力。你可以深入讲解其中的技术选型、权限设计、数据库优化等亮点。使用边界与注意事项非商用级产品作为学习项目它在高并发、分布式、支付安全、硬件对接如道闸、车牌识别摄像头等方面可能未做深度优化。若用于真实商业环境需进行大量的安全加固、性能优化和第三方系统集成开发。数据与版权项目中使用到的测试数据均为模拟数据。如果用于演示或部署请确保遵守数据隐私相关法律法规。项目的源码和文档应仅用于个人学习与研究。技术栈锁定项目基于特定的 Spring Boot 和 Vue 版本构建。如果你想升级到最新版本可能需要解决一些依赖兼容性问题。3. 环境准备与前置条件要让项目“完美运行”第一步是配好环境。请确保你的开发机满足以下条件3.1 基础软件清单操作系统Windows 10/11, macOS, 或 Linux (如 Ubuntu) 均可。本文以 Windows 为例命令在 PowerShell 或 CMD 中执行。Java 开发工具包 (JDK)版本JDK 8或JDK 11推荐与 Spring Boot 2.x 兼容性最好。安装后配置JAVA_HOME环境变量。# 检查Java版本 java -version项目管理与构建工具Apache Maven 3.6。用于管理项目依赖和打包。# 检查Maven版本 mvn -v数据库MySQL 5.7或8.0。确保 MySQL 服务已启动并记住 root 密码或创建一个有权限的新用户。代码编辑器/IDE后端强烈推荐IntelliJ IDEA Ultimate或Community版。它对 Spring Boot 支持极佳。前端Visual Studio Code或WebStorm。VSCode 轻量且插件丰富。版本控制Git。用于克隆项目源码。Node.js 与 npm用于运行前端 Vue 项目。安装Node.js 14或16LTS 版本它会自带 npm。# 检查Node.js和npm版本 node -v npm -v3.2 项目源码获取通常这类项目会托管在 Gitee 或 GitHub 上。你需要找到对应的仓库地址使用 Git 克隆到本地。# 示例命令实际仓库地址需替换 git clone https://gitee.com/xxx/smart-parking.git cd smart-parking克隆后项目目录结构通常如下smart-parking/ ├── backend/ # Spring Boot 后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue 前端项目 │ ├── public/ │ ├── src/ │ ├── package.json │ └── ... └── docs/ # 项目文档、SQL脚本等 ├── database.sql └── ...3.3 端口占用检查默认情况下Spring Boot 后端可能使用8080端口Vue 前端开发服务器使用8081或3000端口。确保这些端口没有被其他程序如 Skype、其他 Tomcat 实例占用。# Windows 查看端口占用 netstat -ano | findstr :8080 # Linux/macOS lsof -i:8080如果端口被占用可以在后续的配置文件中修改。4. 数据库初始化与后端配置后端服务启动前必须先创建数据库并导入初始数据。4.1 创建数据库使用 MySQL 客户端如命令行、Navicat、MySQL Workbench连接你的 MySQL 服务。-- 创建一个名为 smart_parking 的数据库字符集推荐 utf8mb4 CREATE DATABASE IF NOT EXISTS smart_parking DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 使用该数据库 USE smart_parking;4.2 执行SQL脚本在项目docs/或backend/src/main/resources/目录下找到名为database.sql或schema.sql的文件。这个文件包含了创建所有表结构和插入初始数据如管理员账号、基础参数的 SQL 语句。在 MySQL 客户端中执行这个文件。-- 在MySQL客户端中执行假设脚本文件在D盘 SOURCE D:/path/to/your/project/docs/database.sql;执行成功后检查数据库中是否生成了user,parking_space,vehicle_record,fee_rule等相关的表。4.3 配置后端数据库连接打开后端项目 (backend/) 中的配置文件通常是src/main/resources/application.yml或application.properties。# application.yml 示例配置 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 将 your_password 替换为你的MySQL root密码将 3306 和 smart_parking 替换为你的实际配置 url: jdbc:mysql://localhost:3306/smart_parking?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password # 可选配置JPA或MyBatis的日志方便调试SQL jpa: show-sql: true properties: hibernate: format_sql: true # 设置服务端口如果8080被占用可以修改为其他端口如8090 server: port: 8080关键点url、username、password这三项必须与你本地 MySQL 的配置完全匹配否则后端启动时会连接数据库失败。5. 后端服务启动与验证环境配置好后就可以启动 Spring Boot 后端了。5.1 使用 IDEA 启动推荐用 IntelliJ IDEA 打开backend文件夹。IDEA 会自动识别为 Maven 项目并开始下载依赖观察底部进度条。首次加载可能需要几分钟取决于网络速度。找到主启动类通常命名为XxxApplication例如ParkingApplication上面有SpringBootApplication注解。右键点击这个类选择Run ‘ParkingApplication‘。查看控制台 (Run窗口) 日志。如果看到类似以下的输出说明启动成功. ____ _ __ _ _ /\\ / ____ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | _ | _| | _ \/ _ | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) |____| .__|_| |_|_| |_\__, | / / / / |_||___//_/_/_/ :: Spring Boot :: (v2.7.18) 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] c.e.p.ParkingApplication : Starting ParkingApplication using Java 11.0.XX on DESKTOP-XXX with PID 12345 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] c.e.p.ParkingApplication : No active profile set, falling back to 1 default profile: default 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data JPA repository scanning in XXX ms. 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.XX] 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in XXX ms 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] c.e.p.ParkingApplication : Started ParkingApplication in X.XXX seconds (JVM running for X.XXX)重点观察Tomcat started on port(s): 8080和Started ...Application in ... seconds这两行日志表示服务已在 8080 端口启动。5.2 使用 Maven 命令启动如果你不使用 IDEA也可以在backend目录下打开终端# 确保在 backend 目录下该目录包含 pom.xml cd /path/to/backend # 使用Maven运行Spring Boot应用 mvn spring-boot:run同样在终端输出中看到 Tomcat 在 8080 端口启动成功的日志即可。5.3 验证后端API后端启动后可以通过浏览器或 API 测试工具如 Postman验证接口是否正常。打开浏览器访问http://localhost:8080。如果项目配置了默认首页或健康检查端点可能会显示简单页面或 JSON 信息。更常见的是访问 Swagger 文档如果项目集成了的话例如http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html。测试一个具体的 API。例如很多系统会提供一个获取验证码或登录的接口。查看项目文档或代码中的控制器 (RestController)找到接口路径。用 Postman 发起一个 GET 或 POST 请求看是否能收到正常响应而不是 404 或 500 错误。# 示例使用curl测试一个健康检查接口假设存在 curl http://localhost:8080/actuator/health # 预期返回{status:UP}6. 前端项目启动与配置后端服务正常后我们启动前端 Vue 项目。6.1 安装前端依赖在终端中进入frontend目录安装项目所需的 npm 包。# 进入前端项目目录 cd /path/to/frontend # 安装依赖使用淘宝镜像源可以加速 npm install --registryhttps://registry.npmmirror.com这个过程会下载package.json中定义的所有依赖如 vue, vue-router, element-ui, axios 等并生成node_modules文件夹。首次安装时间可能较长。6.2 配置前端API代理前端开发服务器需要调用后端 API。为了避免跨域问题Vue 项目通常在vue.config.js文件中配置代理将特定前缀的请求转发到后端服务。 打开frontend目录下的vue.config.js文件如果没有可能需要创建。确保其内容类似如下module.exports { devServer: { port: 8081, // 前端开发服务器端口可修改 proxy: { // 代理所有以 /api 开头的请求 /api: { target: http://localhost:8080, // 后端服务地址 changeOrigin: true, pathRewrite: { ^/api: // 重写路径去掉 /api 前缀根据后端实际接口路径调整 } } } } }关键点target必须指向你正在运行的后端服务地址和端口本例为http://localhost:8080。pathRewrite规则需要根据后端接口的实际路径设计来调整。有些项目后端接口本身就有/api前缀则可能不需要重写或重写规则不同。请务必参考项目本身的文档或代码。6.3 启动前端开发服务器配置完成后启动前端服务。# 确保在 frontend 目录下 npm run serve启动成功后终端会显示类似信息App running at: - Local: http://localhost:8081/ - Network: http://192.168.1.xxx:8081/ Note that the development build is not optimized. To create a production build, run npm run build.这表示前端开发服务器已在http://localhost:8081运行。7. 功能测试与效果验证现在前后端服务都已启动可以打开浏览器进行全功能测试了。7.1 访问系统在浏览器中访问前端地址http://localhost:8081。你应该能看到系统的登录页面。7.2 登录测试使用数据库sql脚本中初始化的管理员账号登录常见账号密码如admin/admin123或admin/123456请查阅项目文档或数据库user表。登录成功后应跳转到系统主页面或仪表盘。7.3 核心功能模块遍历测试按照菜单栏逐一测试各个功能模块确保增、删、改、查、统计等操作均能正常进行且前端与后端数据同步无误。以下是一些关键测试点用户管理创建新用户、修改用户信息、分配角色、禁用/启用用户。停车场与车位管理添加一个停车场设置车位总数。添加具体车位绑定到停车场设置车位状态空闲/占用/维修。尝试修改车位状态观察前端显示是否实时更新。车辆进出场管理模拟入场在系统中登记一辆车入场选择车位。系统应生成一条入场记录并将对应车位状态更新为“占用”。模拟出场找到刚才的入场记录操作出场。系统应计算停车时长和费用根据fee_rule表规则更新车位状态为“空闲”并生成完整的收费记录。检查费用计算逻辑是否正确如按小时计费、是否有免费时长、夜间费率等。数据统计与报表查看“今日收入”仪表盘。查看“车位使用率”图表。按日期范围查询历史停车记录和收入报表。权限测试如果有不同角色使用一个普通用户账号登录检查其菜单权限和数据访问范围是否被正确限制。7.4 接口联调验证打开浏览器开发者工具 (F12)切换到Network(网络) 选项卡。在页面上进行任何操作如点击查询、保存观察是否有网络请求发出请求的 URL 是否正确是否指向localhost:8080或经过代理以及响应状态码是否为200(成功) 或201(创建成功)响应数据是否符合预期。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供排查思路。问题现象可能原因排查方式解决方案后端启动失败报数据库连接错误1. MySQL服务未启动。2.application.yml中数据库配置错误密码、库名、端口。3. MySQL驱动版本不兼容。1. 检查MySQL服务状态。2. 使用数据库客户端工具用配置文件中的账号密码手动连接测试。3. 查看启动日志的详细报错信息。1. 启动MySQL服务。2. 修正application.yml配置。3. 在pom.xml中调整mysql-connector-java依赖版本与MySQL服务器版本匹配。前端npm install失败或极慢1. 网络问题连接 npm 官方源慢。2. Node.js 版本过高或过低与项目依赖不兼容。3. 项目package.json中依赖有冲突。1. 观察错误信息是否是网络超时。2. 检查node -v和npm -v。3. 查看package.json中是否有已知问题的依赖版本。1. 使用淘宝镜像npm config set registry https://registry.npmmirror.com然后重试。2. 使用 nvm 切换 Node.js 版本到项目推荐的 LTS 版本如 16.x。3. 尝试删除node_modules和package-lock.json重新npm install。前端运行npm run serve报错1. 依赖未正确安装。2.vue.config.js配置文件语法错误。3. 端口被占用。1. 查看报错信息通常会有具体文件和行号提示。2. 检查vue.config.js的 JSON/JS 语法。3. 运行netstat -ano | findstr :8081查看端口占用。1. 确保已成功执行npm install。2. 修正vue.config.js语法错误。3. 修改vue.config.js中的devServer.port或关闭占用端口的进程。前端页面能打开但所有数据加载失败Network中请求报404或5001. 后端服务未启动或端口不对。2. 前端代理配置 (vue.config.js中的target) 错误。3. 后端接口路径与前端请求路径不匹配。1. 确认后端服务日志是否正常访问http://localhost:8080简单测试。2. 检查vue.config.js的proxy配置。3. 对比浏览器 Network 中请求的 URL 和后端控制器 (RequestMapping) 定义的路径。1. 启动或重启后端服务。2. 将target修改为正确的后端地址和端口。3. 调整代理的pathRewrite规则或前端的请求基地址 (axios.defaults.baseURL)。登录失败提示“用户名或密码错误”1. 数据库未初始化或初始化数据不对。2. 密码加密方式不匹配。1. 检查数据库user表是否有初始用户数据。2. 查看后端登录接口的密码校验逻辑是明文比对还是加密后比对。1. 重新执行数据库 SQL 脚本。2. 如果是加密比对尝试使用脚本中初始化的加密密码或修改代码暂时改为明文比对用于测试。页面样式错乱或Element-UI组件不显示1. 前端依赖如 element-ui未正确安装或版本不对。2. 组件未正确注册或引入。1. 检查package.json中element-ui的版本并确认node_modules中存在。2. 查看浏览器控制台 (F12的 Console) 是否有关于未找到组件的报错。1. 重新安装指定版本的 element-ui:npm install element-ui版本号。2. 检查main.js或相关组件中是否正确import和use了 element-ui。9. 项目打包与部署本地开发测试通过后你可能需要将项目打包部署到服务器或提交给老师验收。9.1 后端打包 (Spring Boot)在backend目录下使用 Maven 打包生成可执行的 Jar 文件。cd /path/to/backend mvn clean package -DskipTests打包成功后在target/目录下会生成一个xxx-0.0.1-SNAPSHOT.jar文件。这个 Jar 包包含了所有依赖和嵌入式 Tomcat可以直接运行java -jar target/xxx-0.0.1-SNAPSHOT.jar生产环境配置可以通过--spring.profiles.activeprod指定使用application-prod.yml配置文件在其中配置生产环境的数据库、端口等。9.2 前端打包 (Vue)在frontend目录下执行构建命令生成静态文件。cd /path/to/frontend npm run build构建成功后会生成一个dist目录里面是压缩优化后的 HTML、CSS、JS 文件。9.3 前后端整合部署有两种常见方式方式一前后端分离部署后端 Jar 包运行在服务器上如8080端口。前端dist目录下的文件部署到 Nginx 或 Apache 等 Web 服务器并配置反向代理将/api等请求转发到后端服务。这是主流的生产环境部署方式。方式二合并部署将前端dist目录下的所有文件复制到 Spring Boot 项目的src/main/resources/static/目录下然后重新打包后端。这样访问 Jar 包时会直接提供前端页面。这种方式更简单适合演示或小型应用。10. 扩展学习与二次开发建议项目成功运行只是第一步。要真正掌握它并转化为自己的作品建议进行以下扩展代码走读仔细阅读核心业务代码如VehicleRecordService车辆记录服务、FeeCalculateService费用计算服务理解其业务逻辑和数据流转。数据库优化分析现有的数据表结构思考如何为vehicle_record表增加索引以加快按车牌号、时间范围的查询速度。功能增强车牌识别集成模拟调用一个第三方车牌识别 API如百度AI开放平台在车辆入场时自动识别车牌号而非手动输入。数据导出增加将停车记录、收费报表导出为 Excel 或 PDF 的功能。微信小程序端基于现有的后端 RESTful API使用 Uni-app 或 Taro 开发一个车主用的小程序实现车位查询、自助缴费等。安全加固学习并实践如何在后端增加更完善的权限控制如 Spring Security、接口防刷、SQL 注入防护等。部署实战尝试在云服务器如腾讯云轻量应用服务器上使用 Docker 容器化部署整个应用包括 MySQL、后端 Jar 包和 Nginx。这个智慧停车场项目提供了一个优秀的全栈开发脚手架。通过解决部署中遇到的各种问题你不仅能巩固 Spring Boot 和 Vue 的基础更能积累宝贵的项目调试和部署经验。建议将整个部署过程、遇到的问题及解决方案记录下来这本身就是一份有价值的项目文档也能为你的毕业设计答辩或面试增添亮点。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度