基于STM32+ESP8266打造智能家居温湿度监控系统（附源码接线图）

摘要: 本文将介绍如何使用STM32单片机、ESP8266 Wi-Fi模块和Python Flask框架构建一个完整的物联网系统，实现传感器数据采集、无线传输、云端存储及Web可视化展示。

关键词: STM32, ESP8266, 传感器, Flask, 物联网, 云平台, 数据可视化

1. 系统概述

本系统以STM32作为主控芯片，负责采集传感器数据，并通过ESP8266模块将数据发送至云平台。云平台采用轻量级的Flask框架搭建，接收并存储数据，同时提供Web界面实时显示传感器数值变化曲线。

1.1 系统架构

以下是系统架构图：

1.2 功能模块

传感器节点: 采集环境数据，例如温度、湿度、光照强度等。
STM32微控制器: 控制传感器数据采集，并将数据通过串口发送至ESP8266模块。
ESP8266 Wi-Fi模块: 连接Wi-Fi网络，并将数据通过HTTP协议发送至云平台。
Flask Web服务器: 接收传感器数据并存储到数据库，同时提供Web API接口供前端访问。
数据库: 存储传感器数据，例如使用SQLite或MySQL。
Web前端: 使用HTML、CSS和JavaScript实现数据可视化展示，例如使用ECharts或Chart.js绘制图表。

2. 硬件设计

2.1 元器件清单

序号	元器件名称	型号	数量	备注
1	STM32开发板	STM32F103C8T6	1
2	ESP8266模块	ESP8266-01	1
3	DHT11传感器	-	1	或其他传感器
4	杜邦线	-	若干

2.2 电路连接图

请根据实际使用的传感器和模块修改以下连接方式。

3. 软件设计

3.1 STM32代码

使用STM32CubeMX生成初始化代码，并配置串口和传感器读取功能。
定时采集传感器数据，并通过串口发送至ESP8266模块。

// ... STM32初始化代码 ...// DHT11数据结构体
typedef struct {uint8_t humidity;uint8_t temperature;
} DHT11_Data;// 读取DHT11数据
DHT11_Data DHT11_Read(void);// 发送数据到ESP8266
void ESP8266_Send(char *data);int main(void)
{// ... 初始化代码 ...while (1) {DHT11_Data dht11_data = DHT11_Read();char data[50];sprintf(data, "temperature=%d&humidity=%d", dht11_data.temperature, dht11_data.humidity);ESP8266_Send(data);HAL_Delay(5000); // 5秒采集一次数据}
}

3.2 ESP8266配置

使用AT指令配置ESP8266模块为Station模式，并连接Wi-Fi网络。
将STM32发送的数据通过HTTP POST请求发送至Flask服务器。

// ESP8266 AT指令配置
AT+CWMODE=1  // 设置为Station模式
AT+CWJAP="your_ssid","your_password"  // 连接Wi-Fi// 发送HTTP POST请求
AT+CIPSTART="TCP","your_server_ip",5000  // 建立TCP连接
AT+CIPSEND=xxx  // 发送数据长度
> POST /data HTTP/1.1
> Host: your_server_ip
> Content-Type: application/x-www-form-urlencoded
> Content-Length: xxx> temperature=25&humidity=60  // 传感器数据

3.3 Flask服务器代码

使用Flask框架创建Web应用，并定义路由接收传感器数据。
将数据存储到数据库，并提供API接口供前端获取数据。

from flask import Flask, request, jsonify
import sqlite3app = Flask(__name__)# 数据库连接
conn = sqlite3.connect('sensor_data.db')
cursor = conn.cursor()# 创建数据表
cursor.execute('''CREATE TABLE IF NOT EXISTS sensor_data (id INTEGER PRIMARY KEY AUTOINCREMENT,temperature REAL,humidity REAL,timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)
''')@app.route('/data', methods=['POST'])
def receive_data():temperature = request.form.get('temperature')humidity = request.form.get('humidity')# 将数据插入数据库cursor.execute("INSERT INTO sensor_data (temperature, humidity) VALUES (?, ?)", (temperature, humidity))conn.commit()return jsonify({'status': 'success'})# 获取最新传感器数据
@app.route('/api/latest_data')
def get_latest_data():cursor.execute("SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 1")data = cursor.fetchone()return jsonify({'temperature': data[1], 'humidity': data[2]})if __name__ == '__main__':app.run(host='0.0.0.0', debug=True)

3.4 Web前端代码

使用JavaScript和图表库（例如ECharts）获取传感器数据并绘制实时图表。

<!DOCTYPE html>
<html>
<head><title>传感器数据可视化</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body><div id="chart" style="width: 800px; height: 400px;"></div><script>var chartDom = document.getElementById('chart');var chart = echarts.init(chartDom);function updateChartData() {fetch('/api/latest_data').then(response => response.json()).then(data => {// 更新图表数据chart.setOption({xAxis: {type: 'category',data: ['温度', '湿度']},yAxis: {type: 'value'},series: [{data: [data.temperature, data.humidity],type: 'bar'}]});});}// 定时更新数据setInterval(updateChartData, 5000);</script>
</body>
</html>