ESP8266学习 六 通过闪存文件系统上传web端程序

• 使用闪存文件系统建立功能更加丰富的网络服务器

  • 掌握了如何向ESP8266开发板的闪存文件上传文件，我们就有了更多的空间来存储更加丰富的网页资源，从而让我们实现功能更加丰富的物联网项目。
• 本节教程里，我们将向您介绍一系列ESP8266开发板搭建的网页服务示例
• 在网页中加载闪存文件系统中的图片、CSS和JavaScript
  • 请点击以上链接将本实例所用的示例程序下载并解压缩。在本示例中，您将看到data文件夹一共有5个文件和一个文件夹。以下是各个文件的作用：
  • index.html：ESP8266开发板建立的网站首页
  • main.css：控制网页的css(层叠样式表)
  • JavaScript.js和clock.js：在页面中显示日期和时钟的JavaScript文件。这两个程序主要用于演示如何在ESP8266开发板所建立的物联网页面中显示JavaScript
  • img目录中的图片taichi-maker.jpg:此图片用于演示如何在ESP8266开发板所建立的物联网页面中显示图片

• 
  
  #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(9600);          // 启动串口通讯
    Serial.println("");
    
   wifiMulti.addAP("TP-LINK_7AAD", "LKQ123456+");  // 这三条语句通过调用函数addAP来记录3个不同的WiFi网络信息。
   wifiMulti.addAP("CMCC-3289", "15208883289"); // 这3个WiFi网络名称分别是taichi-maker, taichi-maker2, taichi-maker3。
   wifiMulti.addAP("CMCC-3289-5G", "15208883289"); // 这3个网络的密码分别是123456789，87654321，13572468。
   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.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访问
    } 
    
    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";
  }

  代码： 文件详情
  • 

• 先上传文件夹

  

• 然后烧录代码

  

• 
• 当我们找不到函数是就会调用 onNotFound 函数 当我们不用on函数请求时就会直接用onNotFound 进行请求 当有浏览器向服务器发送请求时就会调用通过handleFileRead函数处处理用户访问 如果找到了请求的数据内容就返回真值 否则就返回假；当我们请求首页信息时就将"/"替换为"/index.html"把浏览器所请求的信息与闪存文件系统内的文件名对应起来

  

• 对请求分析 如图首先对首页进行请求 之后为.css 后为时钟的.js 和太极创客的logo图片

  

• 通过一个字符串变量去得到文件类型，

  

• 重点：读取文件之后 将这个文件返回给浏览器

  

• 通过对请求的文件结尾的判断 返回相应字符串 告诉服务器现在需要的文件类型是什么。，

  

• 通过这次实验 我们可以结合自己所学web知识展示更加丰富的界面，只需修改web文件的内容便可以完成。