基于STM32的实时监测环境系统设计：Flask、SQLite、Vue.js、HTTP/TCP技术

一、项目概述

目标与用途

该系统能够实时监测环境中的温度、湿度、烟雾及气体浓度等关键参数，通过数据分析判断环境安全性，并在出现异常时自动推送报警信息至用户手机。此外，系统具备历史数据记录与趋势分析功能，便于生成报告和进行后续分析，适用于智能家居、工业环境监测、公共场所安全防护等多个领域。

技术栈关键词

• 硬件：STM32单片机、DHT22温湿度传感器、MQ系列气体传感器（如MQ-2、MQ-7）、ESP8266或ESP32 Wi-Fi模块

• 软件：Python（数据分析与可视化）、Django或Flask（后端服务）、Vue.js（前端界面）

二、系统架构

系统架构设计

系统架构分为硬件层和软件层。硬件层通过STM32单片机连接不同类型的传感器，并通过Wi-Fi模块与后端服务器进行数据通信。软件层则由后端服务和前端界面构成，后端负责数据接收、处理和存储，前端提供用户交互界面。

硬件架构

• STM32单片机：作为主控，负责接收来自各传感器的数据。

• 温湿度传感器（DHT22）：监测环境温度和湿度。

• 气体传感器（MQ系列）：监测空气中的有害气体浓度。

• 烟雾传感器：监测空气中的烟雾浓度。

• Wi-Fi模块（ESP8266/ESP32）：实现数据与后端服务器的无线通信。

软件架构

• 后端服务：使用Flask或Django框架开发RESTful API，处理数据存储与异常报警逻辑。

• 数据库：使用SQLite或MySQL存储历史监测数据。

• 前端界面：基于Vue.js构建，提供实时数据展示和报警通知。

选择的单片机与通信协议

• 单片机：选择STM32F103C8T6，因其具有丰富的外设接口和强大的计算能力，适合多传感器的实时数据处理。

• 通信协议：使用HTTP/HTTPS协议通过Wi-Fi模块与后端进行数据交互，保证数据传输的实时性和安全性。

系统架构图

监测数据 监测数据 监测数据 发送数据 HTTP请求 数据存储 推送信息 提供数据 用户请求 温湿度传感器 STM32单片机 气体传感器 烟雾传感器 Wi-Fi模块 后端服务器 数据库 用户手机 前端界面

三、环境搭建和注意事项

硬件环境搭建

1. 所需组件：

   • STM32开发板（如STM32F103C8T6）

   • DHT22温湿度传感器

   • MQ系列气体传感器（如MQ-2、MQ-7）

   • 烟雾传感器（如MQ-135）

   • ESP8266或ESP32 Wi-Fi模块

   • 连接线、面包板、供电模块

2. 连接方式：

   • 将DHT22传感器的VCC、GND和数据引脚分别连接至STM32的相应引脚。

   • MQ气体传感器的输出引脚连接至STM32的模拟输入引脚。

   • 烟雾传感器连接至STM32的另一模拟输入引脚。

   • ESP8266/ESP32模块通过串口（TX/RX）与STM32连接，用于数据通信。

软件环境搭建

1. 开发环境：

   • 操作系统：建议使用Windows、Linux或macOS。

   • Python版本：确保安装Python 3.x。

   • 必要库：安装Flask或Django、NumPy、Pandas、Requests等库。可以使用以下命令安装所需库：

     pip install Flask Flask-RESTful NumPy Pandas Requests

   • Vue.js环境：确保安装Node.js和npm，然后通过以下命令安装Vue CLI：

     npm install -g @vue/cli

2. 后端框架搭建：

   • Flask示例：

   from flask import Flask, request, jsonify
   from flask_sqlalchemy import SQLAlchemy
   
   app = Flask(__name__)
   app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///environment_data.db'
   db = SQLAlchemy(app)
   
   class EnvironmentData(db.Model):
       id = db.Column(db.Integer, primary_key=True)
       temperature = db.Column(db.Float, nullable=False)
       humidity = db.Column(db.Float, nullable=False)
       gas_concentration = db.Column(db.Float, nullable=False)
       timestamp = db.Column(db.DateTime, default=db.func.current_timestamp())
   
   @app.route('/api/data', methods=['POST'])
   def receive_data():
       data = request.get_json()
       new_data = EnvironmentData(
           temperature=data['temperature'],
           humidity=data['humidity'],
           gas_concentration=data['gas_concentration']
       )
       db.session.add(new_data)
       db.session.commit()
       return jsonify({'status': 'success'}), 201
   
   if __name__ == '__main__':
       db.create_all()
       app.run(host='0.0.0.0', port=5000)

3. 前端框架搭建：

   • 创建Vue项目：

     vue create environment-monitoringcd environment-monitoring

   • 在项目中安装Axios用于HTTP请求：

     npm install axios

注意事项

• Wi-Fi模块配置：确保ESP8266/ESP32能够连接到网络，并配置正确的SSID和密码。可通过AT指令或Arduino IDE进行配置。

• 传感器校准：在实际应用中，传感器需要经过校准，以确保数据的准确性。

• 异常处理：在代码中加入异常处理机制，确保在通信失败或数据读取错误时程序能够稳定运行。

四、代码实现过程

以下是系统的各个模块实现细节，包括数据读取、上传、报警等功能。

1. 传感器数据读取模块

DHT22温湿度传感器读取

使用STM32的ADC和GPIO读取DHT22传感器的温湿度数据。

#include "DHT.h"

DHT dht(DHTPIN, DHTTYPE); // DHTPIN为连接DHT22的引脚，DHTTYPE为传感器类型

void setup() {
    dht.begin();
}

void loop() {
    float h = dht.readHumidity(); // 读取湿度
    float t = dht.readTemperature(); // 读取温度
    if (isnan(h) || isnan(t)) {
        Serial.println("Failed to read from DHT sensor!");
        return;
    }
    // 发送数据到Wi-Fi模块
    sendData(t, h);
    delay(2000); // 2秒读取一次
}

MQ系列气体传感器读取

int readGasSensor() {
    // 假设MQ传感器连接在A0引脚
    int gasValue = analogRead(A0);
    return gasValue; // 返回气体浓度值
}

2. 数据上传模块

将传感器读取的数据通过HTTP POST请求发送到后端服务器。

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266HTTPClient.h>

void sendData(float temperature, float humidity) {
    if (WiFi.status() == WL_CONNECTED) {
        HTTPClient http;
        http.begin("http://your_server_address/api/data");
        http.addHeader("Content-Type", "application/json");
        
        String jsonData = "{\"temperature\": " + String(temperature) + 
                          ", \"humidity\": " + String(humidity) + 
                          ", \"gas_concentration\": " + String(readGasSensor()) + "}";
        
        int httpResponseCode = http.POST(jsonData);
        if (httpResponseCode > 0) {
            String response = http.getString();
            Serial.println(httpResponseCode);
            Serial.println(response);
        } else {
            Serial.print("Error on sending POST: ");
            Serial.println(httpResponseCode);
        }
        http.end(); // 结束HTTP请求
    } else {
        Serial.println("WiFi not connected");
    }
}

3. 异常检测与报警模块

在后端，接收到数据后，需要进行异常检测并在条件满足时发送报警信息至用户手机。

后端异常检测示例

@app.route('/api/data', methods=['POST'])
def receive_data():
    data = request.get_json()
    new_data = EnvironmentData(
        temperature=data['temperature'],
        humidity=data['humidity'],
        gas_concentration=data['gas_concentration']
    )
    
    # 检测异常
    if new_data.temperature > 50 or new_data.humidity > 80 or new_data.gas_concentration > 300:  # 自定义阈值
        send_alert(new_data)

    db.session.add(new_data)
    db.session.commit()
    return jsonify({'status': 'success'}), 201

def send_alert(data):
    # 这里可以使用推送服务（如Firebase Cloud Messaging）来发送报警信息
    # 伪代码示例
    alert_message = f"警报！检测到异常数据：温度={data.temperature}°C, 湿度={data.humidity}%, 气体浓度={data.gas_concentration}"
    # 例如，使用推送通知发送
    push_notification(alert_message)

4. 前端数据展示模块

Vue.js前端示例

在前端使用Axios从后端获取数据并进行展示。

<template>
  <div>
    <h1>环境监测系统</h1>
    <div>
      <p>当前温度: {{ temperature }} °C</p>
      <p>当前湿度: {{ humidity }} %</p>
      <p>当前气体浓度: {{ gasConcentration }}</p>
    </div>
    <button @click="fetchData">刷新数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      temperature: 0,
      humidity: 0,
      gasConcentration: 0
    };
  },
  methods: {
    fetchData() {
      axios.get('http://your_server_address/api/latest-data')
        .then(response => {
          this.temperature = response.data.temperature;
          this.humidity = response.data.humidity;
          this.gasConcentration = response.data.gas_concentration;
        })
        .catch(error => {
          console.error("There was an error fetching the data!", error);
        });
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

5. 数据可视化

为了更直观地展示历史数据，可以使用Chart.js等库进行数据可视化。

Chart.js示例

在前端中添加Chart.js用于显示温度和湿度的变化趋势：

<canvas id="myChart"></canvas>

import Chart from 'chart.js/auto';

methods: {
  renderChart(data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.timestamps, // 数据时间戳
        datasets: [{
          label: '温度',
          data: data.temperatures,
          borderColor: 'rgba(255, 99, 132, 1)',
          fill: false
        },
        {
          label: '湿度',
          data: data.humidities,
          borderColor: 'rgba(54, 162, 235, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

五、项目总结

本项目实现了一个多传感器环境监测与预警系统，通过STM32单片机、DHT22温湿度传感器、MQ系列气体传感器以及ESP8266/ESP32模块，构建了一个完整的实时监测解决方案。系统能够实时监测环境的温度、湿度、烟雾和气体浓度，并通过数据分析判断环境安全性，在检测到异常时自动推送报警信息至用户手机。同时，系统还支持历史数据记录和趋势分析，便于生成报告。

主要功能总结：

• 实时监测：通过多个传感器对环境数据进行实时采集，确保环境状态随时可知。

• 数据分析与判断：系统通过分析收集的温度、湿度、气体浓度等数据，判断环境安全性，并设定合理的阈值来进行异常检测。

• 报警推送：在检测到异常数据时，系统会自动推送报警信息至用户手机，确保用户能够及时响应潜在的危险。

• 历史数据记录与趋势分析：系统支持对历史监测数据的存储，用户可以查看历史数据并进行趋势分析，从而更好地理解环境变化情况，形成数据报告以供后续参考。

• 用户友好的界面：前端使用Vue.js构建，提供直观的用户界面，用户可以轻松获取实时数据和历史记录。