专业接各种小工具软件及爬虫软件开发,联系Q:2391047879

基于Flask的温湿度Web仪表盘

发布时间: 2025-07-23 12:54:01 浏览量: 本文共包含868个文字,预计阅读时间3分钟

在物联网设备普及的今天,实时监测环境数据的需求日益增长。Flask作为一款轻量级Python Web框架,凭借其灵活性和易用性,成为快速搭建数据可视化平台的热门选择。本文将探讨如何利用Flask构建一个实时展示温湿度数据的Web仪表盘,并提供可复用的技术方案。

硬件与数据采集

系统采用DHT11传感器作为数据源,通过树莓派GPIO接口进行周期性数据采集。Python脚本以60秒为间隔将温湿度数据写入SQLite数据库,同时生成时间戳记录。为降低数据异常干扰,代码中加入了滤波算法,当连续三次采集值波动超过阈值时触发数据校准机制。

```python

import sqlite3

from datetime import datetime

def save_to_db(temp, humidity):

conn = sqlite3.connect('sensor_data.db')

c = conn.cursor

c.execute('INSERT INTO readings (timestamp, temp, humidity) VALUES (?, ?, ?)',

(datetime.now.isoformat, temp, humidity))

mit

conn.close

```

后端服务搭建

Flask框架通过蓝图(Blueprint)组织路由模块,配合Jinja2模板引擎实现动态渲染。采用RESTful API设计原则,建立两个核心端点:/api/latest提供最新数据,/api/history支持时间范围查询。数据库查询优化方面,使用连接池技术减少I/O开销,并通过索引提升时间戳字段的检索效率。

```python

from flask import Blueprint, jsonify

from db_util import get_latest_reading

api = Blueprint('api', __name__)

@api.route('/latest')

def latest_data:

data = get_latest_reading

return jsonify({

'temp': data,

'humidity': data,

'timestamp': data

})

```

前端可视化实现

前端采用ECharts图表库构建交互式仪表盘,通过AJAX轮询实现数据自动刷新。页面布局采用响应式设计,适配不同尺寸的终端设备。温度曲线使用渐变色填充,湿度数据以环形进度条展示,关键阈值设置颜色预警功能。为提高用户体验,加载过程中添加骨架屏过渡动画。

```javascript

function updateChart {

fetch('/api/latest')

then(response => response.json)

then(data => {

tempChart.appendData([data.temp]);

humidityGauge.update(data.humidity);

});

setTimeout(updateChart, 10000);

```

部署与优化

系统采用Gunicorn作为WSGI服务器,配合Nginx实现反向代理和负载均衡。通过Supervisor管理进程守护,确保服务异常中断后自动重启。针对高频数据访问场景,使用Redis缓存最近24小时数据,降低数据库查询压力。安全方面,配置HTTPS加密传输,并添加基础认证中间件。

基于Flask的温湿度Web仪表盘

温湿度历史趋势分析可结合Pandas进行周期性规律挖掘

多设备接入时建议采用MQTT协议实现数据聚合

图表渲染性能优化可尝试WebGL加速方案