ESP32+Python+Vue构建智能家居环境监测系统实战

家有矿机、阳台种菜、远程看猫的人越来越多，“环境监测”这个词已经从工厂车间走进了普通住宅。作为一名物联网开发者，最近在实际项目中需要快速搭一个分布式的室内环境采集节点，评估了多种方案后，我最终选择基于ESP32自己做一套轻量级的智能家居环境检测节点。这套方案既绕不开单片机开发，又涉及Python 后端的数据处理和Vue 前端的可视化展示，正好覆盖了目前物联网方向毕业设计、个人项目里最常见的几块核心内容。

本文将围绕这套“ESP32 + Python + Vue”的智能家居环境检测小系统，从硬件选型、开发环境搭建、固件编写，到后端接口开发、前端页面展示，完整走一遍闭环流程。如果你正在做计算机毕业设计，或者想入门物联网开发，这篇文章可以当作一份可直接对照复现的工程笔记。

1. 项目背景与整体方案

先想清楚一个问题：一套所谓的“智能家居环境检测系统”，它到底在“智能”什么？

传统的水银温度计也好，独立的温湿度计也罢，它们都只能解决“单点、本地、即时”的读数需求。而当我们想实现“打开手机就能看到客厅、卧室、阳台各个位置的温湿度曲线”“环境温度过高时自动触发风扇或者报警”这一类需求时，就必须让设备具备三个能力：

1. 感知能力：通过传感器采集环境物理量。
2. 联网能力：把采集到的数据传出去。
3. 展示与控制能力：在服务端完成数据存储、分析，在前端完成可视化展示和远程控制。

ESP32 之所以非常适合做这类节点的核心，是因为它几乎把“感知 + 联网”两个要求浓缩到了极致。

1.1 ESP32 是什么

ESP32 是乐鑫（Espressif）推出的一系列低功耗、高集成度的 Wi-Fi/蓝牙 SoC 芯片。它最大的特点是单芯片同时支持 Wi-Fi 和蓝牙，而且价格低、生态成熟，在物联网领域已经成为事实上的入门标准。

从硬件资源来看，ESP32 通常包含：

• 双核或单核 Xtensa LX6 处理器，主频 160MHz/240MHz；
• 支持 2.4GHz Wi-Fi（802.11 b/g/n）和 Bluetooth v4.2 BR/EDR/BLE；
• 丰富的外设接口：ADC、DAC、SPI、I2C、UART、I2S、PWM、触摸传感器等；
• 常见的模组（如 ESP32-WROOM-32）集成了 4MB Flash，部分型号还支持 PSRAM。

在实际项目中，我们可以直接用一块 ESP32 开发板，外接一个温湿度传感器（如 DHT11、DHT22、SHT30）甚至气体传感器，就可以在几分钟内构建出一个环境数据采集节点。

1.2 系统整体架构

本项目的整体结构可以用下面这张表来理解：

这个架构并不复杂，但它是一个非常典型的物联网“感知-传输-处理-展示”四层模型。理解这个模型，比单纯跑通某一个 Demo 更重要。

整套系统的工作流程如下：

1. ESP32 开发板上电，连接 Wi-Fi。
2. 主循环每隔一段时间读取 DHT11 传感器的温湿度数据。
3. 将数据通过 HTTP POST 方式发送给 Python 后端接口。
4. Flask 后端解析 JSON 数据，存入数据库，并预留查询接口。
5. 前端 Vue 项目通过 HTTP GET 请求获取最新数据，用 ECharts 图表展示曲线。

说句实在话，在设备端实时查看数据当然可行，但如果想做出“历史记录”“远程查看”这些功能，一个独立的后端服务几乎是必需品。这也是为什么这个项目非常适合作为计算机毕业设计或者“物联网+前后端”综合练手项目的原因。

2. 环境准备与硬件选型

在动手写代码之前，先把工具链梳理清楚。很多初学者容易在环境搭建上卡住，一卡就是半天，所以这部分我尽量写详细。

2.1 硬件清单

本项目的硬件门槛很低，典型清单如下：

传感器这里多说一句：DHT11 和 DHT22 都是单总线数字温湿度传感器，但 DHT11 精度较低（温度 ±2℃，湿度 ±5%RH），DHT22 精度更高（温度 ±0.5℃，湿度 ±2%RH），价格也贵一些。本篇示例以 DHT11 为主，因为它在学习阶段最容易买到，代码上也完全兼容。

2.2 开发软件与版本说明

版本需要根据你的项目实际情况调整，本文示例以常见环境为例，重点演示配置思路。

2.3 Arduino IDE 搭建 ESP32 开发环境

Arduino IDE 默认不包含 ESP32 支持，需要手动添加开发板管理器地址。前面说过“arduino ide搭建esp32或esp8266开发环境”是很多新手会搜索的内容，这里给出标准操作。

在主界面选择文件 -> 首选项 -> 附加开发板管理器网址，填入：

https://dl.espressif.com/dl/package_esp32_index.json

这一步的目的是让 Arduino IDE 知道从哪里拉取 ESP32 的开发板定义和工具链。

然后选择工具 -> 开发板 -> 开发板管理器，搜索esp32，找到esp32 by Espressif Systems，点击安装。

这里有一个非常实际的痛点：由于国内网络环境，从 GitHub 或乐鑫服务器下载 ESP32 工具链可能非常慢，甚至反复失败，也就是大家经常遇到的arduino下载esp32库失败问题。如果等待安装时间太长，可以考虑：

• 使用国内镜像源替换下载地址；
• 下载社区整理的离线安装包，解压到 Arduino 的hardware/espressif目录；
• 使用代理方式访问国外资源（这里需要说明：请使用合规的网络接入方式，并且不要涉及违规工具）。

安装完成后，在工具 -> 开发板中选择ESP32 Dev Module，选择正确的 COM 口，就可以开始写代码了。

在开发板选择上补充一点：ESP32 系列有很多型号，比如经典的 ESP32-WROOM-32、带 RGB 的 ESP32-S3、带摄像头接口的 ESP32-EYE 等。本文代码基于经典 ESP32 编写，如果你使用其他型号，大部分代码可以直接复用，但引脚定义可能需要按开发板原理图调整。

3. ESP32 端数据采集与发送

芯片是硬件系统的“大脑”，而代码是这个大脑的“思维”。下面我们直接进入 ESP32 端的核心代码实现。

3.1 引脚接线

DHT11 传感器通常是三脚或四脚封装。以常见的三脚模块为例：

注意：有些 DHT11 裸传感器需要外接 4.7kΩ 上拉电阻，但大多数市售模块已经集成上拉电阻，插上杜邦线就能用。

3.2 代码结构

在 Arduino IDE 中新建一个项目，主要代码文件是.ino。为了让代码清晰，我通常会在同一个项目中拆成几个 Tab，例如：

esp32_env_node/ |- esp32_env_node.ino // 主程序 |- secrets.h // Wi-Fi 和服务器配置（可选）

但为了便于读者复制，本文给出一个单文件的完整示例。

3.3 完整固件代码

// 文件路径：esp32_env_node/esp32_env_node.ino // 功能：读取 DHT11 温湿度数据，通过 HTTP POST 上报到 Python 后端 #include <WiFi.h> #include <HTTPClient.h> #include <DHT.h> // ========== Wi-Fi 配置 ========== const char* ssid = "your_wifi_ssid"; const char* password = "your_wifi_password"; // ========== 后端接口地址 ========== const char* serverUrl = "http://192.168.1.100:5000/api/upload"; // ========== 传感器配置 ========== #define DHTPIN 4 // 数据引脚 GPIO4 #define DHTTYPE DHT11 // DHT11 传感器 DHT dht(DHTPIN, DHTTYPE); // 上传时间间隔（毫秒） const unsigned long interval = 10000; unsigned long previousMillis = 0; void setup() { Serial.begin(115200); delay(1000); // 初始化 DHT11 dht.begin(); // 连接 Wi-Fi WiFi.begin(ssid, password); Serial.print("Connecting to WiFi"); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(); Serial.print("Connected, IP address: "); Serial.println(WiFi.localIP()); } void loop() { unsigned long currentMillis = millis(); // 定时上传 if (currentMillis - previousMillis >= interval) { previousMillis = currentMillis; uploadSensorData(); } } void uploadSensorData() { // 读取温湿度 float humidity = dht.readHumidity(); float temperature = dht.readTemperature(); // 检查读取是否成功 if (isnan(humidity) || isnan(temperature)) { Serial.println("Failed to read from DHT sensor!"); return; } // 构造 JSON 字符串 String jsonPayload = "{\"temperature\":" + String(temperature, 2) + ",\"humidity\":" + String(humidity, 2) + ",\"device_id\":\"esp32_room_001\"}"; Serial.println(jsonPayload); // 创建 HTTPClient 并发送 POST 请求 HTTPClient http; http.begin(serverUrl); http.addHeader("Content-Type", "application/json"); int httpCode = http.POST(jsonPayload); if (httpCode > 0) { String response = http.getString(); Serial.print("HTTP Response code: "); Serial.println(httpCode); Serial.print("Response body: "); Serial.println(response); } else { Serial.print("HTTP POST failed. Error code: "); Serial.println(http.errorToString(httpCode).c_str()); } http.end(); }

3.4 代码关键点分析

这段代码看起来不长，但有几个关键点需要理解。

第一，为什么使用millis()而不是delay()做定时？

delay()会阻塞整个程序。如果发送一次 HTTP 请求耗时 2 秒，那么这 2 秒内程序无法处理其他逻辑。millis()的非阻塞方式让代码在等待上传的间隙仍可执行其他任务，这在多传感器、多任务场景下是更好的习惯。

第二，为什么要检查 DHT 读取结果？

DHT11 在读取过程中可能因为信号干扰、接线松动等原因读到NAN（Not a Number）。如果不检查，后续String(temperature, 2)会把非法值拼进 JSON，导致后端数据脏乱。经验之谈：所有传感器数据在进入网络传输之前都必须做合法性校验。

第三，为什么使用HTTPClient？

ESP32 的HTTPClient库封装了常用的 HTTP 请求方法。示例中使用POST将 JSON 数据发给后端，这是物联网设备上报数据最通用的方式之一。更进阶的方案是使用 MQTT 协议，但 HTTP 在简单性、调试便利性上对新手更友好。

3.5 运行与验证

将代码中的 Wi-Fi 账号密码和后端地址改成你自己的，然后点击 Arduino IDE 的“上传”按钮。

打开串口监视器，波特率选择 115200，可以看到类似下面的输出：

Connecting to WiFi...... Connected, IP address: 192.168.1.44 {"temperature":27.50,"humidity":58.00,"device_id":"esp32_room_001"} HTTP Response code: 200 Response body: {"code":0,"message":"success"}

只要看到HTTP Response code: 200，说明 ESP32 端已经打通，后面就可以集中精力写后端服务了。

需要提醒的是，serverUrl中的 IP 地址必须是后端服务所在机器在同一局域网内可访问的 IP。如果后端和 ESP32 不在同一个网络环境，还需要考虑内网穿透或公网服务器部署，这部分不在本示例范围内。

4. Python 后端接口开发

前端叫 Vue，硬件端叫 ESP32，那“中间人”角色自然落到后端。Python 生态中，Flask 以轻量、灵活而著称，非常适合快速搭建一个数据接收服务。

4.1 为什么选 Flask 而不是 Django

Django 功能全面，自带 Admin 后台、ORM、认证体系，适合大型 Web 应用。但在这个物联网场景中，我们需要的只是一个能接收 POST、提供 GET 的小服务。Flask 的“微框架”理念让代码更聚焦，而且写起来非常灵活。

当然，这只是一种选择。如果项目后续要扩展到用户管理、设备权限控制等复杂业务，换 Django 或 FastAPI 也是很自然的事情。

4.2 安装依赖

先在项目目录下创建虚拟环境，然后安装依赖：

mkdir env-server cd env-server python -m venv venv # Windows venv\Scripts\activate # macOS/Linux source venv/bin/activate pip install flask flask-cors requests

依赖说明：

• flask：Web 框架；
• flask-cors：解决前端跨域访问问题；
• requests：虽然在服务器端不一定直接用，但调试和后续扩展会用到。

4.3 数据库设计

为了减少部署复杂度，本示例使用 SQLite 作为存储。数据库只有一张表，用来保存环境数据。

SQLite 不需要安装独立数据库服务，文件即数据库，非常契合演示项目。如果后续数据量增长，可以直接把存储层替换成 MySQL 或时序数据库（如 InfluxDB）。

4.4 Flask 完整代码

# 文件路径：env-server/app.py import sqlite3 import time from flask import Flask, request, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) # 允许跨域请求，方便 Vue 前端调试 DB_PATH = "env_data.db" def init_db(): """初始化数据库表""" conn = sqlite3.connect(DB_PATH) cursor = conn.cursor() cursor.execute(""" CREATE TABLE IF NOT EXISTS env_data ( id INTEGER PRIMARY KEY AUTOINCREMENT, device_id TEXT NOT NULL, temperature REAL NOT NULL, humidity REAL NOT NULL, create_time TEXT NOT NULL ) """) conn.commit() conn.close() @app.route("/") def index(): return "ESP32 Environment Server is running." @app.route("/api/upload", methods=["POST"]) def upload(): """接收 ESP32 上报的传感器数据""" try: data = request.get_json() if not data: return jsonify({"code": 1, "message": "请求体为空或不是 JSON"}), 400 temperature = data.get("temperature") humidity = data.get("humidity") device_id = data.get("device_id", "unknown") if temperature is None or humidity is None: return jsonify({"code": 1, "message": "temperature 和 humidity 不能为空"}), 400 # 基本数据范围校验 try: temperature = float(temperature) humidity = float(humidity) except (TypeError, ValueError): return jsonify({"code": 1, "message": "temperature 或 humidity 格式不正确"}), 400 if temperature < -40 or temperature > 80 or humidity < 0 or humidity > 100: return jsonify({"code": 1, "message": "数据超出合理范围"}), 400 create_time = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime()) conn = sqlite3.connect(DB_PATH) cursor = conn.cursor() cursor.execute( "INSERT INTO env_data (device_id, temperature, humidity, create_time) VALUES (?, ?, ?, ?)", (device_id, temperature, humidity, create_time) ) conn.commit() conn.close() return jsonify({"code": 0, "message": "success"}), 200 except Exception as e: return jsonify({"code": 1, "message": f"服务器内部错误: {str(e)}"}), 500 @app.route("/api/latest", methods=["GET"]) def latest(): """查询最新一条环境数据""" conn = sqlite3.connect(DB_PATH) cursor = conn.cursor() cursor.execute(""" SELECT device_id, temperature, humidity, create_time FROM env_data ORDER BY id DESC LIMIT 1 """) row = cursor.fetchone() conn.close() if row is None: return jsonify({"code": 1, "message": "暂无数据"}), 404 return jsonify({ "code": 0, "data": { "device_id": row[0], "temperature": row[1], "humidity": row[2], "create_time": row[3] } }) @app.route("/api/history", methods=["GET"]) def history(): """查询最近 N 条历史数据""" limit = request.args.get("limit", default=50, type=int) # 限制最大查询数量，防止一次性拉取过多数据 if limit > 1000: limit = 1000 conn = sqlite3.connect(DB_PATH) cursor = conn.cursor() cursor.execute(""" SELECT device_id, temperature, humidity, create_time FROM env_data ORDER BY id DESC LIMIT ? """, (limit,)) rows = cursor.fetchall() conn.close() data_list = [ { "device_id": row[0], "temperature": row[1], "humidity": row[2], "create_time": row[3] } for row in rows ] return jsonify({"code": 0, "data": data_list}) if __name__ == "__main__": init_db() # 监听所有网络接口，使局域网内 ESP32 可以访问 app.run(host="0.0.0.0", port=5000, debug=True)

4.5 接口设计解析

整个后端只暴露了 3 个接口：

• POST /api/upload：设备数据上报入口，也是 ESP32 调用的目标；
• GET /api/latest：获取最新一条数据；
• GET /api/history：获取历史数据，供前端画曲线。

在upload接口中，我做了三层校验：第一层判断 JSON 是否为空；第二层判断关键字段是否存在；第三层判断数据值的范围。这些校验虽然看起来“啰嗦”，但实际项目中非常必要。比如传感器偶尔上报一个-999的温度值，如果后端不做校验，前面端展示时就会出现一个非常离谱的尖峰。

启动服务：

python app.py

看到类似输出说明服务已启动：

* Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:5000

此时可以先在浏览器里访问http://127.0.0.1:5000/，看到ESP32 Environment Server is running.就说明后端就绪。

5. Vue 前端可视化展示

硬件采集、后端接收都已经完成，还差最后一块拼图：给用户一个可视化界面。这里采用 Vue 3 + Element Plus + ECharts 来展示数据。

5.1 初始化 Vue 项目

如果本地还没有 Vue 项目，最简单的方式是使用 Vite 创建：

npm create vite@latest env-web -- --template vue cd env-web npm install

然后安装需要的依赖：

npm install axios echarts element-plus

依赖说明：

• axios：发起 HTTP 请求；
• echarts：绘制数据图表；
• element-plus：UI 组件库，提供卡片、表格等组件。

5.2 前端页面结构

这里做一个简洁的单页展示：页面顶部显示当前温湿度卡片，中间区域用 ECharts 展示历史数据曲线。

为了控制篇幅，下面给出最核心的组件代码。

5.3 Vue 组件代码

<!-- 文件路径：env-web/src/App.vue --> <template> <div class="container"> <h2>智能家居环境检测节点</h2> <div class="card-row"> <el-card class="data-card"> <div class="card-title">当前温度</div> <div class="card-value">{{ currentData.temperature ?? '--' }} °C</div> </el-card> <el-card class="data-card"> <div class="card-title">当前湿度</div> <div class="card-value">{{ currentData.humidity ?? '--' }} %RH</div> </el-card> <el-card class="data-card"> <div class="card-title">设备ID</div> <div class="card-value small">{{ currentData.device_id ?? '暂无' }}</div> </el-card> </div> <el-card class="chart-card"> <div ref="chartRef" class="chart"></div> </el-card> </div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue'; import axios from 'axios'; import * as echarts from 'echarts'; const currentData = ref({}); const chartRef = ref(null); let chartInstance = null; let timer = null; const API_BASE = 'http://127.0.0.1:5000'; // 获取最新一条数据 async function fetchLatest() { try { const resp = await axios.get(`${API_BASE}/api/latest`); if (resp.data.code === 0) { currentData.value = resp.data.data; } } catch (e) { console.error('获取最新数据失败：', e); } } // 获取历史数据并更新图表 async function fetchHistory() { try { const resp = await axios.get(`${API_BASE}/api/history?limit=50`); if (resp.data.code === 0 && chartInstance) { const list = resp.data.data; // 后端返回的是倒序，需要反转成时间正序 const reversed = list.reverse(); const labels = reversed.map(item => item.create_time); const tempData = reversed.map(item => item.temperature); const humiData = reversed.map(item => item.humidity); chartInstance.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['温度', '湿度'] }, xAxis: { type: 'category', data: labels }, yAxis: [ { type: 'value', name: '温度(°C)', min: (value) => Math.floor(value.min - 2), max: (value) => Math.ceil(value.max + 2) }, { type: 'value', name: '湿度(%RH)', min: 0, max: 100 } ], series: [ { name: '温度', type: 'line', smooth: true, data: tempData }, { name: '湿度', type: 'line', smooth: true, yAxisIndex: 1, data: humiData } ] }); } } catch (e) { console.error('获取历史数据失败：', e); } } onMounted(() => { chartInstance = echarts.init(chartRef.value); // 先请求一次，然后定时轮询 fetchLatest(); fetchHistory(); timer = setInterval(() => { fetchLatest(); fetchHistory(); }, 5000); }); onUnmounted(() => { if (timer) { clearInterval(timer); } if (chartInstance) { chartInstance.dispose(); } }); </script> <style scoped> .container { max-width: 1000px; margin: 40px auto; padding: 0 20px; } .card-row { display: flex; gap: 20px; margin-bottom: 20px; } .data-card { flex: 1; text-align: center; } .card-title { color: #666; font-size: 14px; margin-bottom: 8px; } .card-value { font-size: 32px; font-weight: bold; color: #333; } .card-value.small { font-size: 18px; word-break: break-all; } .chart-card { padding: 10px; } .chart { height: 400px; } </style>

5.4 前端要点解析

轮询而不是 WebSocket？

在这个项目中，前端每 5 秒向后端请求一次最新数据，这属于“轮询”模式。它的优点是实现简单、兼容性好。如果想让实时性更强，可以后续替换为 WebSocket 或 SSE，让后端主动推送数据。

ECharts 双 Y 轴

温度和湿度的量纲不同：温度通常在 20~30 之间，湿度可能在 40~70 之间。如果共用同一个 Y 轴，两条曲线的波动幅度差异会很大，影响观察。因此示例设置了两个 Y 轴，左侧是温度，右侧是湿度。

为什么需要在页面销毁时处理定时器和图表实例？

如果页面被关闭或组件被销毁，但定时器还在运行，会导致内存泄漏。同样，ECharts 实例虽然会被浏览器垃圾回收，但显式dispose()是更稳妥的做法。

运行前端项目：

npm run dev

访问 Vite 输出的本地地址，应该能看到页面。如果后端数据已经有记录，图表会渲染出温湿度曲线；如果没有数据，图表暂时是空的，但卡片区域会显示占位符--。

6. 常见问题与排错实战

工具链越长，可能踩的坑就越多。这里把最常出现的问题整理成一个清单，方便你按图索骥。

这里单独展开一个高频场景：arduino 下载 ESP32 库失败。

如果你在使用 Arduino IDE 安装 ESP32 开发包时出现类似：

Error downloading http://downloads.arduino.cc/...

或者卡在“Downloading packages”长时间没有任何进度，多半是网络原因。常见处理顺序是：

1. 删除 Arduino 目录下的staging/packages临时文件，避免缓存损坏。
2. 重新打开开发板管理器，重试。
3. 如果依然不行，换一个网络环境，或者使用能顺畅访问国外站点的合规网络工具。
4. 从社区下载离线安装包（esp32_package_2.x.x.zip），解压到Arduino/hardware/espressif目录，然后重启 Arduino IDE。

需要说明的是，不同版本的 Arduino IDE 对离线包目录结构的要求略有不同，建议在操作前先阅读对应版本的官方说明。

7. 最佳实践与工程建议

到这里，Demo 已经能跑通了。但作为一个认真做项目的人，我们还可以把工程水平再提一个档次。以下几条建议来自实际项目中的经验，做毕设、做产品都适用。

7.1 设备端：做好断电重连与状态上报

ESP32 上电后连接 Wi-Fi 是一套固定流程，但如果家里路由器重启，ESP32 可能长时间无法重连。建议增加 Wi-Fi 掉线检测和自动重连机制：

void loop() { if (WiFi.status() != WL_CONNECTED) { Serial.println("WiFi disconnected, reconnecting..."); WiFi.reconnect(); delay(3000); return; } // 原有定时上传逻辑 }

另外，上报的数据里最好包含device_id。当项目中存在多个检测节点时，device_id不仅是数据的身份标签，也是后续做设备分组、权限控制的基础。

7.2 后端：数据校验要紧，但不能太死

前文已经写了数据范围校验。这里补充一点：校验范围要根据传感器量程设计，而不是瞎写。DHT11 的温度量程一般是 0~50℃，DHT22 是 -40~80℃。如果后端把温度上限做成 100，那么传感器损坏时上报的 99℃ 就会往数据库里灌垃圾数据。

7.3 后端：使用环境变量管理配置

不要在代码里硬编码数据库路径、端口、密钥等信息。一个简单的做法是使用环境变量：

import os DB_PATH = os.getenv("ENV_DB_PATH", "env_data.db") PORT = os.getenv("ENV_PORT", 5000)

这样在开发、测试、生产环境之间切换时，不需要修改代码。

7.4 前端：接口地址不要写死

前端示例里直接把接口地址写成了http://127.0.0.1:5000。这在本地开发很方便，但部署到服务器后就需要改代码。更好的方案是在项目根目录创建.env.development和.env.production文件：

# .env.development VITE_API_BASE=http://127.0.0.1:5000

# .env.production VITE_API_BASE=https://api.example.com

然后在代码中通过import.meta.env.VITE_API_BASE读取。

7.5 数据库：生命周期规划

SQLite 适合小数据量场景。如果设备每天 24 小时不间断，每 10 秒上报一次，一天就是 8640 条数据，一年就是 300 多万条。1 年后 SQLite 依然能工作，但查询性能明显下降，特别是有大量历史记录时。

如果项目要长期运行，建议提前做两步：

• 增加数据保留策略：定期清理 90 天前的数据；
• 按需迁移到 MySQL 或 InfluxDB。

7.6 安全：不要把后端暴露在公网裸奔

如果用内网穿透或公网服务器部署后端，一定要考虑基本安全：

• 增加简单的 Token 认证，ESP32 请求时携带Authorization: Bearer <token>；
• Flask 服务不要以debug=True运行在生产环境；
• 启用 HTTPS，避免明文传输传感器数据；
• 对接口做限流，防止被外部频繁调用打爆服务。

8. 总结与下一步

整个项目走下来，你会发现自己其实已经完成了一个典型的物联网应用闭环：ESP32 负责感知和上报，Python 后端负责接收和存储，Vue 前端负责可视化和展示。这套模型不仅仅是毕业设计，也是很多商业物联网产品的基础架构。

下一步你可以继续探索这几个方向：

• 接入更多传感器：比如光照（BH1750）、空气质量（PMS5003）、烟雾（MQ-2）；
• 把 HTTP 改成 MQTT，尝试用 EMQX/Mosquitto 做消息中间件；
• 增加报警功能：温度超过阈值时后端自动发送钉钉/邮件通知；
• 增加控制功能：通过后端指令控制 ESP32 上的继电器开关；
• 把前端从“只读”升级为“可配置”，比如在页面设置温度报警阈值。

如果本文对你有帮助，可以先收藏备用。等技术细节吃透后，建议自己动手把代码逐行敲一遍，再扩展一个小功能。只有真正踩过坑、改过代码，这套系统才会变成你自己的东西。