基于ESP32搭建物联网服务器六(利用SPIFFS存放html,css,js等文件(读取html)

在前文中:ESP32的web服务器(内嵌HTML)_你的幻境的博客-CSDN博客已经实现建立了一个WEB服务器了，但是页面的HTML代码是镶嵌在C语言代码中的，大部份情况下，不管是调试或者使用都是很不方便的。但是ESP32的SPIFFS提供了很好的解决方法，SPIFFS相当于ESP32中的一个硬盘分区，每种版本的ESP32中SPIFFS分区的大小可能会有各区别，如果需要存储的文件过大，需要先了解清楚自已的ESP32版本，或者找店家了解一下该分区的大小。本文中只做一个简单的了解和使用，文件不会过大，各种版本的ESP32应该都可以用来测试。

首先，我们需要一个html文件(index.html)，文件需要保存在项目文件夹内的"data"文件夹内，原因后面会说明，文件内容还是使用前文中的代码并加入了对mystyle.css的引用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>EPS32教程</title>
  </head>
  <body>
    <h1>ESP32 HTML 标题</h1>
    <p>ESP32 HTML 段落</p>
  </body>
</html>

然后新建一个CSS文件(mystyle.css):

p{
	background-color:red;
}

然后，我们需要把文件烧录到ESP32的SPIFFS分区中，需要烧录文件，先要在arduion IDE中安装一个插件(ESP32FS)，该插件的项目地址在:
https://github.com/me-no-dev/arduino-esp32fs-plugin
点击Clone=>Download ZIP下载这个插件。解压缩该插件到arduino IDE安装文件夹下的tools文件夹，在win系统下，文件位置:<Program_Files_dir>/Arduino/tools/ESP32FS/tool/esp32fs.jar
重启arduino IDE在菜单=>工具下会出现新的选项菜单:ESP32 Sketch Data Upload

点击后，该插件会把前面提到的"data"文件夹内的所有文件上传到SPIFFS分区。
上传之前，一定要注意先把"串口监视器"关闭，关闭对上传端口的占用。
上传完成会输出提示信息:

至此，文件就上传至SPIFFS分区

要使用ESP32的SPIFFS,要先引入SPIFFS.h,在arduion IDE中，如果已经搭建好ESP32环境，默认是自带这个库的。

同时需要做的是引入WiFi.h和ESPAsyncWebServer.h这两个库

#include <WiFi.h>
#include <SPIFFS.h>
#include "ESPAsyncWebServer.h"

ESPAsyncWebServer库中，send()结构体提供了直接读取SPIFFS中文件的方法。
首先需要对SPIFFS进行初始化,为了方便理解，还是和之前一样把一些功能做成函数:

void call_back(AsyncWebServerRequest *request){
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  request->send(SPIFFS,"/index.html");
}

用该函数把前文的回调函数替换，首先该函数会用SPIFFS.begin(true)尝试初始化SPIFFS,如果初始化失败，在串口监视器输出错误信息并返回。如果初始化成功就会运行send()结构体，把index.html文件以"text/html"的方式发送给浏览器。
完整代码:

#include <WiFi.h>
#include <SPIFFS.h>
#include "ESPAsyncWebServer.h"


AsyncWebServer server(80);

//连接WIFI
void connect_wifi(){
  const char* wifi_ssid = "ESP32";
  const char* wifi_password = "12345678";
  Serial.begin(9600);
  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 call_back(AsyncWebServerRequest *request){
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  request->send(SPIFFS,"/index.html");        //发送html文件内容
}

void web_server(){
  server.on("/",HTTP_GET,call_back);    //注册回调函数
  server.begin();                       //初始化
}

void setup() {
  connect_wifi();
  web_server();
}

void loop() {

}

可以看到，虽然在html文件中加入了对CSS文件的引用，但并未实现应该有的效果，因为利用send()结构体的方法可以实现发送html代码，但该方法并不支持引入如CSS,JavaScript文件，ESPAsyncWebServer提供了另一个方法.serveStatic()和.setDefaultFile()来实现。

把该方法替换之前代码中的.on()方法,并删除回调函数call_back():

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();                       //初始化
}

完整代码:

#include <WiFi.h>
#include <SPIFFS.h>
#include "ESPAsyncWebServer.h"


AsyncWebServer server(80);

//连接WIFI
void connect_wifi(){
  const char* wifi_ssid = "ESP32";
  const char* wifi_password = "12345678";
  Serial.begin(9600);
  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() {

}

在之后的文章中，将介绍另一种更高效的(LittleFS)文件系统的详细使用方法

基于ESP32搭建物联网服务器六(利用SPIFFS存放html,css,js等文件(读取html)

猜你喜欢