首页/资讯中心/详情

SpringBoot+Vue3智慧停车场管理系统：Java全栈实战开发指南

SpringBoot+Vue3智慧停车场管理系统：Java全栈实战开发指南
📅 发布时间：2026/7/19 8:56:17

如果你正在寻找一个既能展示Java全栈能力，又能在简历中脱颖而出的实战项目，智慧停车场管理系统绝对值得你投入时间。这个项目看似简单，但真正能完整跑通前后端分离、数据库设计、权限管理和移动端适配的开发者并不多。

很多Java学习者在掌握了SpringBoot和Vue3的基础后，往往卡在"如何将技术栈整合成实际项目"这一关。智慧停车场管理系统恰好填补了这一空白：它既有清晰的需求场景，又涵盖了企业级应用的核心技术要点。更重要的是，这个项目的技术选型（SpringBoot+Vue3）完全符合当前市场的主流需求，无论是课程设计、毕业设计还是面试展示，都能体现你的技术深度。

本文将带你从零开始搭建一个功能完整的智慧停车场管理系统，重点不是简单复制代码，而是理解每个技术决策背后的原因，避免在实际开发中踩坑。

1. 项目核心价值与技术选型分析

1.1 为什么选择停车场管理系统作为实战项目

停车场管理系统之所以成为经典的全栈实战项目，是因为它具备几个关键特点：

业务场景完整且贴近现实：从车辆入场、车位分配、计费管理到出场结算，整个业务流程清晰明确。这种真实的业务场景让你在开发过程中必须考虑异常处理、数据一致性和用户体验等实际问题。

技术栈覆盖全面：后端需要处理并发访问、数据库事务、API设计；前端需要实现响应式布局、状态管理、实时数据更新；移动端可能涉及小程序或App开发。这种多层次的技术需求正好对应企业级应用的典型架构。

可扩展性强：基础版本完成后，你可以轻松扩展为智能寻车、预约停车、无感支付等高级功能，为项目增加技术亮点。

1.2 SpringBoot + Vue3 技术组合的优势分析

选择SpringBoot和Vue3作为核心技术栈，是基于以下几个实际考量：

SpringBoot的优势：

  • 快速启动：内嵌Tomcat，无需单独部署Web服务器
  • 约定优于配置：减少XML配置，专注于业务逻辑
  • 生态丰富：Spring Data JPA、Spring Security、Spring Boot Starter等组件成熟稳定
  • 微服务友好：为后续架构升级预留空间

Vue3的改进：

  • Composition API：更好的逻辑复用和类型推断
  • 性能提升：更小的打包体积、更快的渲染速度
  • TypeScript友好：更好的开发体验和代码维护性
  • 生态完善：Vite构建工具、Pinia状态管理、Vue Router等工具链成熟

前后端分离架构的价值：

  • 职责清晰：前端专注交互体验，后端专注业务逻辑和数据安全
  • 独立部署：前后端可以分别迭代和部署
  • 技术栈灵活：前后端可以选择最适合的技术方案

2. 环境准备与工具配置

2.1 开发环境要求

在开始项目之前，确保你的开发环境满足以下要求：

操作系统：Windows 10/11、macOS 10.15+ 或 Ubuntu 18.04+内存：建议8GB以上，16GB为佳磁盘空间：至少10GB可用空间

2.2 必备软件安装与配置

Java开发环境：

# 检查Java版本 java -version # 应该显示Java 17或更高版本 # 检查Maven版本 mvn -version # 应该显示Maven 3.6+

如果尚未安装，建议使用SDKMAN进行管理：

# 安装SDKMAN curl -s "https://get.sdkman.io" | bash source "$HOME/.sdkman/bin/sdkman-init.sh" # 安装Java 17 sdk install java 17.0.2-tem sdk use java 17.0.2-tem # 安装Maven sdk install maven 3.8.6

Node.js环境：

# 检查Node.js版本 node --version # 应该显示Node.js 16+ # 检查npm版本 npm --version

建议使用nvm管理Node.js版本：

# 安装nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash # 安装Node.js 18 nvm install 18 nvm use 18

数据库环境： 本项目使用MySQL 8.0作为主要数据库：

# 安装MySQL（Ubuntu示例） sudo apt update sudo apt install mysql-server-8.0 # 启动MySQL服务 sudo systemctl start mysql sudo systemctl enable mysql # 安全配置 sudo mysql_secure_installation

2.3 IDE与开发工具

后端开发：IntelliJ IDEA Ultimate或Community版

  • 安装插件：Lombok、Spring Assistant、MyBatisX

前端开发：Visual Studio Code

  • 安装插件：Volar、TypeScript Vue Plugin、Vue 3 Snippets

数据库管理：MySQL Workbench或DBeaver

API测试：Postman或Insomnia

3. 项目架构设计与数据库规划

3.1 系统架构概述

智慧停车场管理系统采用典型的前后端分离架构：

┌─────────────────┐ HTTP/HTTPS ┌──────────────────┐ │ Vue3前端应用 │ ◄──────────────► │ SpringBoot后端API │ │ │ │ │ │ - 用户界面 │ │ - 业务逻辑处理 │ │ - 状态管理 │ │ - 数据持久化 │ │ - 路由导航 │ │ - 安全认证 │ └─────────────────┘ └──────────────────┘ │ │ JDBC ▼ ┌──────────────────┐ │ MySQL数据库 │ │ │ │ - 业务数据存储 │ │ - 事务管理 │ └──────────────────┘

3.2 数据库表结构设计

核心数据表设计需要考虑停车场的实际业务场景：

用户表（sys_user）：

CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL COMMENT '用户名', password VARCHAR(100) NOT NULL COMMENT '加密密码', real_name VARCHAR(50) COMMENT '真实姓名', phone VARCHAR(20) COMMENT '手机号', email VARCHAR(100) COMMENT '邮箱', avatar VARCHAR(500) COMMENT '头像URL', status TINYINT DEFAULT 1 COMMENT '状态：0-禁用，1-启用', user_type TINYINT DEFAULT 1 COMMENT '用户类型：1-管理员，2-操作员', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) COMMENT '系统用户表';

停车场表（parking_lot）：

CREATE TABLE parking_lot ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL COMMENT '停车场名称', address VARCHAR(200) COMMENT '详细地址', total_spaces INT NOT NULL COMMENT '总车位数量', available_spaces INT NOT NULL COMMENT '可用车位数量', hourly_rate DECIMAL(8,2) NOT NULL COMMENT '每小时费率', status TINYINT DEFAULT 1 COMMENT '状态：0-关闭，1-营业', latitude DECIMAL(10,6) COMMENT '纬度', longitude DECIMAL(10,6) COMMENT '经度', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) COMMENT '停车场信息表';

车位表（parking_space）：

CREATE TABLE parking_space ( id BIGINT PRIMARY KEY AUTO_INCREMENT, parking_lot_id BIGINT NOT NULL COMMENT '停车场ID', space_number VARCHAR(20) NOT NULL COMMENT '车位编号', space_type TINYINT DEFAULT 1 COMMENT '车位类型：1-普通，2-残疾人，3-VIP', status TINYINT DEFAULT 0 COMMENT '状态：0-空闲，1-占用，2-维修', current_vehicle_id BIGINT COMMENT '当前停放车辆ID', FOREIGN KEY (parking_lot_id) REFERENCES parking_lot(id) ) COMMENT '停车位表';

车辆入场记录表（vehicle_record）：

CREATE TABLE vehicle_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, license_plate VARCHAR(20) NOT NULL COMMENT '车牌号', parking_lot_id BIGINT NOT NULL COMMENT '停车场ID', parking_space_id BIGINT COMMENT '分配的车位ID', entry_time DATETIME NOT NULL COMMENT '入场时间', exit_time DATETIME COMMENT '出场时间', total_amount DECIMAL(10,2) COMMENT '总费用', payment_status TINYINT DEFAULT 0 COMMENT '支付状态：0-未支付，1-已支付', payment_time DATETIME COMMENT '支付时间', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (parking_lot_id) REFERENCES parking_lot(id), FOREIGN KEY (parking_space_id) REFERENCES parking_space(id) ) COMMENT '车辆出入记录表';

4. SpringBoot后端核心实现

4.1 项目结构规划

采用标准的分层架构组织代码：

src/main/java/com/parking/ ├── ParkingApplication.java # 启动类 ├── config/ # 配置类 │ ├── SecurityConfig.java # 安全配置 │ ├── WebConfig.java # Web配置 │ └── MybatisPlusConfig.java # MyBatis配置 ├── controller/ # 控制层 │ ├── AuthController.java # 认证接口 │ ├── ParkingLotController.java # 停车场管理 │ └── VehicleController.java # 车辆管理 ├── service/ # 业务层 │ ├── impl/ # 实现类 │ └── ParkingLotService.java # 服务接口 ├── mapper/ # 数据访问层 │ ├── ParkingLotMapper.java # 停车场Mapper │ └── VehicleRecordMapper.java # 车辆记录Mapper ├── entity/ # 实体类 │ ├── SysUser.java # 用户实体 │ └── ParkingLot.java # 停车场实体 └── common/ # 通用组件 ├── Result.java # 统一返回结果 └── GlobalExceptionHandler.java # 全局异常处理

4.2 核心依赖配置

pom.xml关键依赖配置：

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.0.0</version> <relativePath/> </parent> <groupId>com.parking</groupId> <artifactId>smart-parking</artifactId> <version>1.0.0</version> <properties> <java.version>17</java.version> <mybatis-plus.version>3.5.3.1</mybatis-plus.version> <jwt.version>0.11.5</jwt.version> </properties> <dependencies> <!-- Spring Boot Starter --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 数据库相关 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>${mybatis-plus.version}</version> </dependency> <!-- 安全认证 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api</artifactId> <version>${jwt.version}</version> </dependency> <!-- 工具类 --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!-- 测试 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> </project>

4.3 实体类设计示例

使用Lombok简化实体类代码：

// 文件路径：src/main/java/com/parking/entity/ParkingLot.java package com.parking.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDateTime; @Data @TableName("parking_lot") public class ParkingLot { @TableId(type = IdType.AUTO) private Long id; @TableField("name") private String name; @TableField("address") private String address; @TableField("total_spaces") private Integer totalSpaces; @TableField("available_spaces") private Integer availableSpaces; @TableField("hourly_rate") private BigDecimal hourlyRate; @TableField("status") private Integer status; @TableField("latitude") private BigDecimal latitude; @TableField("longitude") private BigDecimal longitude; @TableField(value = "create_time", fill = FieldFill.INSERT) private LocalDateTime createTime; @TableField(value = "update_time", fill = FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; }

4.4 业务逻辑实现

停车场管理服务实现：

// 文件路径：src/main/java/com/parking/service/impl/ParkingLotServiceImpl.java package com.parking.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.parking.entity.ParkingLot; import com.parking.mapper.ParkingLotMapper; import com.parking.service.ParkingLotService; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; @Service public class ParkingLotServiceImpl extends ServiceImpl<ParkingLotMapper, ParkingLot> implements ParkingLotService { @Override @Transactional public boolean updateAvailableSpaces(Long parkingLotId, int change) { ParkingLot parkingLot = this.getById(parkingLotId); if (parkingLot == null) { throw new RuntimeException("停车场不存在"); } int newAvailableSpaces = parkingLot.getAvailableSpaces() + change; if (newAvailableSpaces < 0 || newAvailableSpaces > parkingLot.getTotalSpaces()) { throw new RuntimeException("车位数量异常"); } parkingLot.setAvailableSpaces(newAvailableSpaces); return this.updateById(parkingLot); } @Override public ParkingLot findNearestParkingLot(BigDecimal latitude, BigDecimal longitude) { // 简化版最近停车场查询，实际应使用空间数据库函数 return this.lambdaQuery() .eq(ParkingLot::getStatus, 1) .orderByAsc(ParkingLot::getAvailableSpaces) // 按可用车位排序 .last("LIMIT 1") .one(); } }

4.5 RESTful API设计

车辆入场记录API实现：

// 文件路径：src/main/java/com/parking/controller/VehicleController.java package com.parking.controller; import com.parking.common.Result; import com.parking.entity.VehicleRecord; import com.parking.service.VehicleRecordService; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import lombok.RequiredArgsConstructor; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/api/vehicle") @RequiredArgsConstructor @Api(tags = "车辆管理接口") public class VehicleController { private final VehicleRecordService vehicleRecordService; @PostMapping("/entry") @ApiOperation("车辆入场") public Result<VehicleRecord> vehicleEntry(@RequestBody VehicleRecord record) { try { VehicleRecord result = vehicleRecordService.processVehicleEntry(record); return Result.success(result); } catch (Exception e) { return Result.error(e.getMessage()); } } @PostMapping("/exit/{recordId}") @ApiOperation("车辆出场") public Result<VehicleRecord> vehicleExit(@PathVariable Long recordId) { try { VehicleRecord result = vehicleRecordService.processVehicleExit(recordId); return Result.success(result); } catch (Exception e) { return Result.error(e.getMessage()); } } @GetMapping("/records") @ApiOperation("查询车辆记录") public Result<Page<VehicleRecord>> getVehicleRecords( @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestParam(required = false) String licensePlate) { return Result.success(vehicleRecordService.getRecords(page, size, licensePlate)); } }

5. Vue3前端项目搭建

5.1 项目初始化与配置

使用Vite创建Vue3项目：

# 创建项目 npm create vue@latest smart-parking-frontend # 进入项目目录 cd smart-parking-frontend # 安装依赖 npm install # 安装额外依赖 npm install axios pinia vue-router@4 element-plus npm install @element-plus/icons-vue npm install --save-dev @types/node

Vite配置示例（vite.config.ts）：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } }, server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })

5.2 前端项目结构设计

src/ ├── api/ # API接口 │ ├── request.ts # 请求封装 │ └── modules/ # 模块接口 ├── components/ # 通用组件 ├── views/ # 页面组件 ├── store/ # 状态管理 ├── router/ # 路由配置 ├── utils/ # 工具函数 ├── types/ # 类型定义 └── assets/ # 静态资源

5.3 状态管理设计

使用Pinia进行状态管理：

// 文件路径：src/store/auth.ts import { defineStore } from 'pinia' import { ref } from 'vue' import type { User } from '@/types/user' export const useAuthStore = defineStore('auth', () => { const user = ref<User | null>(null) const token = ref<string>('') const isAuthenticated = ref<boolean>(false) const login = async (username: string, password: string) => { try { const response = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }) if (response.ok) { const data = await response.json() user.value = data.user token.value = data.token isAuthenticated.value = true localStorage.setItem('token', data.token) return true } return false } catch (error) { console.error('登录失败:', error) return false } } const logout = () => { user.value = null token.value = '' isAuthenticated.value = false localStorage.removeItem('token') } return { user, token, isAuthenticated, login, logout } })

5.4 核心页面组件实现

停车场管理页面示例：

<!-- 文件路径：src/views/ParkingLotManagement.vue --> <template> <div class="parking-lot-management"> <el-card class="search-card"> <el-form :model="searchForm" inline> <el-form-item label="停车场名称"> <el-input v-model="searchForm.name" placeholder="请输入名称" /> </el-form-item> <el-form-item label="状态"> <el-select v-model="searchForm.status" placeholder="请选择状态"> <el-option label="全部" value="" /> <el-option label="营业中" value="1" /> <el-option label="已关闭" value="0" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch">查询</el-button> <el-button @click="handleReset">重置</el-button> </el-form-item> </el-form> </el-card> <el-card class="table-card"> <template #header> <div class="card-header"> <span>停车场列表</span> <el-button type="primary" @click="handleAdd">新增停车场</el-button> </div> </template> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="name" label="停车场名称" /> <el-table-column prop="address" label="地址" /> <el-table-column prop="totalSpaces" label="总车位" /> <el-table-column prop="availableSpaces" label="可用车位" /> <el-table-column prop="hourlyRate" label="小时费率" /> <el-table-column prop="status" label="状态"> <template #default="{ row }"> <el-tag :type="row.status === 1 ? 'success' : 'danger'"> {{ row.status === 1 ? '营业中' : '已关闭' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="200"> <template #default="{ row }"> <el-button size="small" @click="handleEdit(row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size" :total="pagination.total" @current-change="handlePageChange" layout="total, sizes, prev, pager, next, jumper" /> </el-card> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import type { ParkingLot } from '@/types/parking' const loading = ref(false) const tableData = ref<ParkingLot[]>([]) const searchForm = ref({ name: '', status: '' }) const pagination = ref({ current: 1, size: 10, total: 0 }) const loadData = async () => { loading.value = true try { const response = await fetch(`/api/parking-lot?page=${pagination.value.current}&size=${pagination.value.size}`) const data = await response.json() tableData.value = data.records pagination.value.total = data.total } catch (error) { ElMessage.error('数据加载失败') } finally { loading.value = false } } const handleSearch = () => { pagination.value.current = 1 loadData() } const handleReset = () => { searchForm.value = { name: '', status: '' } handleSearch() } const handleAdd = () => { // 打开新增对话框 } const handleEdit = (row: ParkingLot) => { // 打开编辑对话框 } const handleDelete = async (row: ParkingLot) => { try { await ElMessageBox.confirm('确定删除该停车场吗？', '提示', { type: 'warning' }) await fetch(`/api/parking-lot/${row.id}`, { method: 'DELETE' }) ElMessage.success('删除成功') loadData() } catch (error) { // 用户取消删除 } } const handlePageChange = () => { loadData() } onMounted(() => { loadData() }) </script> <style scoped> .parking-lot-management { padding: 20px; } .search-card { margin-bottom: 20px; } .card-header { display: flex; justify-content: space-between; align-items: center; } </style>

6. 前后端联调与功能测试

6.1 API接口测试方案

使用Postman进行接口测试，创建测试集合：

认证接口测试：

  • POST /api/auth/login - 用户登录
  • POST /api/auth/logout - 用户登出
  • GET /api/auth/user-info - 获取用户信息

停车场管理接口测试：

  • GET /api/parking-lot - 分页查询停车场
  • POST /api/parking-lot - 新增停车场
  • PUT /api/parking-lot/{id} - 更新停车场
  • DELETE /api/parking-lot/{id} - 删除停车场

车辆管理接口测试：

  • POST /api/vehicle/entry - 车辆入场
  • POST /api/vehicle/exit/{recordId} - 车辆出场
  • GET /api/vehicle/records - 查询记录

6.2 关键业务流程测试用例

车辆入场流程测试：

// 文件路径：src/test/java/com/parking/service/VehicleRecordServiceTest.java @SpringBootTest class VehicleRecordServiceTest { @Autowired private VehicleRecordService vehicleRecordService; @Test @Transactional void testVehicleEntryProcess() { // 准备测试数据 VehicleRecord record = new VehicleRecord(); record.setLicensePlate("京A12345"); record.setParkingLotId(1L); // 执行入场操作 VehicleRecord result = vehicleRecordService.processVehicleEntry(record); // 验证结果 assertNotNull(result.getId()); assertNotNull(result.getEntryTime()); assertEquals("京A12345", result.getLicensePlate()); assertEquals(0, result.getPaymentStatus()); } }

6.3 前端功能验证清单

完成以下功能点的验证：

  • [ ] 用户登录/登出功能正常
  • [ ] 停车场列表分页显示正确
  • [ ] 停车场新增、编辑、删除操作正常
  • [ ] 车辆入场记录能够正确显示
  • [ ] 实时车位状态更新准确
  • [ ] 响应式布局在不同设备上表现正常

7. 部署与生产环境配置

7.1 后端部署配置

应用配置文件（application-prod.yml）：

server: port: 8080 servlet: context-path: /api spring: datasource: url: jdbc:mysql://localhost:3306/smart_parking?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: ${DB_USERNAME:root} password: ${DB_PASSWORD:password} driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: validate show-sql: false redis: host: localhost port: 6379 password: ${REDIS_PASSWORD:} database: 0 logging: level: com.parking: DEBUG file: name: logs/application.log

7.2 前端构建与部署

构建脚本配置：

{ "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "build:prod": "vue-tsc && vite build --mode production" } }

Docker部署配置：

# 后端Dockerfile FROM openjdk:17-jdk-slim VOLUME /tmp COPY target/smart-parking-1.0.0.jar app.jar ENTRYPOINT ["java","-jar","/app.jar"] # 前端Dockerfile FROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf

8. 常见问题与解决方案

8.1 开发环境问题

问题1：Java版本不兼容

错误信息：java: 警告: 源发行版 17 需要目标发行版 17 解决方案：检查IDE中的Java编译版本设置，确保与pom.xml中配置的版本一致

问题2：数据库连接失败

错误信息：Access denied for user 'root'@'localhost' 解决方案：检查MySQL服务是否启动，用户名密码是否正确，数据库是否存在

问题3：前端代理配置无效

错误信息：Proxy error: Could not proxy request 解决方案：检查后端服务是否启动，代理配置中的端口是否正确

8.2 运行时问题

问题4：跨域访问错误

// 解决方案：在后端添加CORS配置 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:3000") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true); } }

问题5：静态资源访问404

# 解决方案：Nginx配置添加静态资源处理 location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; }

8.3 性能优化问题

问题6：数据库查询慢

// 解决方案：添加数据库索引和优化查询 @TableName("vehicle_record") public class VehicleRecord { // 为常用查询字段添加索引 @TableField(value = "license_plate") private String licensePlate; @TableField(value = "entry_time") private LocalDateTime entryTime; } // 在数据库中为这些字段创建索引 CREATE INDEX idx_license_plate ON vehicle_record(license_plate); CREATE INDEX idx_entry_time ON vehicle_record(entry_time);

9. 项目扩展与进阶功能

9.1 技术扩展方向

微服务架构改造：

  • 将单体应用拆分为用户服务、停车场服务、支付服务等微服务
  • 使用Spring Cloud实现服务注册发现、配置中心、网关路由

大数据分析功能：

  • 使用Elasticsearch存储和分析车辆通行数据
  • 基于历史数据预测停车场使用高峰时段

移动端应用开发：

  • 使用UniApp开发跨平台移动应用
  • 集成地图SDK实现停车场导航功能

9.2 业务功能扩展

智能停车功能：

  • 车牌识别自动入场
  • 预约停车位功能
  • 无感支付体验

管理功能增强：

  • 多级权限管理体系
  • 财务报表自动生成
  • 设备监控告警系统

这个智慧停车场管理系统项目为你提供了一个完整的企业级应用开发体验。从技术选型到架构设计，从编码实现到部署运维，每个环节都体现了现代Java全栈开发的最佳实践。

建议在掌握基础版本后，选择1-2个扩展方向进行深入研究，这样既能深化技术理解，也能为简历增加亮点。实际开发中遇到的问题往往比教程中更复杂，但正是这些问题的解决过程让你真正成长为一名合格的开发者。