当前位置：首页 > news >正文

SpringBoot+Vue3智慧停车场系统开发实战：从环境搭建到功能实现

news 2026/7/19 2:18:02

最近在辅导学生做Java项目时，发现很多同学对智慧停车场管理系统的完整开发流程不太熟悉，特别是SpringBoot和Vue3的前后端分离架构。本文将手把手带你搭建一个功能完整的智慧停车场管理系统，涵盖从环境搭建到功能实现的完整流程。

这个项目非常适合Java学习者作为实战练习，无论是课程设计、毕业设计还是个人技术提升都能直接使用。系统采用主流技术栈：SpringBoot 3.x + Vue 3 + Element Plus + MySQL，包含车位管理、车辆进出、收费统计等核心功能。

1. 项目背景与技术选型

1.1 智慧停车场系统概述

智慧停车场管理系统是现代城市智能化建设的重要组成部分，主要解决传统停车场管理效率低、人工成本高、用户体验差等问题。系统通过信息化手段实现车位的智能分配、车辆的自动识别、费用的精准计算等功能。

典型应用场景包括商业中心、写字楼、住宅小区、机场车站等需要大规模停车管理的场所。系统核心价值在于提升停车效率、减少人工干预、提供数据支撑决策。

1.2 技术栈选择理由

后端技术栈：SpringBoot 3.x + MyBatis Plus + MySQL

SpringBoot 3.x：简化Spring应用初始搭建和开发过程，内置Tomcat，开箱即用
MyBatis Plus：强大的CRUD操作和条件构造器，减少SQL编写工作量
MySQL 8.0：成熟稳定的关系型数据库，社区活跃，文档丰富

前端技术栈：Vue 3 + Element Plus + Axios

Vue 3：组合式API更好支持TypeScript，性能优化明显
Element Plus：丰富的UI组件库，快速构建企业级中后台产品
Axios：基于Promise的HTTP客户端，支持请求拦截和响应拦截

开发工具推荐：

IDE：IntelliJ IDEA（后端）+ VS Code（前端）
数据库工具：Navicat或DBeaver
API测试：Postman或Apifox

2. 环境准备与项目搭建

2.1 开发环境要求

在开始项目前，请确保本地环境满足以下要求：

操作系统：Windows 10/11、macOS 10.15+ 或 Ubuntu 18.04+Java环境：JDK 17或更高版本（SpringBoot 3.x要求）Node.js：16.x或18.x LTS版本数据库：MySQL 8.0或更高版本构建工具：Maven 3.6+ 和 npm 8.x+

验证环境是否就绪：

# 检查Java版本 java -version # 检查Node.js版本 node -v # 检查npm版本 npm -v # 检查Maven版本 mvn -v

2.2 数据库设计与初始化

创建数据库和基础表结构：

-- 创建数据库 CREATE DATABASE IF NOT EXISTS smart_parking DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci; USE smart_parking; -- 停车场表 CREATE TABLE parking_lot ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID', name VARCHAR(100) NOT NULL COMMENT '停车场名称', address VARCHAR(200) NOT NULL COMMENT '地址', total_spaces INT NOT NULL COMMENT '总车位数量', available_spaces INT NOT NULL COMMENT '可用车位数量', price_per_hour DECIMAL(10,2) NOT NULL COMMENT '每小时价格', status TINYINT DEFAULT 1 COMMENT '状态：0-关闭，1-营业', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ) COMMENT '停车场信息表'; -- 车位表 CREATE TABLE parking_space ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID', parking_lot_id BIGINT NOT NULL COMMENT '停车场ID', space_number VARCHAR(20) NOT NULL COMMENT '车位编号', space_type TINYINT DEFAULT 1 COMMENT '车位类型：1-小型车，2-大型车', status TINYINT DEFAULT 0 COMMENT '状态：0-空闲，1-占用', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', FOREIGN KEY (parking_lot_id) REFERENCES parking_lot(id) ) COMMENT '停车位信息表'; -- 车辆记录表 CREATE TABLE vehicle_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID', license_plate VARCHAR(20) NOT NULL COMMENT '车牌号', parking_space_id BIGINT NOT NULL COMMENT '车位ID', entry_time DATETIME NOT NULL COMMENT '入场时间', exit_time DATETIME COMMENT '出场时间', total_amount DECIMAL(10,2) DEFAULT 0 COMMENT '总费用', payment_status TINYINT DEFAULT 0 COMMENT '支付状态：0-未支付，1-已支付', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', FOREIGN KEY (parking_space_id) REFERENCES parking_space(id) ) COMMENT '车辆进出记录表';

插入测试数据：

-- 插入停车场数据 INSERT INTO parking_lot (name, address, total_spaces, available_spaces, price_per_hour) VALUES ('科技园停车场', '北京市海淀区科技园路1号', 200, 150, 5.00), ('商业中心停车场', '北京市朝阳区商业街88号', 300, 200, 8.00); -- 插入车位数据 INSERT INTO parking_space (parking_lot_id, space_number, space_type) VALUES (1, 'A001', 1), (1, 'A002', 1), (1, 'B001', 2);

3. SpringBoot后端开发

3.1 项目结构规划

创建标准的Maven项目结构：

smart-parking-backend/ ├── src/ │ └── main/ │ ├── java/ │ │ └── com/ │ │ └── example/ │ │ └── parking/ │ │ ├── ParkingApplication.java │ │ ├── config/ │ │ ├── controller/ │ │ ├── service/ │ │ ├── mapper/ │ │ ├── entity/ │ │ └── dto/ │ └── resources/ │ ├── application.yml │ └── mapper/ ├── pom.xml

3.2 Maven依赖配置

<?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.2.0</version> <relativePath/> </parent> <groupId>com.example</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> </properties> <dependencies> <!-- SpringBoot Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- MyBatis Plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>${mybatis-plus.version}</version> </dependency> <!-- MySQL驱动 --> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <!-- 数据校验 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-validation</artifactId> </dependency> <!-- 测试 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>

3.3 核心实体类设计

// ParkingLot.java package com.example.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; private String name; private String address; private Integer totalSpaces; private Integer availableSpaces; private BigDecimal pricePerHour; private Integer status; @TableField(fill = FieldFill.INSERT) private LocalDateTime createTime; @TableField(fill = FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; } // ParkingSpace.java package com.example.parking.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.time.LocalDateTime; @Data @TableName("parking_space") public class ParkingSpace { @TableId(type = IdType.AUTO) private Long id; private Long parkingLotId; private String spaceNumber; private Integer spaceType; private Integer status; @TableField(fill = FieldFill.INSERT) private LocalDateTime createTime; @TableField(fill = FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; } // VehicleRecord.java package com.example.parking.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDateTime; @Data @TableName("vehicle_record") public class VehicleRecord { @TableId(type = IdType.AUTO) private Long id; private String licensePlate; private Long parkingSpaceId; private LocalDateTime entryTime; private LocalDateTime exitTime; private BigDecimal totalAmount; private Integer paymentStatus; @TableField(fill = FieldFill.INSERT) private LocalDateTime createTime; }

3.4 业务逻辑实现

创建Service层接口和实现：

// ParkingLotService.java package com.example.parking.service; import com.baomidou.mybatisplus.extension.service.IService; import com.example.parking.entity.ParkingLot; public interface ParkingLotService extends IService<ParkingLot> { /** * 更新可用车位数量 */ void updateAvailableSpaces(Long parkingLotId, int change); } // ParkingLotServiceImpl.java package com.example.parking.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.parking.entity.ParkingLot; import com.example.parking.mapper.ParkingLotMapper; import com.example.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 void updateAvailableSpaces(Long parkingLotId, int change) { ParkingLot parkingLot = getById(parkingLotId); if (parkingLot != null) { int newAvailable = parkingLot.getAvailableSpaces() + change; if (newAvailable >= 0 && newAvailable <= parkingLot.getTotalSpaces()) { parkingLot.setAvailableSpaces(newAvailable); updateById(parkingLot); } } } }

3.5 控制器开发

// ParkingLotController.java package com.example.parking.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.parking.entity.ParkingLot; import com.example.parking.service.ParkingLotService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/api/parking-lot") public class ParkingLotController { @Autowired private ParkingLotService parkingLotService; @GetMapping("/list") public Map<String, Object> getParkingLotList( @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size) { Page<ParkingLot> pageParam = new Page<>(page, size); QueryWrapper<ParkingLot> queryWrapper = new QueryWrapper<>(); queryWrapper.eq("status", 1); Page<ParkingLot> result = parkingLotService.page(pageParam, queryWrapper); Map<String, Object> response = new HashMap<>(); response.put("code", 200); response.put("message", "success"); response.put("data", result.getRecords()); response.put("total", result.getTotal()); return response; } @PostMapping("/add") public Map<String, Object> addParkingLot(@RequestBody ParkingLot parkingLot) { Map<String, Object> result = new HashMap<>(); try { boolean saved = parkingLotService.save(parkingLot); if (saved) { result.put("code", 200); result.put("message", "添加成功"); } else { result.put("code", 500); result.put("message", "添加失败"); } } catch (Exception e) { result.put("code", 500); result.put("message", "系统错误: " + e.getMessage()); } return result; } }

3.6 配置文件设置

# application.yml server: port: 8080 servlet: context-path: /api spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_parking?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8 username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT+8 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

4. Vue3前端开发

4.1 项目初始化

创建Vue3项目并安装依赖：

# 创建项目 npm create vue@latest smart-parking-frontend # 进入项目目录 cd smart-parking-frontend # 安装依赖 npm install # 安装UI库和路由 npm install element-plus @element-plus/icons-vue npm install axios npm install vue-router@4

4.2 项目结构设计

src/ ├── components/ # 公共组件 ├── views/ # 页面组件 │ ├── ParkingLot.vue # 停车场管理 │ ├── ParkingSpace.vue # 车位管理 │ └── VehicleRecord.vue # 车辆记录 ├── router/ # 路由配置 ├── api/ # API接口 ├── utils/ # 工具函数 └── App.vue # 根组件

4.3 主页面布局

<!-- App.vue --> <template> <el-container class="layout-container"> <el-aside width="200px"> <el-menu router default-active="/parking-lot" class="el-menu-vertical" > <el-menu-item index="/parking-lot"> <el-icon><location /></el-icon> <span>停车场管理</span> </el-menu-item> <el-menu-item index="/parking-space"> <el-icon><setting /></el-icon> <span>车位管理</span> </el-menu-item> <el-menu-item index="/vehicle-record"> <el-icon><document /></el-icon> <span>车辆记录</span> </el-menu-item> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <span>智慧停车场管理系统</span> </el-header> <el-main> <router-view /> </el-main> </el-container> </el-container> </template> <script setup> import { Location, Setting, Document } from '@element-plus/icons-vue' </script> <style> .layout-container { height: 100vh; } .el-menu-vertical { height: 100%; } </style>

4.4 API接口封装

// src/api/parkingLot.js import request from '../utils/request' export function getParkingLotList(params) { return request({ url: '/parking-lot/list', method: 'get', params }) } export function addParkingLot(data) { return request({ url: '/parking-lot/add', method: 'post', data }) } export function updateParkingLot(data) { return request({ url: '/parking-lot/update', method: 'put', data }) } export function deleteParkingLot(id) { return request({ url: `/parking-lot/delete/${id}`, method: 'delete' }) }

4.5 停车场管理页面

<!-- src/views/ParkingLot.vue --> <template> <div class="parking-lot-management"> <el-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="id" label="ID" width="60" /> <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="pricePerHour" label="每小时价格" /> <el-table-column label="操作" width="200"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </el-card> <!-- 新增/编辑对话框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle"> <el-form :model="form" label-width="100px"> <el-form-item label="停车场名称"> <el-input v-model="form.name" /> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.address" /> </el-form-item> <el-form-item label="总车位数量"> <el-input-number v-model="form.totalSpaces" :min="1" /> </el-form-item> <el-form-item label="每小时价格"> <el-input-number v-model="form.pricePerHour" :min="0" :precision="2" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </template> </el-dialog> </div> </template> <script setup> import { ref, onMounted, computed } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import { getParkingLotList, addParkingLot, updateParkingLot, deleteParkingLot } from '../api/parkingLot' const loading = ref(false) const tableData = ref([]) const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const dialogVisible = ref(false) const form = ref({}) const isEdit = ref(false) const dialogTitle = computed(() => isEdit.value ? '编辑停车场' : '新增停车场') const fetchData = async () => { loading.value = true try { const response = await getParkingLotList({ page: currentPage.value, size: pageSize.value }) if (response.code === 200) { tableData.value = response.data total.value = response.total } } catch (error) { ElMessage.error('获取数据失败') } finally { loading.value = false } } const handleAdd = () => { isEdit.value = false form.value = {} dialogVisible.value = true } const handleEdit = (row) => { isEdit.value = true form.value = { ...row } dialogVisible.value = true } const handleDelete = async (id) => { try { await ElMessageBox.confirm('确定删除该停车场吗？', '提示', { type: 'warning' }) const response = await deleteParkingLot(id) if (response.code === 200) { ElMessage.success('删除成功') fetchData() } } catch (error) { // 用户取消删除 } } const handleSubmit = async () => { try { let response if (isEdit.value) { response = await updateParkingLot(form.value) } else { response = await addParkingLot(form.value) } if (response.code === 200) { ElMessage.success(isEdit.value ? '更新成功' : '添加成功') dialogVisible.value = false fetchData() } } catch (error) { ElMessage.error('操作失败') } } const handleSizeChange = (newSize) => { pageSize.value = newSize currentPage.value = 1 fetchData() } const handleCurrentChange = (newPage) => { currentPage.value = newPage fetchData() } onMounted(() => { fetchData() }) </script> <style scoped> .card-header { display: flex; justify-content: space-between; align-items: center; } </style>

5. 核心功能实现

5.1 车辆进出场逻辑

// VehicleRecordService.java package com.example.parking.service; import com.baomidou.mybatisplus.extension.service.IService; import com.example.parking.entity.VehicleRecord; public interface VehicleRecordService extends IService<VehicleRecord> { /** * 车辆入场 */ boolean vehicleEntry(String licensePlate, Long parkingLotId); /** * 车辆出场 */ boolean vehicleExit(String licensePlate); /** * 计算停车费用 */ BigDecimal calculateParkingFee(LocalDateTime entryTime, LocalDateTime exitTime, BigDecimal pricePerHour); } // VehicleRecordServiceImpl.java package com.example.parking.service.impl; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.math.BigDecimal; import java.time.Duration; import java.time.LocalDateTime; @Service public class VehicleRecordServiceImpl extends ServiceImpl<VehicleRecordMapper, VehicleRecord> implements VehicleRecordService { @Autowired private ParkingSpaceService parkingSpaceService; @Autowired private ParkingLotService parkingLotService; @Override @Transactional public boolean vehicleEntry(String licensePlate, Long parkingLotId) { // 查找空闲车位 ParkingSpace availableSpace = parkingSpaceService.findAvailableSpace(parkingLotId); if (availableSpace == null) { return false; } // 创建入场记录 VehicleRecord record = new VehicleRecord(); record.setLicensePlate(licensePlate); record.setParkingSpaceId(availableSpace.getId()); record.setEntryTime(LocalDateTime.now()); boolean saved = save(record); if (saved) { // 更新车位状态 availableSpace.setStatus(1); parkingSpaceService.updateById(availableSpace); // 更新停车场可用车位数量 parkingLotService.updateAvailableSpaces(parkingLotId, -1); } return saved; } @Override @Transactional public boolean vehicleExit(String licensePlate) { // 查找未出场的记录 QueryWrapper<VehicleRecord> queryWrapper = new QueryWrapper<>(); queryWrapper.eq("license_plate", licensePlate) .isNull("exit_time"); VehicleRecord record = getOne(queryWrapper); if (record == null) { return false; } // 更新出场时间和费用 record.setExitTime(LocalDateTime.now()); ParkingSpace space = parkingSpaceService.getById(record.getParkingSpaceId()); ParkingLot parkingLot = parkingLotService.getById(space.getParkingLotId()); BigDecimal fee = calculateParkingFee(record.getEntryTime(), record.getExitTime(), parkingLot.getPricePerHour()); record.setTotalAmount(fee); boolean updated = updateById(record); if (updated) { // 释放车位 space.setStatus(0); parkingSpaceService.updateById(space); // 更新停车场可用车位数量 parkingLotService.updateAvailableSpaces(space.getParkingLotId(), 1); } return updated; } @Override public BigDecimal calculateParkingFee(LocalDateTime entryTime, LocalDateTime exitTime, BigDecimal pricePerHour) { Duration duration = Duration.between(entryTime, exitTime); long hours = duration.toHours(); long minutes = duration.toMinutes() % 60; // 不足1小时按1小时计算 if (minutes > 0) { hours++; } // 至少按1小时计算 hours = Math.max(hours, 1); return pricePerHour.multiply(BigDecimal.valueOf(hours)); } }

5.2 数据统计功能

// StatisticsController.java package com.example.parking.controller; import com.example.parking.service.StatisticsService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.Map; @RestController @RequestMapping("/api/statistics") public class StatisticsController { @Autowired private StatisticsService statisticsService; @GetMapping("/daily") public Map<String, Object> getDailyStatistics() { return statisticsService.getDailyStatistics(); } @GetMapping("/monthly") public Map<String, Object> getMonthlyStatistics() { return statisticsService.getMonthlyStatistics(); } } // StatisticsServiceImpl.java package com.example.parking.service.impl; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.math.BigDecimal; import java.time.LocalDate; import java.util.HashMap; import java.util.Map; @Service public class StatisticsServiceImpl implements StatisticsService { @Autowired private VehicleRecordMapper vehicleRecordMapper; @Override public Map<String, Object> getDailyStatistics() { Map<String, Object> result = new HashMap<>(); LocalDate today = LocalDate.now(); // 今日入场车辆数 QueryWrapper<VehicleRecord> queryWrapper = new QueryWrapper<>(); queryWrapper.ge("entry_time", today.atStartOfDay()) .lt("entry_time", today.plusDays(1).atStartOfDay()); long todayEntries = vehicleRecordMapper.selectCount(queryWrapper); // 今日收入 queryWrapper.clear(); queryWrapper.ge("exit_time", today.atStartOfDay()) .lt("exit_time", today.plusDays(1).atStartOfDay()) .eq("payment_status", 1); BigDecimal todayIncome = vehicleRecordMapper.selectList(queryWrapper) .stream() .map(VehicleRecord::getTotalAmount) .reduce(BigDecimal.ZERO, BigDecimal::add); result.put("todayEntries", todayEntries); result.put("todayIncome", todayIncome); result.put("date", today.toString()); return result; } }

6. 系统部署与配置

6.1 后端部署配置

创建Docker部署文件：

# Dockerfile FROM openjdk:17-jdk-slim VOLUME /tmp COPY target/smart-parking-1.0.0.jar app.jar ENTRYPOINT ["java","-jar","/app.jar"]

# docker-compose.yml version: '3.8' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: 123456 MYSQL_DATABASE: smart_parking ports: - "3306:3306" volumes: - mysql_data:/var/lib/mysql backend: build: . ports: - "8080:8080" depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/smart_parking SPRING_DATASOURCE_USERNAME: root SPRING_DATASOURCE_PASSWORD: 123456 volumes: mysql_data:

6.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 } } }, build: { outDir: 'dist', assetsDir: 'static' } })

6.3 Nginx配置

# nginx.conf server { listen 80; server_name localhost; # 前端静态文件 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 后端API代理 location /api/ { proxy_pass http://backend:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

7. 常见问题与解决方案

7.1 开发环境问题

问题1：Java版本不兼容

错误信息：java: 警告: 源发行版 17 需要目标发行版 17

解决方案：检查IDE中的Java编译版本设置，确保项目SDK和语言级别都为17。

问题2：MySQL连接失败

错误信息：Communications link failure

解决方案：检查MySQL服务是否启动，数据库连接字符串是否正确，防火墙端口是否开放。

问题3：前端代理配置错误

错误信息：Proxy error: Could not proxy request

解决方案：检查vite.config.js中的proxy配置，确保后端服务地址正确。

7.2 业务逻辑问题

问题4：车位状态同步异常场景：车辆入场后车位状态未及时更新解决方案：使用数据库事务确保车位状态和车辆记录的一致性。

问题5：费用计算精度问题场景：停车费用计算出现小数精度误差解决方案：使用BigDecimal进行金额计算，避免使用double类型。

问题6：并发访问问题场景：多个用户同时操作同一车位解决方案：使用数据库行级锁或乐观锁机制防止数据冲突。

7.3 性能优化建议

数据库索引优化

-- 为常用查询字段添加索引 CREATE INDEX idx_vehicle_record_license ON vehicle_record(license_plate); CREATE INDEX idx_vehicle_record_entry_time ON vehicle_record(entry_time); CREATE INDEX idx_parking_space_status ON parking_space(status);