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

STM32、Spring Boot、MQTT和React Native：智能停车管理系统的全栈开发详解（附代码示例）

news 来源：原创 2024/9/20 6:27:17

1. 项目概述

随着城市化进程的加快，停车难已成为许多大中城市面临的普遍问题。为了提高停车效率，改善用户体验，本文设计并实现了一套智能停车管理系统。该系统利用STM32微控制器、各类传感器以及移动应用，实现了停车位实时监控、在线预约和自动支付等功能，为用户提供了便捷的停车服务。

本系统的主要功能包括：

实时监控停车位状态
提供停车位在线预约
自动识别车牌
移动应用支付功能
停车数据统计和分析

2. 系统设计

2.1 硬件设计

系统的硬件部分主要包括以下组件：

STM32F103微控制器：作为系统的核心控制单元
HC-SR04超声波传感器：检测车位是否有车辆占用
OV7670摄像头模块：采集车牌图像
ESP8266 Wi-Fi模块：实现与服务器的无线通信
LED指示灯：显示车位状态（红色表示占用，绿色表示空闲）

硬件连接示意图如下：

2.2 软件设计

软件架构采用前后端分离的设计，具体包括：

前端：使用React Native开发跨平台移动应用
后端：采用Spring Boot框架，提供RESTful API
数据库：使用MySQL存储用户信息、停车记录等数据
消息队列：使用RabbitMQ处理高并发场景下的消息传递
缓存：使用Redis缓存热点数据，提高系统响应速度

软件架构图如下：

3. 代码实现

3.1 STM32固件代码

以下是STM32读取超声波传感器数据并通过MQTT上传的示例代码：

#include "stm32f1xx_hal.h"
#include "mqtt.h"// 定义引脚
#define TRIG_PIN GPIO_PIN_0
#define TRIG_PORT GPIOA
#define ECHO_PIN GPIO_PIN_1
#define ECHO_PORT GPIOA// 初始化超声波传感器
void init_hcsr04(void) {GPIO_InitTypeDef GPIO_InitStruct = {0};// 配置TRIG引脚为输出GPIO_InitStruct.Pin = TRIG_PIN;GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;GPIO_InitStruct.Pull = GPIO_NOPULL;GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;HAL_GPIO_Init(TRIG_PORT, &GPIO_InitStruct);// 配置ECHO引脚为输入GPIO_InitStruct.Pin = ECHO_PIN;GPIO_InitStruct.Mode = GPIO_MODE_INPUT;GPIO_InitStruct.Pull = GPIO_NOPULL;HAL_GPIO_Init(ECHO_PORT, &GPIO_InitStruct);
}// 获取距离数据
uint16_t get_distance(void) {uint32_t start_time, end_time;uint16_t distance;// 发送10us的触发脉冲HAL_GPIO_WritePin(TRIG_PORT, TRIG_PIN, GPIO_PIN_SET);HAL_Delay_us(10);HAL_GPIO_WritePin(TRIG_PORT, TRIG_PIN, GPIO_PIN_RESET);// 等待回波while(HAL_GPIO_ReadPin(ECHO_PORT, ECHO_PIN) == GPIO_PIN_RESET);start_time = HAL_GetTick();while(HAL_GPIO_ReadPin(ECHO_PORT, ECHO_PIN) == GPIO_PIN_SET);end_time = HAL_GetTick();// 计算距离 (声速约为340m/s，来回需要除以2)distance = (end_time - start_time) * 340 / 2 / 1000;return distance;
}// MQTT数据上传
void upload_data(uint16_t distance) {char payload[50];sprintf(payload, "{\"parkingId\": 1, \"distance\": %d}", distance);mqtt_publish("parking/status", payload);
}// 主循环
void main(void) {// 初始化硬件HAL_Init();init_hcsr04();mqtt_init();while(1) {uint16_t dist = get_distance();// 判断停车位状态if (dist < 50) {  // 如果距离小于50cm，认为有车HAL_GPIO_WritePin(LED_PORT, LED_PIN_RED, GPIO_PIN_SET);HAL_GPIO_WritePin(LED_PORT, LED_PIN_GREEN, GPIO_PIN_RESET);} else {HAL_GPIO_WritePin(LED_PORT, LED_PIN_RED, GPIO_PIN_RESET);HAL_GPIO_WritePin(LED_PORT, LED_PIN_GREEN, GPIO_PIN_SET);}upload_data(dist);HAL_Delay(1000);  // 每秒检测一次}
}

这段代码实现了以下功能：

初始化超声波传感器的GPIO引脚
通过超声波传感器测量距离
根据测量距离判断停车位状态，并控制LED指示灯
通过MQTT协议上传停车位状态数据

3.2 Spring Boot后端代码

以下是处理停车位状态更新的Spring Boot控制器示例：

@RestController
@RequestMapping("/api/parking")
public class ParkingController {@Autowiredprivate ParkingService parkingService;@PostMapping("/status")public ResponseEntity<?> updateStatus(@RequestBody ParkingStatus status) {try {ParkingSpot updatedSpot = parkingService.updateParkingStatus(status);return ResponseEntity.ok(updatedSpot);} catch (Exception e) {return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error updating parking status");}}@GetMapping("/available")public ResponseEntity<?> getAvailableSpots() {try {List<ParkingSpot> availableSpots = parkingService.getAvailableSpots();return ResponseEntity.ok(availableSpots);} catch (Exception e) {return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error fetching available spots");}}@PostMapping("/reserve")public ResponseEntity<?> reserveSpot(@RequestBody ReservationRequest request) {try {Reservation reservation = parkingService.reserveSpot(request);return ResponseEntity.ok(reservation);} catch (Exception e) {return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Error reserving spot: " + e.getMessage());}}
}

这个控制器实现了以下功能：

更新停车位状态
获取可用停车位列表
预约停车位

3.3 React Native前端代码

以下是React Native应用中显示可用停车位的组件示例：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import axios from 'axios';const AvailableSpots = () => {const [spots, setSpots] = useState([]);useEffect(() => {const fetchSpots = async () => {try {const response = await axios.get('http://api.example.com/parking/available');setSpots(response.data);} catch (error) {console.error('Error fetching available spots:', error);}};fetchSpots();const interval = setInterval(fetchSpots, 30000); // 每30秒更新一次return () => clearInterval(interval);}, []);const renderSpot = ({ item }) => (<View style={styles.spotItem}><Text>Spot ID: {item.id}</Text><Text>Status: {item.status}</Text></View>);return (<View style={styles.container}><Text style={styles.title}>Available Parking Spots</Text><FlatListdata={spots}renderItem={renderSpot}keyExtractor={item => item.id.toString()}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,padding: 10,},title: {fontSize: 20,fontWeight: 'bold',marginBottom: 10,},spotItem: {padding: 10,borderBottomWidth: 1,borderBottomColor: '#ccc',},
});export default AvailableSpots;

这个组件实现了以下功能：