SpringBoot+Vue智慧停车场管理系统：从零搭建到二次开发的完整指南-育师

🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Claude 随心用，限时 5 折。 👉 点击领海量免费额度

这次我们来看一个面向Java学习者和毕业设计需求的实战项目：基于SpringBoot+Vue的智慧停车场管理系统。这个项目直接瞄准了高校计算机专业学生最头疼的几件事：期末大作业、课程设计、毕业设计。它提供了一个完整的前后端分离解决方案，自带源码、数据库和技术文档，目标就是让你能快速跑起来，理解核心业务流程，并在此基础上进行二次开发。

项目最核心的价值在于它的“完整性”和“可落地性”。它不是一堆零散的代码片段，而是一个具备完整业务模块、数据库设计、前后端交互和基础管理界面的系统。对于初学者来说，最大的障碍往往不是写不出某段代码，而是不知道一个完整的项目应该如何从零搭建，各个模块之间如何协作。这个项目正好提供了一个清晰的范本。从技术栈来看，后端采用主流的SpringBoot框架，整合了MyBatis-Plus、Spring Security等常用组件；前端则使用Vue.js生态，配合Element-UI等组件库，构建了现代化的管理后台。这种技术组合在当前的就业市场和实际开发中应用非常广泛，掌握它对于构建个人技术竞争力很有帮助。

本文将带你从零开始，完成这个智慧停车场管理系统的本地环境搭建、项目启动、功能测试和核心代码走读。我们会重点关注几个实际问题：你的电脑环境需要准备什么（JDK、Maven、Node.js、MySQL）？如何一键导入数据库？前后端项目如何分别启动并实现联调？系统的核心功能，如车位管理、停车计费、数据统计等模块是如何实现的？最后，我们还会探讨如何基于这个基础项目进行扩展，以满足你个性化的大作业或毕设需求。无论你是急需完成作业的学生，还是想通过实战巩固SpringBoot和Vue技能的开发者，这篇文章都能提供一条清晰的路径。

1. 核心能力速览

在深入细节之前，我们先通过一个表格快速了解这个项目的全貌和关键信息，帮助你判断它是否适合你当前的需求。

能力项	说明
项目类型	企业级Web应用 / 教学演示项目 / 毕设课设模板
技术架构	前后端分离 (SpringBoot + Vue.js)
后端技术栈	Spring Boot, MyBatis-Plus, Spring Security, JWT, Maven
前端技术栈	Vue.js, Element-UI, Axios, Vue Router
数据库	MySQL 5.7 / 8.0
核心功能模块	用户权限管理、停车场/车位管理、车辆进出记录、计费规则设置、收费统计报表、数据可视化看板
部署方式	本地开发环境部署（需分别启动后端服务和前端服务）
接口规范	RESTful API
适合场景	Java/Vue初学者练手、高校期末大作业、课程设计、毕业设计项目、全栈开发入门
资源门槛	普通开发电脑即可（需安装JDK、Node.js、MySQL、IDEA/VSCode）

从表格可以看出，这是一个非常典型的基于现代Java和前端技术栈的业务管理系统。它不依赖特殊的GPU或硬件，重点在于软件环境的配置和业务逻辑的理解。项目结构清晰，适合用于学习企业级应用的分层架构和开发流程。

2. 适用场景与使用边界

适合谁用？

计算机相关专业的在校学生：面临Java Web、软件工程、数据库系统等课程的期末大作业或课程设计，需要快速找到一个结构完整、技术栈主流的项目作为基础。
即将进行毕业设计的同学：需要一个具备一定复杂度和可扩展性的系统作为毕设选题，智慧停车场管理系统业务明确，模块清晰，易于添加新的功能（如车牌识别接口对接、移动端小程序、大数据分析等）。
刚入门SpringBoot和Vue的全栈开发者：希望通过一个完整的项目来串联起前后端知识，理解从数据库设计、API接口编写到前端页面渲染和数据交互的全过程。
需要项目经验填充简历的求职者：可以作为个人作品集中的一个项目，展示对SpringBoot、Vue、MySQL等技术的综合应用能力。

能解决什么问题？

项目无从下手：提供了一套可直接运行的项目源码和数据库脚本，让你跳过从零搭建的迷茫期。
技术栈整合不熟：演示了SpringBoot如何整合MyBatis-Plus操作数据库、如何使用Spring Security和JWT进行权限控制、前后端如何通过RESTful API进行数据交互。
业务逻辑抽象困难：通过停车场管理这一具体业务，展示了如何将现实中的车辆进出、停车计费、车位管理等流程抽象为数据库表设计和后台逻辑。
前端页面开发效率低：使用Element-UI组件库快速搭建管理后台界面，学习如何组织Vue的路由、组件和状态管理。

不适合什么场景？

生产环境直接商用：作为一个教学演示项目，它在安全性、高并发处理、异常恢复、代码健壮性等方面可能未经过严格的生产级测试，不建议直接部署到线上商业环境。
寻求尖端技术研究：项目采用的是稳定、主流的技术栈，而非最新的实验性技术（如GraalVM、Spring Native、Vue 3组合式API等）。
仅需要某个特定片段代码：如果你只想学习某个特定功能（如JWT登录），该项目代码可供参考，但需要你具备从完整项目中剥离和理解该部分代码的能力。

使用边界与合规提醒：

版权与原创性：本项目源码及配套资料应遵循其提供的开源协议（如MIT、GPL等）。用于课程作业或毕业设计时，必须进行充分的二次开发和理解，加入自己的设计思路和代码，避免直接复制粘贴导致的学术不端行为。
数据安全：项目中涉及用户信息、车辆信息等数据，在学习和测试过程中应使用模拟数据，并注意数据库的访问权限设置，避免敏感信息泄露。
合法合规：该系统模拟的是停车场管理业务，在实际应用时需考虑与真实支付渠道、道闸硬件、车牌识别系统的对接，并遵守相关的金融、交通数据安全管理规定。

3. 环境准备与前置条件

在启动项目之前，请确保你的本地开发环境已满足以下要求。这是项目能够成功运行的基础。

3.1 硬件与操作系统

操作系统：Windows 10/11, macOS, 或 Linux 发行版（如Ubuntu）均可。本文演示以Windows环境为主。
内存：建议8GB及以上。运行IDE、数据库、前后端服务需要一定内存。
磁盘空间：预留至少2GB空间用于安装开发工具和项目文件。

3.2 软件环境清单请按顺序安装和配置以下软件，并记录好安装路径和版本号。

Java开发工具包 (JDK)：
- 版本：JDK 8 或 JDK 11（推荐）。Spring Boot 2.x 对这两个版本支持最好。
- 验证：打开命令行，输入java -version，应显示对应的版本信息。
- 环境变量：务必正确配置JAVA_HOME和将%JAVA_HOME%\bin加入PATH。
Apache Maven：
- 作用：用于管理Spring Boot项目的依赖、构建和打包。
- 版本：3.6.x 及以上。
- 验证：命令行输入mvn -v，应显示Maven版本和Java版本信息。
- 环境变量：配置MAVEN_HOME并将%MAVEN_HOME%\bin加入PATH。配置国内镜像源（如阿里云镜像）可以极大加速依赖下载。
Node.js 与 npm：
- 作用：Node.js是Vue.js项目的运行环境，npm是其包管理工具。
- 版本：推荐安装LTS（长期支持版），如 Node.js 16.x 或 18.x。这通常也包含了兼容的npm版本。
- 验证：命令行输入node -v和npm -v，应显示版本号。
- 注意：如果下载包速度慢，可以配置淘宝NPM镜像：npm config set registry https://registry.npmmirror.com
MySQL数据库：
- 版本：MySQL 5.7 或 8.0。
- 安装：从官网下载安装包或使用集成环境（如XAMPP、PHPStudy中的MySQL）。
- 必须步骤：
  - 安装过程中记住设置的root用户密码。
  - 安装完成后，启动MySQL服务。
  - 使用命令行或图形化工具（如Navicat、MySQL Workbench）登录MySQL。
  - 创建一个专门用于本项目的数据库，例如命名为smart_parking。字符集建议使用utf8mb4，排序规则使用utf8mb4_general_ci。
```
CREATE DATABASE `smart_parking` CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
```
集成开发环境 (IDE)：
- 后端 (Java)：推荐使用IntelliJ IDEA Ultimate或Community版，或者 Eclipse。IDEA对Spring Boot支持更好。
- 前端 (Vue)：推荐使用Visual Studio Code (VSCode)，轻量且插件生态丰富。WebStorm也是专业选择。
版本控制工具 (可选但推荐)：
- Git：用于克隆项目源码。安装Git并配置用户信息。
- 验证：命令行输入git --version。

3.3 获取项目资源通常，这类“毕设课设”项目会以一个压缩包或Git仓库链接的形式提供。请确保你获得了至少包含以下内容的资源：

backend/或类似命名的SpringBoot后端项目文件夹。
frontend/或类似命名的Vue前端项目文件夹。
database/文件夹，内含SQL脚本文件（如smart_parking.sql）。
文档/文件夹，可能包含需求说明书、设计文档、部署手册等（如果有）。

请将这些资源解压到一个你容易找到的目录，例如D:\Projects\SmartParking。

4. 安装部署与启动方式

环境准备好后，我们开始项目的部署和启动。整个过程分为三个主要步骤：数据库初始化、后端服务启动、前端服务启动。

4.1 数据库初始化这是第一步，为系统提供数据存储。

找到项目资源中的SQL脚本文件（通常是.sql结尾）。
使用MySQL客户端工具（如Navicat、命令行或Workbench）连接到你的MySQL服务。
选择或切换到之前创建的smart_parking数据库。
执行SQL脚本。在Navicat中，你可以直接打开SQL文件并运行；在命令行中，可以使用source命令。
```
# 在MySQL命令行中 USE smart_parking; SOURCE D:/Projects/SmartParking/database/smart_parking.sql;
```
执行成功后，查看数据库，应该会看到一系列表被创建，例如sys_user（用户表）、parking_lot（停车场表）、parking_space（车位表）、vehicle_record（车辆进出记录表）等。

4.2 后端SpringBoot项目启动后端项目负责提供所有RESTful API接口和业务逻辑。

导入项目：用IntelliJ IDEA打开后端项目文件夹（backend）。
等待依赖下载：IDEA会自动识别为Maven项目并开始下载pom.xml中定义的依赖。请确保网络通畅，并检查Maven配置的镜像源是否有效。这个过程可能需要几分钟。

修改配置文件：找到配置文件，通常是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?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root # 你的MySQL用户名 password: your_password # 你的MySQL密码 ...

启动主类：在IDEA中找到SpringBoot的主启动类（通常是被@SpringBootApplication注解的类，例如SmartParkingApplication.java），右键点击选择Run。
验证启动：观察控制台日志。如果看到类似Tomcat started on port(s): 8080或Started SmartParkingApplication in X seconds的日志，说明后端服务启动成功。你可以在浏览器访问http://localhost:8080（如果端口是8080），可能会看到一个简单的错误页面（因为没提供前端页面），这很正常，说明服务在运行。

4.3 前端Vue项目启动前端项目负责提供用户交互界面。

打开项目：用VSCode打开前端项目文件夹（frontend）。
安装依赖：在VSCode的终端或系统命令行中，进入前端项目根目录，运行以下命令安装项目所需的npm包。
```
cd frontend npm install
```
如果网络较慢，可以使用cnpm install（需先安装cnpm）或配置了淘宝镜像的npm install。

配置API代理：前端需要知道后端API的地址。通常，在开发环境下，Vue项目会通过vue.config.js文件配置代理，将API请求转发到后端服务。检查或修改该文件：

// vue.config.js module.exports = { devServer: { proxy: { '/api': { // 假设你的后端接口都以 /api 开头 target: 'http://localhost:8080', // 后端服务地址和端口 changeOrigin: true, pathRewrite: { '^/api': '' } } } } }

启动开发服务器：在终端中运行启动命令。
```
npm run serve
```
命令执行后，终端会输出本地访问地址，通常是http://localhost:8081或http://localhost:3000。
验证启动：打开浏览器，访问终端输出的地址（如http://localhost:8081）。如果看到登录页面或系统首页，说明前端启动成功。

至此，前后端服务均已启动，一个完整的智慧停车场管理系统已经在你的本地运行起来了。

5. 功能测试与效果验证

系统跑起来后，我们通过实际操作来验证核心功能是否正常。建议你按照以下流程，像真正的系统管理员一样体验一遍。

5.1 系统登录与权限验证

访问系统：打开浏览器，访问前端地址（如http://localhost:8081）。
登录测试：
- 使用SQL脚本中预设的账号密码登录（常见预设账号：admin，密码：admin123或123456，具体查看SQL脚本或文档）。
- 输入账号密码，点击登录。
- 预期结果：登录成功，跳转到系统主页面或仪表盘。
- 验证点：登录流程是否通畅；登录后，浏览器开发者工具的Application->Storage->Local Storage或Cookies中是否存有Token（JWT），这代表了前后端认证成功。

5.2 停车场与车位管理这是系统的核心数据基础。

进入管理页面：在系统菜单中找到“停车场管理”或“车位管理”。
添加停车场：
- 点击“新增”按钮。
- 填写停车场信息，如名称、地址、总车位数、联系电话等。
- 点击保存。
- 预期结果：页面列表刷新，显示新添加的停车场。同时，去数据库parking_lot表中查看，应有一条对应的新记录。
管理车位：
- 选择某个停车场，进入其“车位管理”子页面。
- 尝试“批量生成车位”功能（如果有），或手动添加几个车位，设置车位编号（如A001, A002）和状态（空闲、占用、维修中）。
- 预期结果：车位列表正确显示，状态标识清晰。数据库parking_space表应有对应记录。

5.3 车辆进出场与计费模拟模拟真实的停车业务流。

车辆入场：
- 在“车辆入场”或“停车记录”页面，进行入场操作。
- 输入车牌号（如京A12345），选择或系统自动分配一个空闲车位。
- 点击“入场”确认。
- 预期结果：生成一条入场记录，该车位的状态应自动变为“占用”。数据库vehicle_record表新增一条记录，entry_time被填充，exit_time和fee为空。
车辆出场与计费：
- 等待一段时间（或手动修改数据库中的入场时间以模拟长时间停车）。
- 找到刚才的入场记录，进行“出场”操作。
- 预期结果：系统自动计算停车时长，根据预设的计费规则（如每小时5元）计算出费用，并更新记录。对应的车位状态自动恢复为“空闲”。出场操作完成后，记录中的exit_time和fee字段被填充。

5.4 数据统计与报表查看验证系统的数据分析能力。

收入统计：查看“收费统计”、“日报表/月报表”等页面。
车位使用率：查看“数据看板”或“仪表盘”，通常会有图表展示当前车位占用率、今日收入趋势等。
历史记录查询：在“停车记录”页面，使用车牌号、时间范围等条件进行查询。
预期结果：所有统计和查询结果应能正确展示，数据与你在前面步骤中操作的记录相符。这验证了后端业务逻辑和前端数据渲染的准确性。

5.5 用户与权限管理（如果系统包含）

角色管理：查看系统是否有“管理员”、“普通员工”等角色划分。
用户管理：尝试添加一个新用户，并为其分配角色和权限。
菜单权限：使用新用户账号登录，查看其能访问的菜单和功能是否与分配的角色权限一致。
预期结果：权限控制系统（如Spring Security + JWT）工作正常，不同角色用户只能访问被授权的资源。

完成以上测试，意味着这个智慧停车场管理系统的主要业务流程在你的本地环境是完整且可用的。

6. 接口API与后端核心逻辑剖析

对于学习和二次开发来说，理解后端API的设计和核心业务逻辑至关重要。我们深入代码层看一看。

6.1 API接口概览启动后端服务后，Spring Boot通常会集成Swagger或Knife4j等API文档工具。访问http://localhost:8080/doc.html或http://localhost:8080/swagger-ui.html，你可能看到一个清晰的API列表。如果没有，可以通过查看Controller层代码来了解。典型的API包括：

POST /api/auth/login- 用户登录
GET /api/parking-lot- 获取停车场列表
POST /api/parking-lot- 新增停车场
GET /api/parking-space/{lotId}- 获取指定停车场的车位
POST /api/vehicle/entry- 车辆入场
PUT /api/vehicle/exit/{recordId}- 车辆出场
GET /api/statistics/daily- 获取每日统计

6.2 核心业务逻辑代码示例以“车辆出场计费”这个核心业务为例，我们来看后端是如何实现的。这通常位于一个Service类中。

// VehicleRecordService.java (示例代码，具体类名可能不同) @Service public class VehicleRecordService { @Autowired private VehicleRecordMapper vehicleRecordMapper; @Autowired private ParkingSpaceMapper parkingSpaceMapper; @Autowired private FeeRuleService feeRuleService; // 计费规则服务 @Transactional // 启用事务，保证数据一致性 public boolean vehicleExit(Long recordId) { // 1. 根据记录ID查询入场记录 VehicleRecord record = vehicleRecordMapper.selectById(recordId); if (record == null || record.getExitTime() != null) { throw new BusinessException("记录不存在或车辆已出场"); } // 2. 计算停车时长和费用 LocalDateTime entryTime = record.getEntryTime(); LocalDateTime exitTime = LocalDateTime.now(); // 实际出场时间 long durationMinutes = Duration.between(entryTime, exitTime).toMinutes(); // 3. 调用计费规则服务计算费用 BigDecimal fee = feeRuleService.calculateFee(durationMinutes); // 4. 更新车辆记录 record.setExitTime(exitTime); record.setFee(fee); record.setStatus("已出场"); vehicleRecordMapper.updateById(record); // 5. 释放关联的车位，将其状态改为“空闲” ParkingSpace space = parkingSpaceMapper.selectById(record.getSpaceId()); if (space != null) { space.setStatus("空闲"); parkingSpaceMapper.updateById(space); } // 6. 可以在这里添加其他逻辑，如生成收费单据、发送通知等 // generateInvoice(record); return true; } }

这段伪代码清晰地展示了出场业务的步骤：查询验证 -> 计算时长 -> 根据规则计费 -> 更新记录 -> 释放车位。@Transactional注解确保了这些数据库操作要么全部成功，要么全部回滚，防止出现“钱收了但车位没释放”的数据不一致情况。

6.3 前端调用API示例前端通过Axios等HTTP库调用这些API。以出场操作为例：

// 在Vue组件的方法中 async handleVehicleExit(recordId) { try { const response = await this.$axios.put(`/api/vehicle/exit/${recordId}`); if (response.data.code === 200) { // 假设后端返回标准格式 {code:200, data:..., msg:'成功'} this.$message.success('车辆出场成功！'); // 刷新列表数据 this.fetchRecordList(); } else { this.$message.error(response.data.msg); } } catch (error) { this.$message.error('操作失败：' + error.message); } }

理解前后端这种基于HTTP API的交互模式，是掌握前后端分离开发的关键。

7. 项目结构与二次开发指引

为了让你能更好地在此基础上进行修改和扩展，我们来梳理一下项目的典型目录结构。

7.1 后端项目结构 (Spring Boot)

backend/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com.smart.parking/ # 你的包名 │ │ │ ├── SmartParkingApplication.java # 主启动类 │ │ │ ├── config/ # 配置类 (Web, Security, Mybatis等) │ │ │ ├── controller/ # 控制器层，接收请求，返回响应 │ │ │ ├── service/ # 业务逻辑层接口 │ │ │ ├── service/impl/ # 业务逻辑层实现 │ │ │ ├── mapper/ # MyBatis-Plus的Mapper接口 (或dao/) │ │ │ ├── entity/ # 实体类，对应数据库表 │ │ │ ├── dto/ # 数据传输对象 (Data Transfer Object) │ │ │ ├── vo/ # 视图对象 (View Object) │ │ │ └── utils/ # 工具类 │ │ └── resources/ │ │ ├── application.yml # 主配置文件 │ │ └── mapper/ # MyBatis的XML映射文件 (如果用XML方式) │ └── test/ # 单元测试 ├── pom.xml # Maven依赖管理文件 └── target/ # 编译输出目录 (运行后生成)

7.2 前端项目结构 (Vue)

frontend/ ├── public/ # 静态资源 (index.html, favicon等) ├── src/ │ ├── api/ # 存放所有API请求函数 (使用axios) │ ├── assets/ # 静态资源 (图片，样式) │ ├── components/ # 可复用的Vue组件 │ ├── router/ # Vue Router路由配置 │ ├── store/ # Vuex状态管理 (如果用了) │ ├── utils/ # 工具函数 │ ├── views/ # 页面级组件 (对应各个路由页面) │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── vue.config.js # Vue CLI项目配置文件 ├── package.json # 项目依赖和脚本 └── README.md

7.3 二次开发建议

修改业务逻辑：主要关注backend/src/main/java/com.smart.parking/service/impl/下的服务实现类。
增加新的API：
- 在entity包下创建新的实体类。
- 在mapper包下创建对应的Mapper接口。
- 在service和service/impl下创建业务接口和实现。
- 在controller包下创建新的Controller，定义API路径。
- 最后，在前端src/api/下添加对应的请求函数，并在src/views/下创建新的页面组件来调用它。
修改页面样式：调整frontend/src/components/或views/下的Vue组件中的<style>部分，或修改assets/下的全局样式。
添加新依赖：
- 后端：在pom.xml的<dependencies>部分添加新的<dependency>，然后IDEA会自动下载。
- 前端：在项目根目录下运行npm install [package-name] --save。

8. 常见问题与排查方法

在部署和运行过程中，你可能会遇到一些问题。下表列出了常见问题及其解决方法。

问题现象	可能原因	排查方式	解决方案
后端启动失败，端口冲突	本地8080端口被其他程序（如另一个Tomcat、Skype）占用。	查看启动日志，是否有`Port 8080 was already in use`错误。	1. 在`application.yml`中修改`server.port`为其他端口（如8090）。 2. 在命令行用`netstat -ano \| findstr :8080`找到占用进程并结束它。
前端`npm install`失败或极慢	网络连接问题，或npm源访问慢。	观察错误信息，常见有网络超时或证书错误。	1. 配置淘宝镜像源：`npm config set registry https://registry.npmmirror.com` 2. 使用`cnpm`。 3. 检查网络代理设置。
前端运行`npm run serve`失败	Node.js版本不兼容，或项目依赖损坏。	查看命令行报错信息，通常会有明确提示。	1. 确认Node.js版本符合要求（LTS版本）。 2. 删除`node_modules`文件夹和`package-lock.json`，重新运行`npm install`。
数据库连接失败	`application.yml`中数据库配置错误，或MySQL服务未启动。	查看后端启动日志，是否有`Access denied`或`Unknown database`错误。	1. 检查`url`,`username`,`password`是否正确。 2. 确认MySQL服务已启动（服务列表或`mysql -u root -p`能登录）。 3. 确认数据库`smart_parking`已创建。
登录成功但页面跳转后无数据或401错误	前端请求API时未携带Token，或Token过期/无效。	打开浏览器开发者工具，查看`Network`选项卡，检查请求头中是否有`Authorization: Bearer xxx`。	1. 检查前端登录逻辑，是否将后端返回的Token正确存储（如localStorage）并在后续请求中设置到请求头。 2. 检查后端Spring Security的JWT配置，如密钥、过期时间。
页面显示正常，但操作（增删改查）无效	前端API请求地址错误，或后端Controller路径不匹配。	在浏览器开发者工具`Network`中查看操作触发的请求，看URL、方法（GET/POST/PUT/DELETE）、参数是否正确，以及后端返回的响应状态码和消息。	1. 核对`vue.config.js`中的代理配置和后端实际接口地址。 2. 对照后端Controller的`@RequestMapping`或`@PostMapping`等注解路径。
修改代码后前端页面无变化	浏览器缓存，或Vue开发服务器热更新未生效。	检查终端中Vue服务是否在运行，是否有编译错误。	1. 浏览器按`Ctrl+F5`强制刷新。 2. 在VSCode终端中重启前端服务 (`Ctrl+C`停止，再`npm run serve`)。 3. 检查代码是否有语法错误导致编译失败。

9. 项目打包与部署

当你完成开发和测试，可能需要将项目打包，用于演示或部署到简单的服务器。

9.1 后端打包 (Spring Boot)Spring Boot项目可以打包成一个可执行的JAR文件，内嵌了Tomcat服务器。

在IDEA的Maven工具栏中，依次执行clean->package。
或者在项目根目录下运行命令行：mvn clean package -DskipTests。
打包成功后，在backend/target/目录下会生成一个smart-parking-0.0.1-SNAPSHOT.jar文件（名称可能不同）。
你可以通过命令行运行它：java -jar smart-parking-0.0.1-SNAPSHOT.jar。确保运行环境的JDK版本与编译版本一致，且application.yml中的配置（如数据库连接）指向生产环境。

9.2 前端打包 (Vue)Vue项目需要打包成静态文件，由Nginx等Web服务器托管。

在前端项目根目录下运行命令：npm run build。
打包成功后，会生成一个dist文件夹，里面包含了index.html和所有静态资源（JS, CSS, 图片等）。
你可以将这个dist文件夹整个上传到你的Web服务器（如Nginx, Apache）的网站根目录下。

重要：由于前端是单页应用，且请求后端API，你需要在Web服务器配置反向代理，将/api等API请求转发到后端JAR包运行的实际地址。以下是一个简单的Nginx配置示例：

server { listen 80; server_name your-domain.com; # 你的域名或IP # 前端静态文件 location / { root /path/to/your/frontend/dist; index index.html index.htm; 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; } }

10. 总结与下一步

这个基于SpringBoot+Vue的智慧停车场管理系统项目，作为一个学习范本和毕设起点，其价值在于提供了一个全栈技术栈的完整实现闭环。你不仅能看到Vue页面如何渲染，更能深入理解每一个按钮点击背后，数据是如何通过HTTP请求发送到SpringBoot后端，后端又是如何执行业务逻辑、操作数据库，并最终将结果返回给前端的整个过程。

对于急需完成作业或毕设的同学，建议按以下步骤操作：

第一步：跑通。严格按照本文的环境准备和部署步骤，确保项目在你的电脑上原样运行起来。这是所有后续工作的基础。
第二步：理解。不要只停留在能登录、能点按钮。对照着数据库表，去跟踪一个核心业务（比如“车辆入场”）的完整代码路径，从Controller -> Service -> Mapper -> SQL，搞清楚数据是如何流动和变化的。
第三步：修改。尝试做一些小的定制化修改，例如：
- 修改计费规则（如改成首小时免费，后续每小时递增）。
- 增加一个“车辆类型”（小型车、大型车）字段，并实现差异化的计费。
- 在前端仪表盘增加一个新的统计图表（如不同时段的车流量统计）。
第四步：扩展。在理解原有系统的基础上，构思并实现一个属于自己的新功能模块，例如：
- 集成外部API：调用一个免费的车牌识别API（如百度AI开放平台），实现自动识别车牌入场。
- 开发移动端：用Uni-app或微信小程序开发一个用户端，用于查找空车位、预约车位、线上支付。
- 增强数据可视化：使用ECharts等库，制作更丰富的停车场运营分析报表。