如何用DHT22和ESP32构建高精度温湿度监测系统？从硬件连接到数据可视化全攻略

PHP 2026-05-07 03:33 78 0 0 0

在物联网（IoT）项目中，温湿度监测是最常见的需求之一。DHT22传感器以其高精度和稳定性著称，而ESP32作为一款集成Wi-Fi和蓝牙的低功耗微控制器，非常适合作为数据采集和传输的核心。本文将围绕“如何用DHT22和ESP32构建高精度温湿度监测系统”这一具体问题，详细讲解从硬件连接到数据可视化的完整流程，并展示如何结合React和Layui构建前端界面。

1. 硬件准备与连接

首先，我们需要准备以下硬件：

ESP32开发板（如ESP32-WROOM-32）
DHT22温湿度传感器（AM2302，数字输出）
面包板与杜邦线
10kΩ上拉电阻（可选，DHT22通常内置上拉）

连接方式非常简单：

DHT22的VCC引脚连接到ESP32的3.3V输出
DHT22的GND引脚连接到ESP32的GND
DHT22的DATA引脚连接到ESP32的GPIO4（或其他数字引脚）

注意：DHT22的数据线需要上拉电阻，但大多数模块已内置，无需额外添加。如果使用裸传感器，建议在DATA和VCC之间连接一个10kΩ电阻。

2. ESP32编程：读取DHT22数据并上传

我们将使用Arduino IDE编写ESP32代码。首先，安装ESP32开发板支持（通过Arduino IDE的板管理工具），并安装DHT传感器库（如Adafruit DHT传感器库）。

以下是一个示例代码片段，用于读取温湿度并通过Wi-Fi上传到本地服务器（或云平台）：

#include <WiFi.h>
#include <DHT.h>

#define DHTPIN 4
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);

const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";
const char* serverUrl = "http://你的服务器地址/api/upload";

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  dht.begin();
}

void loop() {
  float h = dht.readHumidity();
  float t = dht.readTemperature();
  if (isnan(h) || isnan(t)) {
    Serial.println("读取失败");
    return;
  }
  // 通过HTTP POST发送数据
  WiFiClient client;
  HTTPClient http;
  http.begin(client, serverUrl);
  http.addHeader("Content-Type", "application/json");
  String payload = "{\"temperature\":" + String(t) + ",\"humidity\":" + String(h) + "}";
  int httpCode = http.POST(payload);
  http.end();
  delay(5000); // 每5秒采集一次
}

这段代码每5秒采集一次数据，并通过HTTP POST以JSON格式发送到指定服务器。你可以根据需求调整采集频率或数据格式。

3. 后端服务搭建：接收与存储数据

为了接收ESP32发送的数据，我们需要一个后端API。这里以PHP为例（因为分类是PHP），创建一个简单的接口：

<?php
header('Content-Type: application/json');
$data = json_decode(file_get_contents('php://input'), true);
$temperature = $data['temperature'];
$humidity = $data['humidity'];
$timestamp = date('Y-m-d H:i:s');
// 将数据存入数据库或文件
$db = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
$stmt = $db->prepare("INSERT INTO sensor_data (temperature, humidity, timestamp) VALUES (?, ?, ?)");
$stmt->execute([$temperature, $humidity, $timestamp]);
echo json_encode(['status' => 'success']);
?>

当然，你也可以使用Node.js、Python Flask等。数据库建议使用MySQL或SQLite，方便后续查询。

4. 前端可视化：React + Layui构建仪表盘

为了让用户直观地查看温湿度变化，我们需要一个前端界面。这里推荐使用React（现代前端框架）和Layui（轻量级UI库）的组合，实现数据图表展示。

4.1 使用React创建项目

首先，通过Create React App初始化项目：

npx create-react-app sensor-dashboard
cd sensor-dashboard
npm install layui react-chartjs-2 chart.js axios

然后，创建一个组件用于显示实时数据。例如，使用Chart.js绘制折线图：

import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import axios from 'axios';

function Dashboard() {
  const [data, setData] = useState({ labels: [], temperature: [], humidity: [] });
  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get('/api/data');
      const labels = res.data.map(item => item.timestamp);
      const temperature = res.data.map(item => item.temperature);
      const humidity = res.data.map(item => item.humidity);
      setData({ labels, temperature, humidity });
    };
    fetchData();
    const interval = setInterval(fetchData, 10000); // 每10秒刷新
    return () => clearInterval(interval);
  }, []);

  const chartData = {
    labels: data.labels,
    datasets: [
      { label: '温度 (°C)', data: data.temperature, borderColor: 'red' },
      { label: '湿度 (%)', data: data.humidity, borderColor: 'blue' }
    ]
  };

  return (
    温湿度监测仪表盘

  );
}
export default Dashboard;

4.2 集成Layui美化界面

Layui提供了简洁的CSS组件，如卡片、按钮、表格等。在React中，我们可以引入Layui的CSS文件，然后使用其类名。例如，将图表放在一个卡片中：

import 'layui/dist/css/layui.css';

function Dashboard() {
  // ... 前面的代码
  return (
    实时数据

  );
}

通过这种方式，你可以快速搭建一个美观且功能完整的监测面板。Layui的表单、表格等组件也可以用于显示历史数据或设备状态。

5. 测试与优化

完成所有步骤后，将ESP32上电，观察数据是否正常上传。常见问题包括：Wi-Fi连接失败、DHT22读取超时、服务器地址错误等。建议在ESP32代码中添加错误重试机制，并在前端显示连接状态。

此外，为了提升系统可靠性，可以考虑以下优化：

使用MQTT协议替代HTTP，减少网络开销
添加数据缓存，防止网络中断导致数据丢失
实现报警功能，当温湿度超过阈值时发送通知

6. 总结

通过本文，你已经学会了如何使用DHT22和ESP32构建一个完整的温湿度监测系统，包括硬件连接、编程、后端存储以及基于React和Layui的前端可视化。这套方案不仅成本低廉，而且易于扩展，适用于智能家居、农业大棚、仓库监控等多种场景。如果你在实践过程中遇到问题，欢迎在评论区留言交流。