闪存剩下内容

1:通过Arduino IDE向闪存文件系统上传文件

1. 下载 Arduino-ESP8266闪存文件插件程序闪存剩下内容_第1张图片

闪存剩下内容_第2张图片 闪存剩下内容_第3张图片闪存剩下内容_第4张图片闪存剩下内容_第5张图片闪存剩下内容_第6张图片闪存剩下内容_第7张图片闪存剩下内容_第8张图片闪存剩下内容_第9张图片闪存剩下内容_第10张图片闪存剩下内容_第11张图片

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

1:在网页中加载闪存文件系统中的图片、CSS和JavaScript

  • index.html:ESP8266开发板建立的网站首页
  • main.css:控制网页的css(层叠样式表)
  • JavaScript.js和clock.js:在页面中显示日期和时钟的JavaScript文件。这两个程序主要用于演示如何在ESP8266开发板所建立的物联网页面中显示JavaScript
  • img目录中的图片taichi-maker.jpg:此图片用于演示如何在ESP8266开发板所建立的物联网页面中显示图片
  • /**********************************************************************
    项目名称/Project          : 零基础入门学用物联网
    程序名称/Program name     : 3_4_1_SPIFFS_File_server
    团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
    作者/Author              : CYNO朔
    日期/Date(YYYYMMDD)     : 20191109
    程序目的/Purpose          : 
    当用户访问NodeMCU地址时,NodeMCU将会检查访问地址是否指向SPIFFS系统中的文件,并且
    将该文件显示于用户的浏览器中。如果访问地址所指向的文件无法在SPIFFS中找到,NodeMCU将会
    向用户发送404信息。
    -----------------------------------------------------------------------
    修订历史/Revision History  
    日期/Date    作者/Author      参考号/Ref    修订说明/Revision Description
    20200211     CYNO朔            0.01       修改了handleNotFound函数使其更直观
    -----------------------------------------------------------------------
    本示例程序为太极创客团队制作的《零基础入门学用物联网》中示例程序。
    该教程为对物联网开发感兴趣的朋友所设计和制作。如需了解更多该教程的信息,请参考以下网页:
    http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/
    ***********************************************************************/
    
    #include 
    #include 
    #include 
    #include   
    
    ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象
    
    ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象,该对象用于响应HTTP请求。监听端口(80)
    
    void setup() {
      Serial.begin(9600);          // 启动串口通讯
      Serial.println("");
      
      wifiMulti.addAP("ssid_from_AP_1", "your_password_for_AP_1"); // 将需要连接的一系列WiFi ID和密码输入这里
      wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
      wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的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.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";
    }
    

    闪存剩下内容_第12张图片

  • 2:通过网页控制ESP8266开发板的引脚

  • /**********************************************************************
    项目名称/Project          : 零基础入门学用物联网
    程序名称/Program name     : 3_4_2_SPIFFS_Pin_Control_Server
    团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
    作者/Author              : CYNO朔
    日期/Date(YYYYMMDD)     : 20191109
    程序目的/Purpose          : 
    使用ESP8266-NodeMCU建立一个有多个页面的网站。在LED页面中配有可控制LED点亮和熄灭的
    按钮。点击首页的LED Page链接进入LED页。点击LED页按钮将控制NodeMCU的内置LED点亮和熄灭。
    
    -----------------------------------------------------------------------
    修订历史/Revision History  
    日期/Date    作者/Author      参考号/Ref    修订说明/Revision Description
    20200211     CYNO朔            0.01       修改了handleNotFound函数使其更直观
    20200217     CYNO朔            0.02       一致性调整
    -----------------------------------------------------------------------
    本示例程序为太极创客团队制作的《零基础入门学用物联网》中示例程序。
    该教程为对物联网开发感兴趣的朋友所设计和制作。如需了解更多该教程的信息,请参考以下网页:
    http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/
    ***********************************************************************/
    
    #include       // 本程序使用ESP8266WiFi库
    #include  // 本程序使用ESP8266WiFiMulti库
    #include  // 本程序使用ESP8266WebServer库
    #include                // 本程序使用SPIFFS库
    
    ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象,对象名称是'wifiMulti'
     
    ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象,该对象用于响应HTTP请求。监听端口(80)
                                        
    void setup(){
      Serial.begin(9600);        
      Serial.println("");
      
      pinMode(LED_BUILTIN, OUTPUT);      // 初始化NodeMCU控制板载LED引脚为OUTPUT
     
      //通过addAp函数存储  WiFi名称       WiFi密码
      wifiMulti.addAP("ssid_from_AP_1", "your_password_for_AP_1"); // 将需要连接的一系列WiFi ID和密码输入这里
      wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
      wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的WiFi ID。如果有
      Serial.println("Connecting ...");                            // 则尝试使用此处存储的密码进行连接。
     
      int i = 0;                                 
      while (wifiMulti.run() != WL_CONNECTED) {  // 在当前环境中搜索addAP函数所存储的WiFi
        delay(1000);                             // 如果搜到多个存储的WiFi那么NodeMCU
        Serial.print(i++); Serial.print('.');                       // 将会连接信号最强的那一个WiFi信号。
      }                                          
                                             
      // WiFi连接成功后将通过串口监视器输出连接成功信息 
      Serial.println('\n');                     // WiFi连接成功后
      Serial.print("Connected to ");            // NodeMCU将通过串口监视器输出。
      Serial.println(WiFi.SSID());              // 连接的WiFI名称
      Serial.print("IP address:\t");            // 以及
      Serial.println(WiFi.localIP());           // NodeMCU的IP地址
    
      if(SPIFFS.begin()){                       // 启动闪存文件系统
        Serial.println("SPIFFS Started.");
      } else {
        Serial.println("SPIFFS Failed to Start.");
      }
      
      esp8266_server.on("/LED-Control", handleLEDControl); // 告知系统如何处理/LED-Control请求     
      esp8266_server.onNotFound(handleUserRequest);        // 告知系统如何处理其它用户请求     
      
      esp8266_server.begin();                   // 启动网站服务                                  
      Serial.println("HTTP server started");    
    }
    
    void loop(){
      esp8266_server.handleClient();  //处理用户请求
    }                                
    
    // 处理/LED-Control请求  
    void handleLEDControl(){
       bool ledStatus = digitalRead(LED_BUILTIN);     // 此变量用于储存LED状态     
       ledStatus == HIGH ? digitalWrite(LED_BUILTIN, LOW) : digitalWrite(LED_BUILTIN, HIGH);  // 点亮或者熄灭LED  
         
       esp8266_server.sendHeader("Location", "/LED.html");       
       esp8266_server.send(303);  
    }
                                                                         
    // 处理用户浏览器的HTTP访问
    void handleUserRequest() {         
         
      // 获取用户请求资源(Request Resource)
      String reqResource = esp8266_server.uri();
      Serial.print("reqResource: ");
      Serial.println(reqResource);
      
      // 通过handleFileRead函数处处理用户请求资源
      bool fileReadOK = handleFileRead(reqResource);
    
      // 如果在SPIFFS无法找到用户访问的资源,则回复404 (Not Found)
      if (!fileReadOK){                                                 
        esp8266_server.send(404, "text/plain", "404 Not Found"); 
      }
    }
    
    bool handleFileRead(String resource) {            //处理浏览器HTTP访问
    
      if (resource.endsWith("/")) {                   // 如果访问地址以"/"为结尾
        resource = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
      } 
      
      String contentType = getContentType(resource);  // 获取文件类型
      
      if (SPIFFS.exists(resource)) {                     // 如果访问的文件可以在SPIFFS中找到
        File file = SPIFFS.open(resource, "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";
    }
    

    闪存剩下内容_第13张图片

  • 3;通过网页文本框控制ESP8266开发板的PWM引脚

  • /**********************************************************************
    项目名称/Project          : 零基础入门学用物联网
    程序名称/Program name     : 3_4_3_SPIFFS_Multi_Text_Server
    团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
    作者/Author              : CYNO朔
    日期/Date(YYYYMMDD)     : 20200220
    程序目的/Purpose          : 
    演示如何通过ESP8266开发板建立的多个网页文本框获取用户输入的信息。
    -----------------------------------------------------------------------
    修订历史/Revision History  
    日期/Date    作者/Author      参考号/Ref    修订说明/Revision Description
    -----------------------------------------------------------------------
    本示例程序为太极创客团队制作的《零基础入门学用物联网》中示例程序。
    该教程为对物联网开发感兴趣的朋友所设计和制作。如需了解更多该教程的信息,请参考以下网页:
    http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/
    ***********************************************************************/
    #include 
    #include 
    #include 
    #include   
     
    ESP8266WiFiMulti wifiMulti;         // 建立ESP8266WiFiMulti对象
     
    ESP8266WebServer esp8266_server(80);// 建立ESP8266WebServer对象,该对象用于响应HTTP请求。监听端口(80)
    
    void setup(void){
      Serial.begin(9600);        
      Serial.println("");
      
      wifiMulti.addAP("ssid_from_AP_1", "your_password_for_AP_1"); // 将需要连接的一系列WiFi ID和密码输入这里
      wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
      wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的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-Control", handleLEDControl);   
      esp8266_server.onNotFound(handleUserRequest); // 处理其它网络请求
    
      // 启动网站服务
      esp8266_server.begin();
      Serial.println("HTTP server started");
    }
     
    void loop(void){
      esp8266_server.handleClient();  //处理网络请求
    }                                
                                                                             
    void handleLEDControl(){
      // 从浏览器发送的信息中获取控制数值(字符串格式)
      String value1 = esp8266_server.arg("value1"); 
      String value2 = esp8266_server.arg("value2");
    
      // 将用户输入的信息通过串口监视器显示出来
      Serial.print("value1 = ");Serial.println(value1);
      Serial.print("value2 = ");Serial.println(value2);
      
      // 建立基本网页信息显示当前数值以及返回链接
      String httpBody = "value1: " + value1 + "
    value2: " + value2 + "

    <-LED Page

    "; esp8266_server.send(200, "text/html", httpBody); } // 处理用户浏览器的HTTP访问 void handleUserRequest() { // 获取用户请求资源(Request Resource) String reqResource = esp8266_server.uri(); Serial.print("reqResource: "); Serial.println(reqResource); // 通过handleFileRead函数处处理用户请求资源 bool fileReadOK = handleFileRead(reqResource); // 如果在SPIFFS无法找到用户访问的资源,则回复404 (Not Found) if (!fileReadOK){ esp8266_server.send(404, "text/plain", "404 Not Found"); } } bool handleFileRead(String resource) { //处理浏览器HTTP访问 if (resource.endsWith("/")) { // 如果访问地址以"/"为结尾 resource = "/index.html"; // 则将访问地址修改为/index.html便于SPIFFS访问 } String contentType = getContentType(resource); // 获取文件类型 if (SPIFFS.exists(resource)) { // 如果访问的文件可以在SPIFFS中找到 File file = SPIFFS.open(resource, "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"; }

    闪存剩下内容_第14张图片

  • 其他详见太极创客官网

你可能感兴趣的:(IOT网页开发,服务器,javascript)