这次我们来看一个完整的智慧停车场管理系统项目基于SpringBootVue3技术栈实现。这个项目特别适合Java学习者、毕业设计开发者以及需要快速搭建停车场管理系统的团队使用。项目采用前后端分离架构前端使用Vue3Element Plus后端基于SpringBootMyBatis Plus数据库支持MySQL。系统包含完整的停车场管理功能模块从车位管理、车辆进出场到收费统计一应俱全。最值得关注的是项目提供了详细的搭建文档和源码可以快速部署运行。1. 核心能力速览能力项说明技术架构SpringBoot 3.x Vue3 Element Plus MySQL前端技术Vue3、Vite、Element Plus、Axios、Vue Router后端技术SpringBoot、MyBatis Plus、JWT、Redis、Maven数据库MySQL 8.0开发工具IDEA、HBuilderX、微信开发者工具部署方式前后端分离部署支持Docker容器化主要功能车位管理、车辆进出场、收费管理、数据统计、用户管理适合场景毕业设计、课程设计、企业级停车场管理系统开发2. 适用场景与使用边界这个智慧停车场管理系统主要适用于以下场景适合场景Java全栈开发学习者的实战项目计算机专业毕业设计或课程设计中小型停车场信息化管理系统搭建前后端分离架构的技术研究SpringBoot和Vue3技术栈的实践应用使用边界系统设计为单停车场管理如需多停车场需要二次开发硬件设备集成需要根据实际硬件接口进行调整高并发场景需要优化数据库和缓存配置商业使用需要考虑数据安全和系统稳定性3. 环境准备与前置条件在开始部署之前需要确保开发环境满足以下要求3.1 硬件环境要求内存8GB以上推荐硬盘至少10GB可用空间操作系统Windows 10/11、macOS、Linux3.2 软件环境要求后端环境JDK 17或以上版本Maven 3.6MySQL 8.0Redis 6.0IDEA或Eclipse开发工具前端环境Node.js 16.0npm 8.0 或 yarn 1.22Vue CLI 5.0HBuilderX如需开发小程序版本3.3 环境检查命令# 检查Java版本 java -version # 检查Maven版本 mvn -version # 检查Node.js版本 node -v # 检查npm版本 npm -v # 检查MySQL版本 mysql --version4. 数据库设计与初始化4.1 数据库表结构设计系统主要包含以下核心数据表-- 用户表 CREATE TABLE sys_user ( id bigint NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 用户名, password varchar(100) NOT NULL COMMENT 密码, real_name varchar(50) DEFAULT NULL COMMENT 真实姓名, phone varchar(20) DEFAULT NULL COMMENT 手机号, status tinyint DEFAULT 1 COMMENT 状态0-禁用1-启用, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 停车场表 CREATE TABLE parking_lot ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 停车场名称, address varchar(200) DEFAULT NULL COMMENT 地址, total_spaces int DEFAULT 0 COMMENT 总车位数, available_spaces int DEFAULT 0 COMMENT 可用车位数, hourly_rate decimal(10,2) DEFAULT 0.00 COMMENT 每小时费率, status tinyint DEFAULT 1 COMMENT 状态0-关闭1-营业, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 车位表 CREATE TABLE parking_space ( id bigint NOT NULL AUTO_INCREMENT, 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-占用, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_lot_id (lot_id), KEY idx_space_number (space_number) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 车辆进出记录表 CREATE TABLE vehicle_record ( id bigint NOT NULL AUTO_INCREMENT, license_plate varchar(20) NOT NULL COMMENT 车牌号, lot_id bigint NOT NULL COMMENT 停车场ID, space_id bigint DEFAULT NULL COMMENT 车位ID, entry_time datetime NOT NULL COMMENT 入场时间, exit_time datetime DEFAULT NULL COMMENT 出场时间, parking_duration int DEFAULT 0 COMMENT 停车时长分钟, amount decimal(10,2) DEFAULT 0.00 COMMENT 收费金额, payment_status tinyint DEFAULT 0 COMMENT 支付状态0-未支付1-已支付, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_license_plate (license_plate), KEY idx_entry_time (entry_time), KEY idx_lot_id (lot_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;4.2 数据库初始化脚本-- 创建数据库 CREATE DATABASE IF NOT EXISTS smart_parking DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 使用数据库 USE smart_parking; -- 插入初始数据 INSERT INTO sys_user (username, password, real_name, phone, status) VALUES (admin, $2a$10$N.zmdr9k7uOCQb376NoUnuTJ8iAt6Z5EHsM8lE9lBOsl7iKTV2UiC, 系统管理员, 13800138000, 1); INSERT INTO parking_lot (name, address, total_spaces, available_spaces, hourly_rate, status) VALUES (智慧停车场A区, 北京市海淀区中关村大街1号, 200, 150, 5.00, 1), (智慧停车场B区, 北京市朝阳区建国门外大街2号, 150, 120, 6.00, 1);5. 后端项目部署与启动5.1 项目结构说明smart-parking-backend/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── smartparking/ │ │ │ ├── SmartParkingApplication.java │ │ │ ├── config/ # 配置类 │ │ │ ├── controller/ # 控制器层 │ │ │ ├── entity/ # 实体类 │ │ │ ├── mapper/ # Mapper接口 │ │ │ ├── service/ # 服务层 │ │ │ └── utils/ # 工具类 │ │ └── resources/ │ │ ├── application.yml # 主配置文件 │ │ ├── application-dev.yml # 开发环境配置 │ │ └── mapper/ # MyBatis映射文件 ├── pom.xml └── README.md5.2 配置文件设置application.yml 配置server: port: 8080 servlet: context-path: /api spring: profiles: active: dev datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_parking?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLtrueserverTimezoneGMT%2B8 username: root password: 123456 redis: host: localhost port: 6379 password: database: 0 timeout: 3000ms lettuce: pool: max-active: 20 max-wait: -1ms max-idle: 10 min-idle: 0 mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0 jwt: secret: smart-parking-secret-key-2024 expiration: 86400 header: Authorization5.3 启动后端服务# 进入项目根目录 cd smart-parking-backend # 清理并安装依赖 mvn clean install # 启动项目 mvn spring-boot:run # 或者直接运行jar包 java -jar target/smart-parking-1.0.0.jar启动成功后控制台应该显示类似信息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 /api 2024-XX-XX XX:XX:XX.XXX INFO 12345 --- [ main] c.s.SmartParkingApplication : Started SmartParkingApplication in 5.123 seconds (JVM running for 5.789)6. 前端项目部署与启动6.1 项目结构说明smart-parking-frontend/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── api/ # API接口 │ ├── assets/ # 静态资源 │ ├── components/ # 组件 │ ├── router/ # 路由配置 │ ├── store/ # 状态管理 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── App.vue │ └── main.js ├── package.json ├── vite.config.js └── README.md6.2 前端配置修改vite.config.js 配置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, rewrite: (path) path.replace(/^\/api/, /api) } } } })6.3 启动前端服务# 进入项目目录 cd smart-parking-frontend # 安装依赖 npm install # 启动开发服务器 npm run dev # 或者使用yarn yarn install yarn dev启动成功后浏览器访问 http://localhost:3000 应该能看到登录界面。7. 核心功能测试与验证7.1 用户登录测试测试步骤访问前端地址 http://localhost:3000输入用户名admin密码123456点击登录按钮预期结果登录成功跳转到系统主页浏览器LocalStorage中存储了token信息顶部显示用户信息和退出按钮接口验证# 使用curl测试登录接口 curl -X POST http://localhost:8080/api/auth/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}7.2 停车场管理功能测试添加停车场测试进入停车场管理菜单点击新增按钮填写停车场信息名称、地址、总车位数、费率等点击保存验证数据-- 检查数据库中的数据 SELECT * FROM parking_lot WHERE name 测试停车场;7.3 车辆进出场流程测试车辆入场测试# 模拟车辆入场API调用 curl -X POST http://localhost:8080/api/vehicle/entry \ -H Authorization: Bearer {token} \ -H Content-Type: application/json \ -d {licensePlate:京A12345,lotId:1}车辆出场测试# 模拟车辆出场API调用 curl -X POST http://localhost:8080/api/vehicle/exit \ -H Authorization: Bearer {token} \ -H Content-Type: application/json \ -d {licensePlate:京A12345,lotId:1}7.4 数据统计功能验证收入统计测试进入数据统计页面选择时间范围如最近7天查看收入趋势图表和数据表格车位使用率统计-- 验证车位使用率计算逻辑 SELECT lot_id, name, total_spaces, available_spaces, ROUND((total_spaces - available_spaces) * 100.0 / total_spaces, 2) as usage_rate FROM parking_lot;8. 接口API设计与调用示例8.1 认证接口登录接口PostMapping(/auth/login) public ResultLoginVO login(RequestBody Valid LoginDTO loginDTO) { // 验证用户名密码 SysUser user userService.getByUsername(loginDTO.getUsername()); if (user null || !passwordEncoder.matches(loginDTO.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } // 生成token String token jwtUtil.generateToken(user.getUsername()); // 返回登录结果 LoginVO loginVO new LoginVO(); loginVO.setToken(token); loginVO.setUserInfo(user); return Result.success(loginVO); }8.2 停车场管理接口获取停车场列表GetMapping(/parking/lot/list) public ResultPageVOParkingLot getParkingLotList( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size, RequestParam(required false) String keyword) { PageParkingLot pageInfo new Page(page, size); LambdaQueryWrapperParkingLot wrapper new LambdaQueryWrapper(); if (StringUtils.isNotBlank(keyword)) { wrapper.like(ParkingLot::getName, keyword) .or() .like(ParkingLot::getAddress, keyword); } PageParkingLot result parkingLotService.page(pageInfo, wrapper); return Result.success(PageVO.of(result)); }8.3 车辆管理接口车辆入场接口PostMapping(/vehicle/entry) public ResultVehicleRecord vehicleEntry(RequestBody Valid VehicleEntryDTO entryDTO) { // 检查停车场是否存在 ParkingLot parkingLot parkingLotService.getById(entryDTO.getLotId()); if (parkingLot null) { return Result.error(停车场不存在); } // 检查是否有空闲车位 if (parkingLot.getAvailableSpaces() 0) { return Result.error(停车场已满); } // 创建入场记录 VehicleRecord record new VehicleRecord(); record.setLicensePlate(entryDTO.getLicensePlate()); record.setLotId(entryDTO.getLotId()); record.setEntryTime(new Date()); vehicleRecordService.save(record); // 更新停车场可用车位数 parkingLot.setAvailableSpaces(parkingLot.getAvailableSpaces() - 1); parkingLotService.updateById(parkingLot); return Result.success(record); }9. 系统性能优化建议9.1 数据库优化索引优化-- 为常用查询字段添加索引 ALTER TABLE vehicle_record ADD INDEX idx_license_plate_entry_time (license_plate, entry_time); ALTER TABLE parking_space ADD INDEX idx_lot_id_status (lot_id, status);查询优化// 使用分页查询避免全表扫描 PageVehicleRecord page new Page(pageNum, pageSize); LambdaQueryWrapperVehicleRecord wrapper new LambdaQueryWrapper(); wrapper.eq(VehicleRecord::getLotId, lotId) .orderByDesc(VehicleRecord::getEntryTime); return vehicleRecordService.page(page, wrapper);9.2 缓存优化Redis缓存配置Configuration EnableCaching public class RedisConfig { Bean public RedisTemplateString, Object redisTemplate(RedisConnectionFactory factory) { RedisTemplateString, Object template new RedisTemplate(); template.setConnectionFactory(factory); // 使用Jackson序列化 Jackson2JsonRedisSerializerObject serializer new Jackson2JsonRedisSerializer(Object.class); ObjectMapper mapper new ObjectMapper(); mapper.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY); mapper.activateDefaultTyping(Lazy
