资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

基于Web的环境数据监测系统的设计与实现

创作时间:

作者:

@小白创作中心

基于Web的环境数据监测系统的设计与实现

引用

CSDN

https://blog.csdn.net/sheziqiong/article/details/137421553

本文详细介绍了基于Web的环境数据监测系统的设计与实现。系统主要包括环境信息采集传送、后台服务器以及前端浏览器展示三大核心模块。通过使用ESP8266、DHT22传感器进行环境信息采集，Node.js、Express框架搭建后台服务器，AngularJS、Bootstrap实现前端展示，实现了环境数据的实时监测与历史数据查询功能。

第一章绪论

1.1 选题背景

随着物联网技术的快速发展，环境监测系统在农业、工业、气象等多个领域得到了广泛应用。传统的环境监测系统往往需要人工定期采集数据，效率低下且成本高昂。基于Web的环境监测系统可以实现远程监测，数据实时传输，大大提高了监测效率和准确性。

1.2 设计内容

本系统主要实现以下功能：

实时监测环境温度和湿度
数据存储与历史数据查询
基于Web的可视化展示
支持多传感器扩展

1.3 设计的目的和意义

本系统的设计旨在提供一个低成本、高效率的环境监测解决方案。通过物联网技术，可以实现对环境数据的实时监控和远程管理，广泛应用于农业、工业、气象等多个领域。

第二章系统总体设计方案

本次毕业设计为实现一个远程环境监测系统，该系统基于物联网，可以扩展任意多个传感器。系统主要包括环境信息采集传送、后台服务器以及前端浏览器展示三大核心。系统框图如图1-1：

环境信息采集部分主要使用ESP8266 WIFI芯片通过DHT 22传感器采集环境环境信息，在指定的采集频率下，利用WIFI通过HTTP协议将采集到的环境信息发往后台服务器。

后台服务器采用Node.js实现，使用的是Node.js下的Express WEB开发框架，为前端和环境信息采集部分提供REST API服务。服务器接收到环境监测部分传送过来的环境信息后，将环境信息储存到基于内存的Redis数据库，作为一个高性能实时的环境信息队列，供浏览器端随时查看实时温度曲线。在指定的周期将环境信息存储到MongoDB数据库中持久化存储温度数据，提供历史数据查看。

前端浏览器展示利用AngularJS作为前端框架，Chart.js图表库可视化温度数据，Bootstrap作为样式库并提供响应式布局。通过HTTP协议获取后台的温度数据绘制温度曲线。支持实时温度曲线和历史温度查看。

2.1 服务端技术方案

2.1.1 Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，用于开发可扩展的网络应用。

2.1.2 Express

Express是一个简洁而灵活的Node.js Web应用框架，提供了一系列强大的特性，帮助开发人员快速构建Web应用。

2.1.3 MongoDB

MongoDB是一个开源的NoSQL数据库，用于存储环境监测的历史数据。

2.1.4 Redis

Redis是一个开源的内存数据结构存储系统，用作数据库、缓存和消息中间件。在本系统中用于存储实时环境数据。

2.1.5 RESTful API

RESTful API用于前后端的数据交互，提供设备信息、环境数据等接口。

2.2 硬件方案

2.2.1 ESP8266

ESP8266是一款低功耗、低成本的WiFi模块，用于环境数据的采集和传输。

2.2.2 DHT22

DHT22是一款数字温湿度传感器，用于采集环境温度和湿度数据。

2.3 前端技术方案

2.3.1 AngularJS

AngularJS是一个开源的JavaScript框架，用于构建动态Web应用。

2.3.2 Bootstrap

Bootstrap是一个流行的前端框架，用于构建响应式布局。

2.3.3 Chart.js

Chart.js是一个简单易用的JavaScript图表库，用于可视化环境数据。

第三章后台服务器设计

3.1 HTTP请求方法

HTTP请求方法主要有GET、POST、PUT、DELETE等，用于实现数据的增删改查。

3.2 Express框架

Express是一个简洁而灵活的Node.js Web应用框架，提供了一系列强大的特性，帮助开发人员快速构建Web应用。

3.2.1 Express示例

var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');
var models=require('./models');
var apiRoute = require('./api_router');
var app = express();
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, '../angular/dist')));
app.all('*', function(req, res, next) {
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Credentials', true);
  res.set('Access-Control-Allow-Methods', 'GET, POST, DELETE, PUT');
  res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
  if ('OPTIONS' == req.method) return res.send(200);
  next();
});
app.use('/api', apiRoute);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.json({
    message: err.message,
    error: {}
  });
});
module.exports = app;