基于SpringBoot+Vue的停车场管理系统

基于SpringBoot+Vue的停车场管理系统设计与实现

引言

随着汽车数量的迅速增长，停车场管理面临着越来越多的挑战。传统的人工停车管理方式效率低下，容易出现车位管理混乱、收费不规范、车牌信息登记错误等问题。为了提高停车场的管理效率和用户体验，基于现代信息技术的智能停车场管理系统成为了优化停车场运营的关键手段。

本系统的目标是设计并实现一个基于SpringBoot 和Vue 的智能停车场管理系统，结合车牌识别技术，实现停车场的车牌自动识别、车位管理、收费管理、历史记录查询等功能。该系统通过前后端分离的架构设计，前端采用Vue.js，后端基于SpringBoot，实现停车场管理的高效化、智能化。

1. 系统需求分析

1.1 背景与现状

现代停车场管理系统的核心需求是提高车辆进出效率和车位使用率，同时确保停车费用的准确性。传统的停车场管理依赖人工登记车辆信息和收费，不仅存在工作效率低的问题，还容易出现信息记录不准确、收费失误等情况，特别是在高峰期停车场面临较大的压力。

为了改善这些问题，智能停车场管理系统需要引入自动化和智能化的功能。通过车牌识别技术，系统可以在车辆进入和离开停车场时自动识别车牌信息，实时记录车辆进出时间并计算停车费用。通过信息化系统，管理员可以轻松查看停车场的车位使用情况、车辆历史记录等。

1.2 功能需求

本系统的主要功能需求如下：

1.2.1 车牌自动识别

系统在车辆进入和离开停车场时，通过摄像头进行车牌识别，并将车牌号与数据库中的记录进行匹配。
自动记录车辆的入场和出场时间，便于后续的停车收费计算。

1.2.2 停车位管理

系统应实时显示停车场的车位使用情况，管理员可以查看当前的空余车位和已占用车位数量。
支持对车位的手动管理，如手动分配或释放车位。

1.2.3 收费管理

根据车辆的停车时长自动计算停车费用，支持设置不同时间段的收费标准（如按小时收费、按天收费等）。
支持生成停车费账单，并提供历史账单查询功能。

1.2.4 历史记录查询

系统应记录每辆车的进出历史、停车时长、缴费记录等，管理员可以通过车牌号查询车辆的历史停车信息。
系统应提供操作日志记录功能，便于对系统的操作行为进行审计。

1.3 非功能需求

除了基本的功能需求外，系统还需要满足以下非功能需求：

系统性能：系统应能够快速响应车牌识别请求，确保车辆在进入和离开停车场时不出现延迟。
系统安全性：系统应对用户数据、车辆信息、账单信息等进行保护，避免数据泄露或非法访问。
易用性：系统的前端界面应简洁直观，方便管理员快速查看停车场状态和车辆信息。
可扩展性：系统应具备良好的扩展性，能够根据未来需求扩展更多功能，如会员管理、车位预约等。

2. 系统架构设计

本系统采用前后端分离架构 ，前端使用Vue.js 进行开发，后端基于SpringBoot 进行业务逻辑的实现和数据处理。车牌识别功能使用OpenCV结合深度学习技术来完成，通过摄像头采集车辆图片并进行车牌识别。

2.1 系统架构图

系统架构如下：

前端（Vue.js）：前端界面提供车牌识别结果展示、停车位状态显示、账单生成等功能，通过Ajax与后端API进行数据交互。
后端（SpringBoot）：后端负责处理前端发送的请求，包括车牌识别结果处理、停车记录管理、收费计算等。后端还负责与数据库交互，存储车辆信息和停车场状态。
数据库（MySQL）：用于存储车辆进出记录、车位信息、收费标准、账单记录等数据。
车牌识别模块（OpenCV）：基于摄像头获取车牌图像，并通过OpenCV进行图像处理和车牌识别，将识别结果传给后端处理。

2.2 前端技术选型

前端使用Vue.js框架构建，Vue是一个渐进式JavaScript框架，适合构建单页面应用程序。其核心优势在于：

响应式设计：Vue.js能够提供良好的用户体验，前端页面能够根据用户的操作即时更新数据，无需刷新页面。
组件化开发：通过组件化的方式，可以提高代码的可复用性和可维护性。
易于与后端API对接：Vue.js能够通过Axios等工具方便地与SpringBoot提供的后端API进行数据交互。

2.3 后端技术选型

后端使用SpringBoot框架构建，SpringBoot是一个基于Spring的简化开发的框架，适用于快速构建生产级的Spring应用。其优势包括：

快速开发：SpringBoot简化了Spring框架的配置过程，能够快速启动一个Web项目。
内置服务器：SpringBoot自带内置的Tomcat服务器，无需额外部署容器，简化了应用的运行和管理。
丰富的生态系统：SpringBoot提供了完善的生态系统，能够与主流的数据库、消息队列、缓存等服务无缝对接。

2.4 数据库设计

数据库使用MySQL，设计主要包含以下几张核心表：

车辆信息表（car_info）：

记录车牌号、车辆类型、入场时间、出场时间等信息。

sql 复制代码

CREATE TABLE car_info (
    id INT PRIMARY KEY AUTO_INCREMENT,
    license_plate VARCHAR(20) NOT NULL,
    car_type VARCHAR(20),
    entry_time TIMESTAMP,
    exit_time TIMESTAMP,
    parking_fee DECIMAL(10, 2),
    status VARCHAR(10)  -- 'in' 或 'out'
);

停车位表（parking_spot）：

记录停车位状态，是否占用。

sql 复制代码

CREATE TABLE parking_spot (
    id INT PRIMARY KEY AUTO_INCREMENT,
    spot_number VARCHAR(10) NOT NULL,
    is_occupied BOOLEAN DEFAULT FALSE
);

收费标准表（fee_rule）：

设置不同时间段、车辆类型的收费标准。

sql 复制代码

CREATE TABLE fee_rule (
    id INT PRIMARY KEY AUTO_INCREMENT,
    car_type VARCHAR(20) NOT NULL,
    hourly_rate DECIMAL(5, 2)  -- 每小时收费
);

停车记录表（parking_log）：

记录每次车辆进出停车场的详细信息。

sql 复制代码

CREATE TABLE parking_log (
    id INT PRIMARY KEY AUTO_INCREMENT,
    license_plate VARCHAR(20) NOT NULL,
    entry_time TIMESTAMP,
    exit_time TIMESTAMP,
    parking_fee DECIMAL(10, 2),
    spot_id INT,
    FOREIGN KEY (spot_id) REFERENCES parking_spot(id)
);

2.5 车牌识别技术选型

车牌识别模块采用OpenCV 结合深度学习模型，具体的识别流程包括：

图像采集：使用摄像头获取车辆的车牌图像。
图像预处理：通过OpenCV对图像进行灰度化、去噪、二值化等操作，增强车牌区域的对比度。
车牌定位：使用边缘检测算法识别车牌区域。
字符分割与识别：对车牌上的字符进行分割，并通过深度学习模型（如卷积神经网络，CNN）识别车牌号。
数据传输：将识别到的车牌号传输给后端进行处理。

3. 系统功能模块实现

3.1 车牌识别功能实现

车牌识别是系统的核心功能，通过使用摄像头捕捉车辆图像并识别车牌号。OpenCV结合Tesseract-OCR或深度学习模型用于实现这一功能。

示例代码：车牌识别功能

python 复制代码

import cv2
import numpy as np
import pytesseract

# 加载车牌识别模型
def recognize_license_plate(image_path):
    # 读取图像


    image = cv2.imread(image_path)
    
    # 转灰度图像
    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    
    # 去噪
    blurred = cv2.GaussianBlur(gray, (5, 5), 0)
    
    # 边缘检测
    edges = cv2.Canny(blurred, 100, 200)
    
    # 识别车牌区域（假设使用一些边缘检测+轮廓检测方法）
    contours, _ = cv2.findContours(edges, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
    for cnt in contours:
        x, y, w, h = cv2.boundingRect(cnt)
        if w/h > 2:  # 假设车牌的长宽比
            plate_img = gray[y:y+h, x:x+w]
            break
    
    # 使用OCR识别车牌
    license_plate = pytesseract.image_to_string(plate_img)
    return license_plate.strip()

# 示例调用
license_plate = recognize_license_plate('car_image.jpg')
print("识别出的车牌号为：", license_plate)

3.2 停车位管理功能实现

停车位管理模块通过SpringBoot提供的后端API，管理员可以查看当前停车场的车位使用情况，并通过界面手动管理车位。

后端接口：获取停车位状态

java 复制代码

@RestController
@RequestMapping("/api/parking")
public class ParkingSpotController {

    @Autowired
    private ParkingSpotService parkingSpotService;

    // 获取停车场车位状态
    @GetMapping("/spots")
    public List<ParkingSpot> getAllSpots() {
        return parkingSpotService.getAllSpots();
    }
    
    // 更新车位状态
    @PostMapping("/updateSpot")
    public ResponseEntity<String> updateSpot(@RequestParam int spotId, @RequestParam boolean isOccupied) {
        parkingSpotService.updateSpotStatus(spotId, isOccupied);
        return ResponseEntity.ok("车位状态已更新");
    }
}

前端调用接口并展示车位状态

javascript 复制代码

<template>
  <div>
    <h3>停车场状态</h3>
    <table>
      <thead>
        <tr>
          <th>车位编号</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="spot in parkingSpots" :key="spot.id">
          <td>{{ spot.spot_number }}</td>
          <td>{{ spot.is_occupied ? '已占用' : '空闲' }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parkingSpots: []
    };
  },
  mounted() {
    this.fetchParkingSpots();
  },
  methods: {
    fetchParkingSpots() {
      axios.get('/api/parking/spots').then(response => {
        this.parkingSpots = response.data;
      });
    }
  }
};
</script>

3.3 收费管理功能实现

系统根据车辆的停车时长计算停车费用，并支持管理员查看停车费的历史记录。收费标准可以按照每小时收费，也可以自定义规则。

后端接口：计算停车费用

java 复制代码

@RestController
@RequestMapping("/api/fee")
public class FeeController {

    @Autowired
    private ParkingLogService parkingLogService;

    // 计算停车费用
    @GetMapping("/calculate")
    public ResponseEntity<BigDecimal> calculateFee(@RequestParam String licensePlate) {
        BigDecimal fee = parkingLogService.calculateParkingFee(licensePlate);
        return ResponseEntity.ok(fee);
    }
}

收费计算逻辑

java 复制代码

@Service
public class ParkingLogService {

    @Autowired
    private FeeRuleRepository feeRuleRepository;
    @Autowired
    private ParkingLogRepository parkingLogRepository;

    // 计算停车费用
    public BigDecimal calculateParkingFee(String licensePlate) {
        ParkingLog log = parkingLogRepository.findByLicensePlateAndStatus(licensePlate, "in");
        LocalDateTime entryTime = log.getEntryTime();
        LocalDateTime exitTime = LocalDateTime.now();
        Duration duration = Duration.between(entryTime, exitTime);
        long hours = duration.toHours();
        
        FeeRule feeRule = feeRuleRepository.findByCarType(log.getCarType());
        return BigDecimal.valueOf(hours).multiply(feeRule.getHourlyRate());
    }
}

3.4 历史记录查询功能实现

管理员可以通过车牌号查询车辆的历史停车记录，包括入场、出场时间和停车费用。

后端接口：查询停车历史记录

java 复制代码

@RestController
@RequestMapping("/api/history")
public class HistoryController {

    @Autowired
    private ParkingLogService parkingLogService;

    // 查询停车历史
    @GetMapping("/logs")
```java
    public List<ParkingLog> getParkingLogs(@RequestParam String licensePlate) {
        return parkingLogService.findParkingLogsByLicensePlate(licensePlate);
    }
}

服务层：查询停车记录

java 复制代码

@Service
public class ParkingLogService {

    @Autowired
    private ParkingLogRepository parkingLogRepository;

    // 根据车牌号查询停车记录
    public List<ParkingLog> findParkingLogsByLicensePlate(String licensePlate) {
        return parkingLogRepository.findByLicensePlate(licensePlate);
    }
}

ParkingLogRepository 接口

java 复制代码

@Repository
public interface ParkingLogRepository extends JpaRepository<ParkingLog, Long> {

    List<ParkingLog> findByLicensePlate(String licensePlate);
}

前端实现：历史记录查询

javascript 复制代码

<template>
  <div>
    <h3>停车记录查询</h3>
    <input v-model="licensePlate" placeholder="输入车牌号" />
    <button @click="fetchParkingLogs">查询</button>

    <table v-if="parkingLogs.length > 0">
      <thead>
        <tr>
          <th>车牌号</th>
          <th>入场时间</th>
          <th>出场时间</th>
          <th>停车费用</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="log in parkingLogs" :key="log.id">
          <td>{{ log.license_plate }}</td>
          <td>{{ log.entry_time }}</td>
          <td>{{ log.exit_time }}</td>
          <td>{{ log.parking_fee }}</td>
        </tr>
      </tbody>
    </table>

    <p v-else>暂无记录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      licensePlate: '',
      parkingLogs: []
    };
  },
  methods: {
    fetchParkingLogs() {
      axios.get(`/api/history/logs?licensePlate=${this.licensePlate}`).then(response => {
        this.parkingLogs = response.data;
      });
    }
  }
};
</script>

4. 系统调试与测试

4.1 功能测试

4.1.1 车牌识别测试

测试车牌识别模块，确保在不同光线条件下能够准确识别车辆的车牌号。
测试不同角度的车牌图像，确保识别准确率。

4.1.2 停车位管理测试

模拟停车场的多个车位状态变化，确保系统能够实时更新停车位的占用状态。
测试手动分配和释放车位功能，验证系统的灵活性。

4.1.3 收费管理测试

测试不同停车时长的车辆，验证收费计算逻辑是否准确。
测试不同类型车辆（如小轿车、大巴车）在不同收费标准下的费用计算。

4.1.4 历史记录查询测试

测试通过车牌号查询历史停车记录，确保数据查询结果的准确性和完整性。
验证停车日志记录功能，确保所有的进出场操作都有详细的记录。

4.2 性能测试

为了确保系统在高峰时期能够正常运行，需要进行压力测试和性能测试：

响应时间测试：模拟大量车辆进出停车场的情况，测试车牌识别、停车场状态更新、收费计算的响应时间。
并发测试：模拟多个用户同时查询停车记录、查看车位状态，确保系统在并发访问下仍能稳定运行。

4.3 安全测试

系统涉及停车场管理和收费，必须确保数据的安全性。需要进行以下安全性测试：

权限控制测试：确保不同用户角色（如管理员、普通用户）只能访问相应的功能和数据。
数据加密测试：验证停车记录和支付信息是否经过加密存储，防止数据泄露。
异常处理测试：模拟网络中断、数据丢失等异常情况，测试系统的容错能力和数据恢复机制。

5. 系统优化与扩展

5.1 性能优化

为了提高系统性能，可以对以下几个方面进行优化：

缓存技术：使用缓存（如Redis）存储停车位状态和常用查询结果，减少对数据库的频繁访问，提升查询效率。
数据库优化：对常用的查询操作（如停车记录查询）进行索引优化，提升数据库的响应速度。
并发处理：优化SpringBoot的异步处理能力，使用多线程技术处理并发请求，确保在高峰期车辆出入频繁的情况下，系统仍能快速响应。

5.2 功能扩展

在系统基本功能实现的基础上，可以考虑以下扩展功能：

会员管理：为常驻用户（如公司员工）提供会员功能，支持月租车位和优惠费用结算。
车位预约功能：用户可以通过手机App提前预约停车位，确保在高峰期仍有车位可用。
车位引导功能：通过在停车场内设置显示屏或手机App导航，帮助用户快速找到空余车位，提高车位使用效率。
支付集成：集成支付宝、微信等支付接口，提供在线支付停车费用的功能，减少人工收费带来的操作复杂性。

5.3 移动端支持

为方便用户实时查看停车状态、支付停车费用等，可以开发移动端应用：

手机App：基于Flutter或React Native开发跨平台的停车管理App，用户可以通过App查看停车记录、支付费用、预约车位等。
微信小程序：针对国内用户广泛使用的微信小程序，提供简单快捷的停车服务接入点。

6. 结论

通过基于SpringBoot和Vue的前后端分离架构，本系统实现了智能停车场管理的核心功能，包括车牌识别、停车位管理、收费计算和历史记录查询等功能。系统不仅提高了停车场的运营效率，还通过信息化手段减少了人工操作带来的错误和延迟。同时，基于SpringBoot的后端设计使得系统具有较好的扩展性，能够应对未来功能的扩展需求。

在车牌识别技术的加持下，系统实现了车辆进出场的自动化管理，减少了人工干预，提高了用户体验。未来，通过集成更多的智能功能，如车位引导、移动支付、车位预约等，系统将进一步提升停车场的智能化水平，适应更多实际应用场景的需求。

参考文献

《Spring Boot 实战》 ------ Craig Walls
《Vue.js权威指南》 ------ Anthony Gore
《OpenCV：Python计算机视觉编程》 ------ Joseph Howse
Spring官方文档：https://spring.io/projects/spring-boot
Vue.js 官方文档：https://vuejs.org/
OpenCV官方文档：https://opencv.org/