ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制

在本教程中，我们将向您展示如何构建一个web服务器，以提供存储在ESP32文件系统中的HTML和CSS文件。我们将创建分离的HTML和CSS文件，而不必将HTML和CSS文本写入Arduino草图。

网页控制界面(手机端或电脑端通过浏览器访问指定的IP)

功能描述

通过构建的web服务器来控制一个连接到ESP32 GPIO 2的LED。这是ESP32板载LED。也可以控制任何其他GPIO;
web服务器页面显示两个按钮:ON和OFF -打开和关闭GPIO 2;
web服务器页面还显示当前GPIO状态。

原理实现架构图

项目文件架构图

所需库下载

https://github.com/me-no-dev/ESPAsyncWebServer

实例代码

/*ESP32使用SPIFFS(闪存文件系统)创建 Web服务器* * * * */
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h"// wifi设置
const char *ssid = "MERCURY_D268G";
const char *password = "pba5ayzk";// Set LED GPIO
const int ledPin = 2;//板载led灯
// Stores LED state
String ledState;// Create AsyncWebServer object on port 80
AsyncWebServer server(80);// Replaces placeholder with LED state value
String processor(const String& var){Serial.println(var);if(var == "STATE"){if(digitalRead(ledPin)){ledState = "ON";}else{ledState = "OFF";}Serial.print(ledState);return ledState;}return String();
}void setup(){// Serial port for debugging purposesSerial.begin(115200);pinMode(ledPin, OUTPUT);// Initialize SPIFFSif(!SPIFFS.begin(true)){Serial.println("An Error has occurred while mounting SPIFFS");return;}// Connect to Wi-FiWiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) {delay(1000);Serial.println("Connecting to WiFi..");}// Print ESP32 Local IP AddressSerial.println(WiFi.localIP());// Route for root / web pageserver.on("/", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/index.html", String(), false, processor);});// Route to load style.css fileserver.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/style.css", "text/css");});// Route to set GPIO to HIGHserver.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){digitalWrite(ledPin, HIGH);    request->send(SPIFFS, "/index.html", String(), false, processor);});// Route to set GPIO to LOWserver.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){digitalWrite(ledPin, LOW);    request->send(SPIFFS, "/index.html", String(), false, processor);});// Start serverserver.begin();
}void loop(){}

index.html文件

<!DOCTYPE html>
<html>
<head><title>ESP32 Web Server</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><h1>ESP32 Web Server</h1><p>GPIO 状态: <strong> %STATE%</strong></p><p><a href="/on"><button class="button">开</button></a></p><p><a href="/off"><button class="button button2">关</button></a></p>
</body>
</html>

style.css文件

html {font-family: Helvetica;display: inline-block;margin: 0px auto;text-align: center;
}
h1{color: #0F3376;padding: 2vh;
}
p{font-size: 1.5rem;
}
.button {display: inline-block;background-color: #008CBA;border: none;border-radius: 4px;color: white;padding: 16px 40px;text-decoration: none;font-size: 30px;margin: 2px;cursor: pointer;
}
.button2 {background-color: #f44336;
}

编译信息

使用 1.0  版本的库 WiFi 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.6\libraries\WiFi
使用 1.2.3  版本的库 ESPAsyncWebServer-master 在文件夹： C:\Users\Administrator\Documents\Arduino\libraries\ESPAsyncWebServer-master
使用 1.0  版本的库 FS 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.6\libraries\FS
使用 1.1.1  版本的库 AsyncTCP 在文件夹： C:\Users\Administrator\Documents\Arduino\libraries\AsyncTCP
使用 1.0  版本的库 SPIFFS 在文件夹： C:\Users\Administrator\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.6\libraries\SPIFFS
"C:\\Users\\Administrator\\AppData\\Local\\Arduino15\\packages\\esp32\\tools\\xtensa-esp32-elf-gcc\\1.22.0-97-gc752ad5-5.2.0/bin/xtensa-esp32-elf-size" -A "d:\\arduino\\MyHexDir/spiffs32.ino.elf"
项目使用了 771570 字节，占用了 (58%) 程序存储空间。最大为 1310720 字节。
全局变量使用了38608字节，(11%)的动态内存，余留289072字节局部变量。最大为327680字节。

串口打印信息

ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制相关推荐

ESP8266学习六通过闪存文件系统上传web端程序
使用闪存文件系统建立功能更加丰富的网络服务器掌握了如何向ESP8266开发板的闪存文件上传文件,我们就有了更多的空间来存储更加丰富的网页资源,从而让我们实现功能更加丰富的物联网项目. 本节教程里,我 ...
ESP8266 NodeMCU 闪存文件系统（SPIFFS）
目录闪存文件系统 ESP8266闪存文件系统基本操作 1. 通过程序向闪存文件系统写入信息 2. 通过程序从闪存文件系统读取信息 3. 通过程序向闪存文件系统文件添加信息 4. 通过程序读取目录内容 ...
Esp32-Arduino 学习（闪存文件系统）
目录闪存文件写入闪存文件读取闪存文件删除从Arduino IDE 上传文件注:本文代码来自于太极创客团队: www.taichi-maker.com,由于太极创客的教程是基于esp8266, ...
闪存文件系统（Flash File System）
最近调研了一下闪存文件系统,部分结果展示如下,如有错误欢迎评论指正~ 一.背景闪存(flash memory),是一种电子式可清除程序化存储器的形式,允许在操作中被多次擦或写的存储器. 随着现在闪存 ...
ESP8266-NodeMCU网络服务器——通过网页将文件上传到闪存文件系统
ESP8266WebServer esp8266_server(80); / 建立网络服务器对象,该对象用于响应HTTP请求.监听端口(80) File fsUploadFile; / 建立文件对象用 ...
ENSP如何开启服务器的http_如何使用HTTP模块在Node.js中创建Web服务器（上）
当你在浏览器中查看网页时,其实是在向互联网上的另一台计算机发出请求,然后它会将网页提供给你作为响应.你通过互联网与之交谈的那台计算机就是Web服务器,Web服务器从客户端(例如你的浏览器)接收HTTP ...
应用Nodejs创建web服务器
//创建web服务器,设置端口,根据浏览器的URL做出响应 /index 响应'<h2>这是首页</h2>' /list 响应文 ...
两步使用Express快速创建web服务器
一:首先需要给大家介绍一下Express~~~ Express 是一个基于 Node.js 平台,快速.开放.极简的 web 开发框架. 框架:是一个半成品,用来快速解决一类问题:库就是工具集,使用非 ...
第17章使用WebBroker组件创建Web服务器
WebBroker是一套VCL工具,可以帮助您建立Web服务器程序.WebBroker与Delphi企业版一同发布,也可单独购买并与Delphi专业版配合使用.WebBroker可用于建立Web服务器 ...

ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制

ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制

功能描述

原理实现架构图

项目文件架构图

实例代码

ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制相关推荐

最新文章

热门文章