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

perseverance52

已于 2024-03-06 10:50:04 修改

阅读量2.1k

点赞数 5

分类专栏： Arduino ESP32 入门实例教程文章标签：闪存文件系统 WebService esp32

于 2021-09-24 10:02:31 首次发布

本文为Perseverance52博主原创文章，未经博主允许，不得转载！

本文链接：https://blog.csdn.net/weixin_42880082/article/details/120448425

版权

Arduino ESP32 入门实例教程专栏收录该内容

127 篇文章 480 订阅

订阅专栏

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 purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

  // Initialize SPIFFS
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/style.css", "text/css");
  });

  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });

  // Start server
  server.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字节。

串口打印信息

perseverance52

关注

5
点赞
踩
35

收藏

觉得还不错? 一键收藏
4
评论
ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制

ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制在本教程中，我们将向您展示如何构建一个web服务器，以提供存储在ESP32文件系统中的HTML和CSS文件。我们将创建分离的HTML和CSS文件，而不必将HTML和CSS文本写入Arduino草图。网页控制界面(手机端或电脑端通过浏览器访问指定的IP)功能描述通过构建的web服务器来控制一个连接到ESP32 GPIO 2的LED。这是ESP32板载LED。也可以控制任何其他GPIO;web服务器页面显示两个按钮
复制链接

扫一扫

专栏目录