Arduino ESP32 通过SD加载客户端请求页面制作一个酷炫的页面demo

Arduino ESP32 通过SD加载客户端请求页面制作一个酷炫的页面demo

---

将制作好的页面放置到SD卡的个目录，连同一起拷贝的还有CSS和JS文件夹。

• SD卡槽
  
  

注意：SD卡槽匹配的是上面的这种卡，我安装的2GB的卡。

接线说明

ESP32----- SD
D5(GPIO 5)-----CS
D18(GPIO 18)-----SCK
D19(GPIO 19)-----MISO
D23()GPIO 23-----MOSI

实例代码

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "FS.h"
#include "SD.h"
#include "SPI.h"

// wifi信息
const char* ssid = "MERCURY_D268G";
const char* password = "pba5ayzk";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

void initSDCard(){
  if(!SD.begin()){
    Serial.println("Card Mount Failed");
    return;
  }
  uint8_t cardType = SD.cardType();

  if(cardType == CARD_NONE){
    Serial.println("No SD card attached");
    return;
  }

  Serial.print("SD Card Type: ");
  if(cardType == CARD_MMC){
    Serial.println("MMC");
  } else if(cardType == CARD_SD){
    Serial.println("SDSC");
  } else if(cardType == CARD_SDHC){
    Serial.println("SDHC");
  } else {
    Serial.println("UNKNOWN");
  }
  uint64_t cardSize = SD.cardSize() / (1024 * 1024);
  Serial.printf("SD Card Size: %lluMB\n", cardSize);
}

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

void setup() {
  Serial.begin(115200);
  initWiFi();
  initSDCard();

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SD, "/index.html", "text/html");
  });

 // server.serveStatic("/", SD, "/");
// 用户访问/时，默认返回将变成SD中index.html文件
server.serveStatic("/", SD,  "/").setDefaultFile( "index.html");
// 设定缓存事件500秒，客户端获取过的文件将在客户端缓存500秒
// 500秒内需要已缓存的文件将直接使用缓存，不再从服务器获取
server.serveStatic("/", SD, "/").setCacheControl("max-age=500");

  server.begin();
}

void loop() {
  
}

html文件和CSS和JS文件资源

解压后，将3个目标拷贝到SD卡根目录，不是拷贝data文件夹进去，注意SD卡的类型，FAT32格式。

链接：https://pan.baidu.com/s/1mHWw7-VUAr_FwGY9VQafww 
提取码：b6mo