本文介绍一下如何使用ESP32快速方便的搭建一个简易的web服务器。
使用ESP32或ESP8266搭建web服务器的方式有很多，但是大多数都的web页面代码都是内嵌在程序中的，这样如果要修改web页面就十分的不方便。今天介绍一种方法将web页面的代码以文件的形式上传到存储器中，然后在程序中直接利用文件搭建web服务器。
这里首先介绍一下SPIFFS。
SPIFFS又叫SPI闪存文件系统。是一种小型嵌入式系统专用的文件系统。它支持用户创建文件和目录。
以下是SPIFFS的主要特点：
专为微控制器上的低 RAM 使用场景而设计；
使用固定大小的 RAM 缓冲区；
Posix-like api：打开，关闭，读取，写入，搜索，统计等；
POSIX：Portable Operating System Interface 可移植操作系统接口；
不仅仅是SPI闪存 (SPI Flash:Serial Peripheral interface 串行外围设备接口, 串行通信接口的NOR FLASH),它可以在任何 非易失闪存（NOR Flash）上运行，多个 SPIFFS 配置可以在同一目标上运行甚至可以在同一个 SPI 闪存设备上运行；
实现静态磨损均衡；
内置的系统一致性检查；
高度可配置，可适用于各种闪存类型。
使用Arduino进行ESP32开发时，开发套件中集成有SPIFFS可以直接使用。但是开发工具中不具有文件上传功能，所以首先需要给ArduinoIDE添加SPIFFS文件上传插件。
首先下载文件上传工具，可以在下面的链接处下载，也可以在文末分享的链接处下载。
GitHub - me-no-dev/arduino-esp32fs-plugin: Arduino plugin for uploading files to ESP32 file system
将所下载的文件“esp32fs.jar”放置到Arduino安装目录下的工具文件夹中。如F:\arduino-1.8.19\tools\ESP32FS\tool。然后重启Arduino IDE。
重启Arduino IDE后在工具菜单下就可以看到“ESP32 Sketch Data Upload”选项，通过该选项就可以将工程目录下data文件夹中的文件上传到ESP32的文件存储系统中。上传过程中一定要关闭ESP32的串口监视器窗口，否则会导致上传失败。
文件上传工具安装完成后，接下来需要安装异步web服务器库。主要包括ESPAsyncWebServer和AsyncTCP两个库。通过这两个库可以实现简单的异步web服务器的搭建。
异步web服务器有以下优点：
使用异步意味着服务器可以同时处理来自客户端的多个连接；
一旦请求准备好并被解析，您就会被调用；
当您发送响应时，您可以立即准备好处理其他连接，而服务器会在后台处理发送响应
速度很快；
易于使用的 API、HTTP Basic 和 Digest MD5 身份验证（默认）、ChunkedResponse；
易于扩展以处理任何类型的内容；
支持继续 100；
异步 WebSocket 插件提供不同的位置，无需额外的服务器或端口；
Async EventSource (Server-Sent Events) 插件向浏览器发送事件；
用于条件和永久 URL 重写的 URL 重写插件；
支持缓存、Last-Modified、默认索引等的 ServeStatic 插件；
处理模板的简单模板处理引擎；
两个库的下载地址如下：
ESPAsyncWebServer https://github.com/me-no-dev/ESPAsyncWebServer
AsyncTCP https://github.com/me-no-dev/AsyncTCP
两个库安装完成后就可以开始创建web页面了。web前端页面的开发工具有很多，自行选择一种喜欢的方式就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>懂事电子设计</title>
</head>
<body>
<h1>懂事电子设计</h1>
<p>这是一个测试网页</p>
<img border="0" src="1.jpg" alt="Pulpit rock" width="500" height="500">
</body>
</html>使用Arduino IDE创建ESP32工程。在工程下创建data文件夹，并将创建的HTML程序文件放到data文件夹内。然后依次点击”工具”->”ESP32 Sketch Data Upload”将WEB程序文件上传到ESP32存储器中。
修改程序中的WIFI信息，点击上传到ESP32即可。文章来源：https://www.toymoban.com/news/detail-485065.html
上传完成后可以打开串口监视窗口，等ESP32完成网络连接后会输出对应的IP地址。使用同一网络下的PC或手机的浏览器访问该IP即可进入到web页面。文章来源地址https://www.toymoban.com/news/detail-485065.html
#include <WiFi.h>
#include <SPIFFS.h>
#include "ESPAsyncWebServer.h"
AsyncWebServer server(80);
//连接WIFI
void connect_wifi(){
const char* wifi_ssid = "***";
const char* wifi_password = "********";
Serial.begin(115200);
WiFi.begin(wifi_ssid, wifi_password); //连接WIFI
Serial.print("Connected");
//循环，直到连接成功
while(WiFi.status() != WL_CONNECTED){
Serial.print(".");
delay(500);
}
Serial.println();
IPAddress local_IP = WiFi.localIP();
Serial.print("WIFI is connected,The local IP address is "); //连接成功提示
Serial.println(local_IP);
}
void web_server(){
if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");
server.begin(); //初始化
}
void setup() {
connect_wifi();
web_server();
}
void loop() {
}到了这里，关于基于ESP32的简易web服务器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
