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在8081SpringBoot在8080并通过配置解决跨域问题。3. 环境准备与工具清单在打开源码之前请确保你的开发环境已就绪。以下清单是项目运行的基石缺少任何一项都可能导致启动失败。3.1 后端开发环境JDK版本8或11、17推荐。SpringBoot 2.x/3.x 对JDK版本有要求请根据项目pom.xml中的java.version确定。安装后配置JAVA_HOME环境变量。# 检查版本 java -versionMaven版本3.6。用于管理项目依赖、构建和打包。同样需要配置环境变量。# 检查版本 mvn -vIDEIntelliJ 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_PASSWORD123456 mysql:83.2 前端开发环境Node.js版本14或16、18LTS版本。它包含了npm包管理器。Vue CLI或Vite构建工具依赖于Node.js。# 检查版本 node -v npm -v包管理器npm或yarn、pnpm。项目package.json中会指定依赖需要用它们来安装。IDEVisual 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) ) ENGINEInnoDB 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) ) ENGINEInnoDB 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) ) ENGINEInnoDB COMMENT停车记录表;payment_record支付记录表。与停车记录关联记录支付详情。执行完SQL脚本后务必检查这些表是否创建成功并浏览一下表里的示例数据这对后续理解业务逻辑非常有帮助。6. 后端SpringBoot项目配置与启动现在我们开始配置并启动后端服务。6.1 导入项目并配置数据库用IDEA打开后端项目根目录包含pom.xml的文件夹。等待Maven自动下载依赖右下角有进度条。如果下载慢或失败可以检查Maven的settings.xml配置国内镜像源如阿里云。找到src/main/resources/application.yml(或application.properties)。修改数据库连接配置确保与你的本地MySQL环境一致。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_parking?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root password: 123456 # 修改为你的MySQL root密码 jpa: hibernate: ddl-auto: update # 可选设置为update程序启动时会根据实体类自动更新表结构谨慎用于生产 show-sql: true # 开发时开启方便查看执行的SQL server: port: 8080 # 后端服务启动端口注意如果项目使用的是MyBatis配置可能略有不同但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 install # 或使用 yarn yarn install # 或使用 pnpm pnpm install这个过程可能会持续几分钟取决于网络速度和依赖数量。如果遇到网络问题可以配置npm淘宝镜像。7.2 配置后端API地址这是前后端联调的关键一步。前端需要知道后端服务运行在哪个地址和端口上。方法一修改环境变量文件。查看项目根目录下是否有.env.development文件修改其中的VUE_APP_API_BASE_URL或其他类似变量。# .env.development VUE_APP_API_BASE_URLhttp://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 :modelentryForm :rulesrules refformRef el-form-item label车牌号 proplicensePlate el-input v-modelentryForm.licensePlate placeholder请输入车牌号/el-input /el-form-item el-form-item label选择区域 propparkingLotId el-select v-modelentryForm.parkingLotId placeholder请选择 el-option v-forlot in parkingLots :keylot.id :labellot.name :valuelot.id /el-option /el-select /el-form-item el-form-item el-button typeprimary clickhandleEntry确认入场/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 后端打包SpringBootSpringBoot项目通常打包成一个可执行的JAR文件。在IDEA右侧的Maven工具栏中找到项目 - Lifecycle -package双击执行。或者在项目根目录下执行命令mvn clean package -DskipTests-DskipTests表示跳过测试加快打包速度。打包成功后在target/目录下会生成一个smart-parking-backend-0.0.1-SNAPSHOT.jar文件名称可能不同。9.2 前端打包VueVue项目需要打包成静态资源。在前端项目根目录下执行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; } }方式二前后端合并部署简化将前端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. 根据后端日志调试代码逻辑。打包后运行静态资源4041. 前端资源路径错误如使用了绝对路径。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。这个基于SpringBootVue的智慧停车场管理系统项目为你提供了一个绝佳的、贴近企业实战的开发学习场景。从环境搭建、数据库设计、API开发、前后端联调到最后的打包部署你完整地走完了一个Web应用的生命周期。过程中遇到的每一个错误和解决方案都是宝贵的经验。希望这篇详细的指南不仅能帮你顺利跑通项目完成作业更能让你理解每个环节背后的“为什么”。技术学习的道路很长但每一次完整的项目实践都是向前迈出的坚实一步。建议你将此项目作为起点尝试上面提到的扩展功能或者用同样的技术栈去实现一个你自己的业务想法。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度