web控制esp8266小灯-CFANZ编程社区

代码

#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>
#include <FS.h>  

ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象

ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）

void setup() {
  Serial.begin(115200);          // 启动串口通讯
  pinMode(LED_BUILTIN,OUTPUT);   // 将LED设置为输出模式这样才可以用数字信号控制
  wifiMulti.addAP("mark2", "xxx"); // 将需要连接的一系列WiFi ID和密码输入这里
  Serial.println("Connecting ...");                            // 则尝试使用此处存储的密码进行连接。
  
  int i = 0;  
  while (wifiMulti.run() != WL_CONNECTED) { // 尝试进行wifi连接。
    delay(1000);
    Serial.print(i++); Serial.print(' ');
  }
  
  // WiFi连接成功后将通过串口监视器输出连接成功信息 
  Serial.println('\n');
  Serial.print("Connected to ");
  Serial.println(WiFi.SSID());              // 通过串口监视器输出连接的WiFi名称
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           // 通过串口监视器输出ESP8266-NodeMCU的IP

  if(SPIFFS.begin()){                       // 启动闪存文件系统
    Serial.println("SPIFFS Started.");
  } else {
    Serial.println("SPIFFS Failed to Start.");
  }
  esp8266_server.on("/led",ledFunc);
  esp8266_server.onNotFound(handleUserRequet);      // 告知系统如何处理用户请求

  esp8266_server.begin();                           // 启动网站服务
  Serial.println("HTTP server started");
}

void loop(void) {
  esp8266_server.handleClient();                    // 处理用户请求
}

// 处理用户浏览器的HTTP访问
void handleUserRequet() {         
     
  // 获取用户请求网址信息
  String webAddress = esp8266_server.uri();
  
  // 通过handleFileRead函数处处理用户访问
  bool fileReadOK = handleFileRead(webAddress);

  // 如果在SPIFFS无法找到用户访问的资源，则回复404 (Not Found)
  if (!fileReadOK){                                                 
    esp8266_server.send(404, "text/plain", "404 Not Found"); 
  }
}

bool handleFileRead(String path) {            //处理浏览器HTTP访问

  if (path.endsWith("/")) {                   // 如果访问地址以"/"为结尾
    path = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
  } 
  Serial.println(path+"是否存在："+SPIFFS.exists(path));//查看请求资源是否存在
  String contentType = getContentType(path);  // 获取文件类型
  
  if (SPIFFS.exists(path)) {                     // 如果访问的文件可以在SPIFFS中找到
    File file = SPIFFS.open(path, "r");          // 则尝试打开该文件
    esp8266_server.streamFile(file, contentType);// 并且将该文件返回给浏览器
    file.close();                                // 并且关闭文件
    return true;                                 // 返回true
  }
  return false;                                  // 如果文件未找到，则返回false
}

// 获取文件类型
String getContentType(String filename){
  if(filename.endsWith(".htm")) return "text/html";
  else if(filename.endsWith(".html")) return "text/html";
  else if(filename.endsWith(".css")) return "text/css";
  else if(filename.endsWith(".js")) return "application/javascript";
  else if(filename.endsWith(".png")) return "image/png";
  else if(filename.endsWith(".gif")) return "image/gif";
  else if(filename.endsWith(".jpg")) return "image/jpeg";
  else if(filename.endsWith(".ico")) return "image/x-icon";
  else if(filename.endsWith(".xml")) return "text/xml";
  else if(filename.endsWith(".pdf")) return "application/x-pdf";
  else if(filename.endsWith(".zip")) return "application/x-zip";
  else if(filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}

void ledFunc(){
   digitalWrite(LED_BUILTIN,!digitalRead(LED_BUILTIN)); // 操作LED灯
   Serial.println("");// 换个行
   String folder="/"; // 我们还想看看根目录下的文件
   Dir dir = SPIFFS.openDir(folder); 
   while (dir.next()) {  // 检查目录中是否还有下一个文件
         Serial.println("根目录下的文件有："+dir.fileName()); // 输出文件名
        }
   esp8266_server.sendHeader("Refresh","2;URL=/");    // 2秒后刷新访问 / 
   esp8266_server.send(303);                           // 303 跳转 
 }

注意点

无论是使用串口调试打印、还是控制led小灯操作闪存文件系统都要进行打开操作。

  Serial.begin(115200);          // 启动串口通讯
  pinMode(LED_BUILTIN,OUTPUT);   // 将LED设置为输出模式这样才可以用数字信号控制
  SPIFFS.begin();

将文件以流的形式响应给浏览器

esp8266_server.streamFile(file, contentType);// 并且将该文件返回给浏览器

设置完响应头后需要设置相应状态码才能跳转

   esp8266_server.sendHeader("Refresh","2;URL=/");    // 2秒后刷新访问 / 
   esp8266_server.send(303);                           // 303 跳转

通过插件上传的文件都在根目录下，data即可以理解为根目录