🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Qwen 随心用，限时 5 折。 👉 点击领海量免费额度
你是不是正在为Java期末大作业、毕业设计或者课程设计发愁？时间紧、任务重，想找一个既能体现技术栈（SpringBoot + Vue），又功能完整、能跑通、有文档的实战项目？市面上很多“智慧停车场”项目要么是单体架构，要么代码混乱，要么部署文档缺失，让人无从下手。
这篇文章要解决的，正是这个痛点。我将为你拆解一个真正可运行、前后端分离、附带完整技术文档和数据库的智慧停车场管理系统。这不仅仅是一个项目源码的搬运，更重要的是，我会带你理解其核心架构设计、关键业务逻辑的实现，以及从零到一部署运行过程中必然会遇到的坑和解决方案。无论你是想快速完成作业，还是希望通过一个完整项目深入学习SpringBoot和Vue的整合开发，这篇文章都能给你一条清晰的路径。
我们将重点关注：为什么选择前后端分离架构？SpringBoot后端如何设计RESTful API和数据库交互？Vue前端如何与后端对接并管理状态？以及，如何避开环境配置、依赖冲突、跨域问题这些新手“杀手”。读完本文，你不仅能拿到一个可用的项目，更能掌握独立搭建类似企业级应用的基础能力。
1. 项目核心价值与解决的问题
这个智慧停车场管理系统项目，其价值远不止于“交作业”。它实际上是一个微型的、贴近真实业务场景的企业级应用原型。对于学习者而言，它解决了以下几个关键问题：
- 技术栈整合的实践缺口：很多同学单独学SpringBoot或Vue时感觉良好，但一到整合就手足无措。本项目清晰地展示了如何将SpringBoot作为后端API服务，Vue作为前端展示层，通过HTTP请求进行通信，是学习前后端分离开发模式的绝佳样板。
- 业务逻辑的连贯性训练：停车场系统包含用户、车辆、车位、收费等核心实体，它们之间的关联（如一个用户有多辆车，一辆车对应多次停车记录）是典型的数据库关系模型实践。通过实现车辆入场、出场、计费这一完整流程，你能深刻理解CRUD操作如何串联成业务闭环。
- 从开发到部署的完整生命周期体验：项目提供了源码、数据库脚本和技术文档。这意味着你需要自己完成环境搭建、数据库初始化、项目导入、依赖安装、配置修改、前后端启动等一系列操作。这个过程模拟了真实的项目上线流程，是课程设计或毕设中非常重要的一环。
- 应对“项目经验”焦虑：在面试或简历中，一个结构清晰、技术栈主流、自己真正跑通并理解的项目，是证明你工程能力的有力证据。本项目涉及的权限管理（如管理员与普通用户）、数据报表、状态管理（Vuex/Pinia）等，都是面试中常被问到的点。
因此，本文的目标不仅是“给鱼”，更是“授渔”。我们将深入代码内部，理解其设计思路，并预演所有可能阻碍你“一键运行”的障碍。
2. 技术栈选型与架构解析
为什么是SpringBoot + Vue？这个组合在当下企业级Web开发中占据了主流地位，其优势在于：
- SpringBoot：作为后端的“脚手架”，它极大地简化了Spring应用的初始搭建和开发过程。通过自动配置和起步依赖，我们可以快速集成Web框架（Spring MVC）、数据访问（Spring Data JPA/MyBatis）、安全（Spring Security）等组件。它让开发者更专注于业务逻辑而非配置。
- Vue.js：作为渐进式前端框架，Vue易于上手，且生态丰富（Vue Router, Vuex/Pinia, Element Plus/View UI等）。它通过数据驱动和组件化的方式，能够高效地构建用户界面。对于停车场管理系统这类中后台管理页面，Vue配合UI库能快速搭建出美观、交互良好的界面。
- 前后端分离（Frontend-Backend Separation）：这是现代Web开发的标准架构。后端（SpringBoot）只负责提供数据接口（API），前端（Vue）负责渲染页面和用户交互。两者通过HTTP协议（通常是JSON格式）通信。这种架构的好处是职责清晰、并行开发、易于维护和扩展，并且后端API可以同时服务于Web、移动App等多种客户端。
本项目核心架构图（逻辑层面）：
用户浏览器 | | (HTTP/HTTPS) v [Nginx] (可选，用于反向代理和部署) | | (API请求， 如 /api/parking/record) v [Vue前端应用] (运行在Node.js服务或静态服务器) | | (Ajax/Fetch, JSON数据) v [SpringBoot后端应用] (运行在Tomcat/Jetty) | | (JDBC) v [MySQL数据库]在这个架构中，Vue应用打包后是纯粹的HTML、CSS、JS文件，可以放在任何静态服务器或与SpringBoot一起部署。开发时，两者通常在不同端口运行（如Vue在8081，SpringBoot在8080），并通过配置解决跨域问题。
3. 环境准备与工具清单
在打开源码之前，请确保你的开发环境已就绪。以下清单是项目运行的基石，缺少任何一项都可能导致启动失败。
3.1 后端开发环境
- JDK：版本8或11、17（推荐）。SpringBoot 2.x/3.x 对JDK版本有要求，请根据项目
pom.xml中的<java.version>确定。安装后配置JAVA_HOME环境变量。# 检查版本 java -version - Maven：版本3.6+。用于管理项目依赖、构建和打包。同样需要配置环境变量。
# 检查版本 mvn -v - IDE：IntelliJ IDEA(社区版或旗舰版) 或Eclipse。IDEA对SpringBoot支持更好，能自动识别并下载依赖。
- 数据库：MySQL 5.7或8.0。这是最常用的选择。你需要安装MySQL，并启动服务。也可以使用Docker快速启动一个MySQL实例。
# Docker方式启动MySQL 8 docker run -d --name mysql-parking -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:8
3.2 前端开发环境
- Node.js：版本14+或16+、18+（LTS版本）。它包含了npm包管理器。Vue CLI或Vite构建工具依赖于Node.js。
# 检查版本 node -v npm -v - 包管理器：npm或yarn、pnpm。项目
package.json中会指定依赖，需要用它们来安装。 - IDE：Visual Studio Code是前端开发的首选，轻量且插件生态丰富。当然，WebStorm或IDEA也可以。
3.3 辅助工具
- 数据库管理工具：Navicat、DBeaver或MySQL Workbench。用于连接数据库，执行SQL脚本，查看和操作数据。
- API测试工具：Postman或Insomnia。用于测试后端开发的RESTful API接口是否正常工作。
- 浏览器开发者工具：Chrome或Edge的F12开发者工具，用于调试前端网络请求、查看Console日志、分析Vue组件状态。
重要提示：请务必记录下你安装的软件版本号。不同版本间可能存在兼容性问题，这是后续排查错误的第一步。
4. 项目结构与核心模块拆解
拿到源码后，不要急于运行。先花10分钟浏览整个项目结构，理解各个目录和文件的职责，这能让你在遇到问题时快速定位。
4.1 后端SpringBoot项目结构典型的SpringBoot项目结构如下（以Maven为例）：
smart-parking-backend/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── example/ │ │ │ └── parking/ │ │ │ ├── ParkingApplication.java # SpringBoot主启动类 │ │ │ ├── config/ # 配置类（如跨域、Swagger） │ │ │ ├── controller/ # 控制器层，接收HTTP请求 │ │ │ ├── service/ # 业务逻辑层接口 │ │ │ ├── service/impl/ # 业务逻辑层实现 │ │ │ ├── dao/ 或 repository/ # 数据访问层（JPA或MyBatis Mapper） │ │ │ ├── entity/ 或 model/ # 实体类，对应数据库表 │ │ │ ├── dto/ # 数据传输对象，用于前后端交互 │ │ │ └── utils/ # 工具类（如日期、加密） │ │ └── resources/ │ │ ├── application.yml # 主配置文件（数据库、端口等） │ │ ├── application-dev.yml # 开发环境配置 │ │ ├── application-prod.yml # 生产环境配置 │ │ └── static/ & templates/ # 静态资源（如果非完全前后端分离） ├── pom.xml # Maven依赖管理文件 └── target/ # 编译输出目录- 关键文件：
application.yml：重中之重。里面配置了数据库连接（url,username,password）、服务器端口（server.port）等。你需要根据本地环境修改这里的数据库配置。pom.xml：查看项目的SpringBoot版本、MySQL驱动、MyBatis/JPA、Lombok等依赖。如果下载依赖失败，可能是网络问题或仓库地址不对。
4.2 前端Vue项目结构典型的Vue CLI或Vite项目结构如下：
smart-parking-frontend/ ├── public/ # 静态资源（如index.html， 图标） ├── src/ │ ├── api/ # 封装所有后端API请求（使用axios） │ ├── assets/ # 静态资源（图片、样式） │ ├── components/ # 可复用Vue组件 │ ├── router/ # Vue Router路由配置 │ ├── store/ # Vuex/Pinia状态管理 │ ├── utils/ # 前端工具函数 │ ├── views/ 或 pages/ # 页面级组件 │ ├── App.vue # 根组件 │ └── main.js # 应用入口文件 ├── .env.development # 开发环境变量（如后端API基础URL） ├── .env.production # 生产环境变量 ├── package.json # 项目依赖和脚本 ├── vue.config.js # Vue CLI特有配置文件（可配置代理） └── babel.config.js # Babel配置- 关键文件：
package.json：查看Vue、Vue Router、Element UI等版本，以及启动命令（npm run serve）。src/api/下的文件：这里定义了前端调用后端接口的具体方法。你需要检查这里的baseURL是否指向了正确的后端地址（通常是http://localhost:后端端口）。.env.development或vue.config.js：配置开发服务器的代理，用于解决跨域问题。
5. 数据库初始化与核心表结构分析
任何涉及数据的系统，数据库都是核心。我们先来创建数据库并导入表结构。
5.1 创建数据库使用你的数据库管理工具（如Navicat）或命令行，创建一个新的数据库，字符集建议使用utf8mb4以支持完整的中文和表情符号。
CREATE DATABASE `smart_parking` CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE `smart_parking`;5.2 执行SQL脚本在项目提供的资源中，找到sql文件夹，里面应该有一个或多个.sql文件（如smart_parking.sql）。用数据库工具打开并执行整个脚本。这个脚本会创建所有必要的表并可能插入一些测试数据。
5.3 核心表结构解析理解表结构有助于理解业务逻辑。一个简化的停车场系统通常包含以下核心表：
user：用户表。存储系统用户信息，如管理员、停车场工作人员、车主（如果注册）。CREATE TABLE `user` ( `id` bigint NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(100) NOT NULL COMMENT '密码（加密后）', `role` varchar(20) DEFAULT 'USER' COMMENT '角色：ADMIN, OPERATOR, USER', `phone` varchar(20) COMMENT '手机号', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB COMMENT='用户表';parking_lot：停车场/车位区域表。管理不同的停车区域或楼层。CREATE TABLE `parking_lot` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '区域名称（如A区，B1层）', `total_spaces` int NOT NULL COMMENT '总车位数量', `available_spaces` int NOT NULL COMMENT '可用车位数量', `status` varchar(20) DEFAULT 'ACTIVE' COMMENT '状态', PRIMARY KEY (`id`) ) ENGINE=InnoDB COMMENT='停车场区域表';vehicle：车辆信息表。关联用户，记录车牌号、车型等。parking_record：停车记录表。这是最核心的业务表，记录每一次车辆的入场和出场。CREATE TABLE `parking_record` ( `id` bigint NOT NULL AUTO_INCREMENT, `license_plate` varchar(20) NOT NULL COMMENT '车牌号', `parking_lot_id` bigint COMMENT '停放区域ID', `entry_time` datetime NOT NULL COMMENT '入场时间', `exit_time` datetime COMMENT '出场时间', `status` varchar(20) DEFAULT 'PARKING' COMMENT '状态：PARKING（停车中）， COMPLETED（已完成）', `fee` decimal(10,2) DEFAULT 0.00 COMMENT '停车费用', `payment_status` varchar(20) DEFAULT 'UNPAID' COMMENT '支付状态', PRIMARY KEY (`id`), KEY `idx_license_plate` (`license_plate`), KEY `idx_entry_time` (`entry_time`), CONSTRAINT `fk_record_lot` FOREIGN KEY (`parking_lot_id`) REFERENCES `parking_lot` (`id`) ) ENGINE=InnoDB COMMENT='停车记录表';payment_record：支付记录表。与停车记录关联，记录支付详情。
执行完SQL脚本后，务必检查这些表是否创建成功，并浏览一下表里的示例数据，这对后续理解业务逻辑非常有帮助。
6. 后端SpringBoot项目配置与启动
现在，我们开始配置并启动后端服务。
6.1 导入项目并配置数据库
- 用IDEA打开后端项目根目录（包含
pom.xml的文件夹）。 - 等待Maven自动下载依赖（右下角有进度条）。如果下载慢或失败，可以检查Maven的
settings.xml，配置国内镜像源（如阿里云）。 - 找到
src/main/resources/application.yml(或application.properties)。 - 修改数据库连接配置，确保与你的本地MySQL环境一致。
注意：如果项目使用的是MyBatis，配置可能略有不同，但# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_parking?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root password: 123456 # 修改为你的MySQL root密码 jpa: hibernate: ddl-auto: update # 可选：设置为update，程序启动时会根据实体类自动更新表结构（谨慎用于生产） show-sql: true # 开发时开启，方便查看执行的SQL server: port: 8080 # 后端服务启动端口url、username、password这几个关键项是必须修改的。
6.2 解决依赖和编译问题
- Lombok未生效：如果实体类使用了
@Data注解但IDEA报错，需要在IDEA中安装Lombok插件，并在设置中启用“Annotation Processors”。 - JDK版本不匹配：如果出现“源发行版XX需要目标发行版XX”错误，在IDEA中检查项目的Project Structure，确保Project SDK和Project language level与
pom.xml中的<java.version>一致。 - 端口占用：如果8080端口被占用，可以在
application.yml中修改server.port为其他端口，如8088。
6.3 启动SpringBoot应用找到主启动类ParkingApplication.java，通常包含@SpringBootApplication注解和main方法。右键点击，选择Run ‘ParkingApplication’。
观察控制台日志，如果没有报错，并看到类似以下的日志，说明启动成功：
Started ParkingApplication in 5.123 seconds (JVM running for 6.456) Tomcat started on port(s): 8080 (http) with context path ''6.4 测试后端API启动成功后，打开浏览器或Postman，访问SpringBoot内置的接口文档（如果集成了Swagger）或直接测试一个简单的健康检查接口。
- Swagger UI：如果项目引入了
springfox-boot-starter或springdoc-openapi，通常访问http://localhost:8080/swagger-ui.html或http://localhost:8080/swagger-ui/index.html可以看到所有API接口并进行测试。 - 健康检查：Spring Boot Actuator提供了一个健康端点，访问
http://localhost:8080/actuator/health，如果返回{"status":"UP"}，说明服务运行正常。 - 测试业务接口：用Postman测试一个简单的GET接口，比如获取所有停车场区域的接口（假设是
GET http://localhost:8080/api/parking-lots）。你应该能收到一个JSON格式的响应（可能是空数组，如果数据库里没数据）。
7. 前端Vue项目配置与启动
后端服务正常后，我们启动前端。
7.1 安装依赖
- 用VS Code或终端打开前端项目根目录（包含
package.json的文件夹）。 - 在终端中执行以下命令安装项目依赖：
这个过程可能会持续几分钟，取决于网络速度和依赖数量。如果遇到网络问题，可以配置npm淘宝镜像。npm install # 或使用 yarn yarn install # 或使用 pnpm pnpm install
7.2 配置后端API地址这是前后端联调的关键一步。前端需要知道后端服务运行在哪个地址和端口上。
- 方法一：修改环境变量文件。查看项目根目录下是否有
.env.development文件，修改其中的VUE_APP_API_BASE_URL（或其他类似变量）。# .env.development VUE_APP_API_BASE_URL=http://localhost:8080 - 方法二：修改axios的baseURL。找到
src/api/request.js或src/utils/request.js文件（负责创建axios实例的地方），修改baseURL。// src/api/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8080', // 确保这里正确 timeout: 10000 }); export default service; - 方法三：配置开发服务器代理。如果不想配置环境变量，可以在
vue.config.js中配置代理，将前端的/api请求转发到后端。
配置代理后，前端代码中请求// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, pathRewrite: { '^/api': '' // 如果后端接口本身没有/api前缀，可以重写掉 } } } } };/api/parking-lots会被转发到http://localhost:8080/parking-lots。
7.3 启动前端开发服务器在终端中执行启动命令，通常是：
npm run serve # 或 yarn serve # 或 pnpm dev成功启动后，终端会输出类似信息：
App running at: - Local: http://localhost:8081/ - Network: http://192.168.1.100:8081/打开浏览器，访问http://localhost:8081（端口可能不同），你应该能看到系统的登录页面或管理后台界面。
8. 核心功能实现与代码解读
项目跑起来后，我们深入几个核心业务点的代码，理解其实现逻辑。
8.1 车辆入场逻辑（后端）车辆入场时，后端需要创建一个停车记录，并更新对应停车区域的可用车位数量。这是一个典型的事务操作。
// ParkingRecordController.java @RestController @RequestMapping("/api/parking-record") public class ParkingRecordController { @Autowired private ParkingRecordService parkingRecordService; @PostMapping("/entry") public Result entry(@RequestBody VehicleEntryDTO entryDTO) { // 1. 参数校验（车牌号、停车场ID等） // 2. 调用服务层处理入场业务 ParkingRecord record = parkingRecordService.processEntry(entryDTO); return Result.success("入场成功", record); } } // ParkingRecordServiceImpl.java @Service @Transactional // 声明事务，保证以下操作原子性 public class ParkingRecordServiceImpl implements ParkingRecordService { @Autowired private ParkingRecordMapper parkingRecordMapper; @Autowired private ParkingLotMapper parkingLotMapper; @Override public ParkingRecord processEntry(VehicleEntryDTO dto) { // 1. 检查车位是否充足 ParkingLot parkingLot = parkingLotMapper.selectById(dto.getParkingLotId()); if (parkingLot == null || parkingLot.getAvailableSpaces() <= 0) { throw new BusinessException("该区域车位已满或不存在"); } // 2. 创建停车记录 ParkingRecord record = new ParkingRecord(); record.setLicensePlate(dto.getLicensePlate()); record.setParkingLotId(dto.getParkingLotId()); record.setEntryTime(new Date()); record.setStatus("PARKING"); parkingRecordMapper.insert(record); // 3. 更新停车场可用车位数量（减1） parkingLot.setAvailableSpaces(parkingLot.getAvailableSpaces() - 1); parkingLotMapper.updateById(parkingLot); return record; } }关键点：使用@Transactional注解确保“创建记录”和“更新车位”要么都成功，要么都失败，避免数据不一致。
8.2 车辆出场与计费逻辑出场时，需要计算停车费用，更新记录状态，并释放车位。
// ParkingRecordServiceImpl.java (续) @Override public ParkingRecord processExit(Long recordId) { // 1. 查询停车记录 ParkingRecord record = parkingRecordMapper.selectById(recordId); if (record == null || !"PARKING".equals(record.getStatus())) { throw new BusinessException("停车记录无效或车辆已出场"); } // 2. 计算停车费用（按小时计费，假设每小时5元） Date exitTime = new Date(); long durationMs = exitTime.getTime() - record.getEntryTime().getTime(); long hours = (durationMs / (1000 * 60 * 60)) + 1; // 不足1小时按1小时算 BigDecimal fee = BigDecimal.valueOf(hours * 5.0); // 3. 更新停车记录 record.setExitTime(exitTime); record.setStatus("COMPLETED"); record.setFee(fee); parkingRecordMapper.updateById(record); // 4. 释放车位（可用车位加1） ParkingLot parkingLot = parkingLotMapper.selectById(record.getParkingLotId()); parkingLot.setAvailableSpaces(parkingLot.getAvailableSpaces() + 1); parkingLotMapper.updateById(parkingLot); return record; }8.3 前端车辆入场表单与API调用（Vue + Element UI）前端需要提供一个表单供用户输入车牌号和选择停车场，并调用后端的入场接口。
<!-- EntryForm.vue --> <template> <el-form :model="entryForm" :rules="rules" ref="formRef"> <el-form-item label="车牌号" prop="licensePlate"> <el-input v-model="entryForm.licensePlate" placeholder="请输入车牌号"></el-input> </el-form-item> <el-form-item label="选择区域" prop="parkingLotId"> <el-select v-model="entryForm.parkingLotId" placeholder="请选择"> <el-option v-for="lot in parkingLots" :key="lot.id" :label="lot.name" :value="lot.id"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="handleEntry">确认入场</el-button> </el-form-item> </el-form> </template> <script> import { entryVehicle } from '@/api/parking'; // 导入封装好的API函数 export default { data() { return { entryForm: { licensePlate: '', parkingLotId: null }, parkingLots: [], // 从后端获取的停车场列表 rules: { licensePlate: [{ required: true, message: '请输入车牌号', trigger: 'blur' }], parkingLotId: [{ required: true, message: '请选择停车区域', trigger: 'change' }] } }; }, created() { this.fetchParkingLots(); }, methods: { async fetchParkingLots() { try { const res = await getParkingLots(); // 调用获取停车场列表的API this.parkingLots = res.data; } catch (error) { this.$message.error('获取停车场列表失败'); } }, async handleEntry() { this.$refs.formRef.validate(async (valid) => { if (valid) { try { const res = await entryVehicle(this.entryForm); // 调用入场API this.$message.success(res.message || '入场成功'); // 清空表单或刷新列表 this.entryForm = { licensePlate: '', parkingLotId: null }; } catch (error) { this.$message.error(error.response?.data?.message || '入场失败'); } } }); } } }; </script>// src/api/parking.js import request from '@/utils/request'; export function getParkingLots() { return request({ url: '/parking-lots', method: 'get' }); } export function entryVehicle(data) { return request({ url: '/parking-record/entry', method: 'post', data }); }关键点：前端通过axios封装的request发起HTTP请求，使用async/await处理异步，并用Element UI的组件和表单验证提供良好的用户体验。
9. 系统部署与打包
开发调试完成后，你可能需要将项目打包，部署到服务器或提交给老师。
9.1 后端打包（SpringBoot）SpringBoot项目通常打包成一个可执行的JAR文件。
- 在IDEA右侧的Maven工具栏中，找到项目 -> Lifecycle ->
package，双击执行。 - 或者，在项目根目录下执行命令：
mvn clean package -DskipTests-DskipTests表示跳过测试，加快打包速度。 - 打包成功后，在
target/目录下会生成一个smart-parking-backend-0.0.1-SNAPSHOT.jar文件（名称可能不同）。
9.2 前端打包（Vue）Vue项目需要打包成静态资源。
- 在前端项目根目录下执行：
npm run build # 或 yarn build - 打包成功后，会生成一个
dist/文件夹，里面包含了index.html和所有压缩后的JS、CSS文件。
9.3 部署方式
- 方式一：前后端分离部署（推荐）：
- 将后端JAR包上传到服务器，用
java -jar your-app.jar命令启动（可配合nohup或systemd守护进程）。 - 将前端
dist文件夹内的所有文件，放到Nginx或Apache的静态资源目录下。 - 配置Nginx，将API请求反向代理到后端服务。
# nginx.conf 部分配置 server { listen 80; server_name your-domain.com; # 或服务器IP # 前端静态资源 location / { root /path/to/your/dist; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 后端API代理 location /api/ { proxy_pass http://localhost:8080/; # 后端服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }
- 将后端JAR包上传到服务器，用
- 方式二：前后端合并部署（简化）：
- 将前端
dist文件夹内的所有文件，复制到SpringBoot项目的src/main/resources/static/目录下。 - 重新打包SpringBoot项目。这样，一个JAR包就同时包含了后端服务和前端页面。访问
http://localhost:8080即可。 - 注意：这种方式需要确保SpringBoot的静态资源映射配置正确，且前端路由使用hash模式（
mode: 'hash'）以避免刷新404。
- 将前端
10. 常见问题与排查指南
在运行和部署过程中，你几乎一定会遇到以下问题。这里提供排查思路。
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 后端启动失败，端口被占用 | 8080端口已被其他程序（如另一个SpringBoot应用、Tomcat）使用。 | 1. 查看控制台错误信息。 2. 命令行执行 netstat -ano | findstr :8080(Windows) 或lsof -i:8080(Mac/Linux)。 | 1. 终止占用端口的进程。 2. 修改 application.yml中的server.port为其他端口，如8088。 |
| 后端连接数据库失败 | 1. 数据库服务未启动。 2. application.yml中数据库配置（URL、用户名、密码）错误。3. 数据库驱动版本不匹配。 | 1. 检查MySQL服务是否运行。 2. 仔细核对配置文件，特别是密码和数据库名。 3. 查看启动日志中的具体错误信息。 | 1. 启动MySQL服务。 2. 修正配置文件。 3. 检查 pom.xml中MySQL驱动版本是否与本地MySQL版本兼容。 |
前端npm install失败 | 1. 网络问题，无法连接到npm仓库。 2. Node.js版本与项目要求不符。 3. 依赖包存在冲突。 | 1. 检查网络，使用npm config get registry查看镜像源。2. 使用 node -v检查版本。3. 查看错误日志，通常会有明确提示。 | 1. 切换npm镜像源为淘宝源：npm config set registry https://registry.npmmirror.com。2. 使用nvm管理Node.js版本，切换到项目要求的版本。 3. 尝试删除 node_modules和package-lock.json，重新npm install。 |
| 前端运行后页面空白或报错 | 1. 后端服务未启动或地址配置错误。 2. 跨域问题（CORS）。 3. 前端路由模式与部署方式不匹配。 | 1. 打开浏览器开发者工具（F12），查看Console和Network标签页。 2. Network中查看API请求是否返回404或跨域错误。 | 1. 确保后端服务已启动，并检查前端配置的baseURL或代理设置是否正确。2. 在后端SpringBoot中添加CORS配置类，允许前端域名访问。 3. 如果使用history模式部署到Nginx，需配置 try_files；如果打包进SpringBoot，建议使用hash模式。 |
| 页面能打开，但登录失败或数据不显示 | 1. 数据库中没有对应的用户或测试数据。 2. 接口路径或参数错误。 3. 后端业务逻辑有bug。 | 1. 检查数据库对应表是否有数据。 2. 使用Postman直接测试后端接口，看是否正常返回数据。 3. 查看后端控制台日志，是否有SQL异常或业务异常抛出。 | 1. 执行提供的SQL脚本，初始化数据。 2. 对照前端Network中的请求和后端Controller的路径，确保一致。 3. 根据后端日志调试代码逻辑。 |
| 打包后运行，静态资源404 | 1. 前端资源路径错误（如使用了绝对路径）。 2. 部署服务器未正确配置静态资源目录。 | 1. 检查打包后的dist/index.html中引用的JS/CSS文件路径。2. 检查Nginx配置的 root目录是否正确指向dist文件夹。 | 1. 在Vue项目的vue.config.js中配置publicPath为./（相对路径）。2. 仔细检查服务器配置，确保静态资源可访问。 |
11. 项目扩展与优化建议
如果你希望这个项目在课设或毕设中脱颖而出，可以考虑以下扩展方向：
- 引入权限控制：使用Spring Security或Shiro实现更精细的RBAC（角色基于权限控制）模型。区分超级管理员、停车场管理员、普通用户，不同角色看到不同的菜单和操作权限。
- 集成支付模块：模拟微信支付或支付宝支付。可以接入沙箱环境，实现从生成订单、调用支付接口到更新支付状态的完整流程。
- 增加数据可视化：使用ECharts或AntV，在管理后台展示停车场利用率折线图、每日收入柱状图、热门时段饼图等。
- 实现车位预约功能：允许用户提前预约车位，并在预约时间到达前保留车位。这涉及到更复杂的车位状态管理（空闲、已预约、已占用）。
- 添加车辆识别接口：模拟调用第三方AI车牌识别API。在入场时，上传图片，后端调用识别服务解析出车牌号，自动填入系统。
- 引入消息队列：对于出场计费这种可能耗时的操作，可以放入消息队列（如RabbitMQ、Kafka）异步处理，提高系统响应速度。
- 编写单元测试：为后端的Service层关键方法编写JUnit单元测试，提高代码质量和可维护性。
- 容器化部署：编写Dockerfile，将后端和前端分别构建成Docker镜像，使用
docker-compose.yml一键启动整个应用（包含MySQL、SpringBoot、Nginx）。
这个基于SpringBoot+Vue的智慧停车场管理系统项目，为你提供了一个绝佳的、贴近企业实战的开发学习场景。从环境搭建、数据库设计、API开发、前后端联调，到最后的打包部署，你完整地走完了一个Web应用的生命周期。过程中遇到的每一个错误和解决方案，都是宝贵的经验。
希望这篇详细的指南不仅能帮你顺利跑通项目，完成作业，更能让你理解每个环节背后的“为什么”。技术学习的道路很长，但每一次完整的项目实践，都是向前迈出的坚实一步。建议你将此项目作为起点，尝试上面提到的扩展功能，或者用同样的技术栈去实现一个你自己的业务想法。
🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Qwen 随心用，限时 5 折。 👉 点击领海量免费额度
