如何在这段代码中准备好一个HTML页面?



我想把一个已经制作好的网站放在这个脚本中,这样我就不用再写整个网站了

ESP32设备模型

#include <WiFi.h>
#include <DNSServer.h>
#include <WebServer.h>
const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
WebServer webServer(80);
String responseHTML = ****""
"<!DOCTYPE html><html lang='en'><head>"
"<meta name='viewport' content='width=device-width'>"
"<title>CaptivePortal</title></head><body>"
"<h1>Hello World!</h1><p>This is a captive portal example."
" All requests will be redirected here.</p></body></html>";***
void setup() {
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("Vodafone");
// if DNSServer is started with "*" for domain name, it will reply with
// provided IP to all DNS request
dnsServer.start(DNS_PORT, "*", apIP);
// replay to all requests with same HTML
webServer.onNotFound([]() {
webServer.send(200, "text/html", responseHTML);
});
webServer.begin();
}
void loop() {
dnsServer.processNextRequest();
webServer.handleClient();
}

当运行代码时,它将创建带有html的站点。

但我想放一个更完整的html而不必写整个网站的行

也就是说,就好像我们将文件导入到脚本中一样?

ESP允许您将部分闪存分区为数据存储的文件系统,它可以用来保存html, css, Javascript文件等内容,并在需要时检索它。

  1. 下载Arduino ESP32文件系统上传程序并按照README上的说明进行操作。在Arduino IDE上安装uploader插件。

  2. 在Arduino项目下创建一个data目录,并将所有html文件,css文件和JavaScript文件放入该目录。

  3. 在Arduino IDE上,选择Tools>分区方案,以调整您的草图和FATFS之间的内存分配(即。(data目录所需的大小)。

  4. 选择工具>ESP32 Sketch Data Upload菜单项。这应该开始将文件上传到ESP32闪存文件系统。这不会上传你的草图,你仍然需要像往常一样上传你的草图。

  5. 关于如何从ESP32文件系统提供页面,我建议您切换到使用ESPAsyncWebServer,因为它允许您从ESP32文件系统提供静态内容。例如,您可以像这样在路由/上提供主页index.html:

server.serveStatic("/", SPIFFS, "/")    // first '/' - html route, second '/' - root directory of 'data' directory in LITTLEFS
.setDefaultFile("index.html")       // set html home page
.setCacheControl("max-age=86400");  // set cache expire

我有一个关于如何在我的github上使用ESPAsynWebServer从ESP32文件系统中提供内容的示例,您可以查看更多细节实现。我的例子是基于SPIFFS的,它已经贬值并被LittleFS所取代,但API总体上是兼容的。

相关内容

最新更新