NodeMCU数据记录器用于在web服务器上上传数据

你通常会在ThingSpeak和其他物联网平台上看到带有实时图表和表格的数据记录web服务器。但是我们也可以创建我们自己的web服务器，可以实时更新数据，我们以前使用不同的板创建了许多web服务器。在这里，我们还将使用DHT11传感器创建ESP8266 Web服务器数据记录器。在这里，温度和湿度数据将使用AJAX在网页上更新。

AJAX(异步JavaScript和XML)允许通过在后台与服务器共享少量数据来自动更新网站，而无需刷新整个网页。这确保了网页的某些部分将被更改，而无需重新加载整个网站。让我们开始吧!

组件的要求

•NodeMCU ESP8266

•DHT11传感器

•跳线

DHT11传感器用于测量温度和湿度，通常用于创建气象站。

线路图

ESP8266数据记录仪电路图如下：

将DHT11连接到NodeMCU很容易。DHT11的VCC和GND引脚连接到NodeMCU的3.3V和GND， DHT的Data引脚连接到NodeMCU的D5 (GPIO 14)引脚。

NodeMCU ESP8266数据记录编程

完整的代码NodeMCU温度记录器可以在页面的末尾找到。这里我们逐行解释完整的代码：

在直接进行编码之前，请安装所需的库，ESP8266库已预先安装在IDE上;您只需要安装可以从这里下载的DHT11库。

在安装库之后，包括所有必需的库。

现在在下一行中，输入您的Wi-Fi名称和密码。

然后定义DHT传感器的类型和传感器连接的引脚。如果您使用的是DHT22，那么将DHT类型更改为DHT22。在我的情况下，DHT传感器连接到NodeMCU的GPIO14 (D5)。

当我们使用NodeMCU IP地址在浏览器中打开网页时，执行handleRoot函数。

下一个函数是readData()，用于从DHT11传感器读取数据并将其发送到网页。在这个循环中，NodeMCU将DHT11值存储为两个float变量：温度和湿度，在此之后，它将float变量转换为字符串，并将其数据存储为另一个字符串变量data，并在请求时将其发送给网页。

在void setup()函数中，我们初始化波特率，使用.begin()函数初始化DHT传感器，使用server.begin()函数初始化网页，然后使用Wi-Fi名称和密码将模块与Wi-Fi连接。

第一个函数用于在客户端请求URI(统一资源标识符)时调用‘handleRoot’函数“/”而第二个函数用于在POST请求URI “/readData”时调用‘readData’函数

void loop()函数持续侦听来自客户端的HTTP请求

网页的HTML代码

标签用于告诉web浏览器我们正在使用哪个版本的html来编写html代码。这个标签写在顶部。这段代码中的所有内容都是在它之后编写的。

在标签之间编写的代码将被浏览器读取。标签用于定义网页的标题、标题行和样式。中写入的数据是浏览器中选项卡的名称。标签用于给表格和标题行设置样式。

标签用于包含jQuery。jQuery是JavaScript库。标记中的getData()函数用于从NodeMCU获取数据并更新数据表。

XMLHttpRequest对象用于从web服务器请求数据。所有浏览器都有一个内置的XMLHttpRequest对象，用于从服务器请求数据。使用XMLHttpRequest，我们可以在不重新加载页面的情况下更新网页，从服务器请求数据，从服务器接收数据，并可以向服务器发送数据。这里我们使用这个对象从NodeMCU获取温度和湿度数据，并在不刷新网页的情况下更新数据表。

XMLHttpRequest对象的open()和send()方法用于向服务器发送请求。http.open()的语法如下所示：

测试NodeMCU数据记录器

最后，将DHT11传感器与NodeMCU连接并上传代码。在NodeMCU上传程序后，打开波特率为115200的串口监视器，获取NodeMCU的IP地址。在浏览器中打开它，你的网页看起来像这样：

本文编译自iotdesignpro