Arduino IDE for ESP8266教程(五)文件系统

By | 2017年5月24日

在第一篇教程中,由ESP8266返回的网页都是通过直接发送String来完成响应,这个方法是挺快的,但是在复杂结构的网页下就显得格外麻烦,调整的时候需要一个个找,而且还是在html结构打乱的情况下找,把css和js写入到同一个页面内无疑也是增加了调试的成本,所以官方引入了一个SPIFFS的文件系统(SPIFFS的github地址:https://github.com/pellepl/spiffs),这个文件系统是通过共用板载的Flash芯片来完成(官方说明文档:https://github.com/esp8266/Arduino/blob/master/doc/filesystem.md),之前在配置环境的时候相比应该还记得有个选择Flash Size的选项吧,这个就是分配程序和SPIFFS空间的选项。一般市面上的12E型都已经搭载了4M的Flash,所以大家在选择的时候就选择使用4M的,剩下是1M还是3M的SPIFFS就看实际需要,一般推荐使用1M,因为烧写SPIFFS的时候不像烧写程序那样只是根据程序大小烧写部分区块,而是整个区块完整烧写的,3M烧写一次的时间差不多有4-5分钟,烧写1M的则会很快。

这次教程的代码:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>
ESP8266WebServer server ( 80 );
String ssid = "...."; // 需要连接的wifi热点名称
String password = "........"; // 需要连接的wifi热点密码
/**
 * 根据文件后缀获取html协议的返回内容类型
 */
String getContentType(String filename){
  if(server.hasArg("download")) return "application/octet-stream";
  else 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";
}
/* NotFound处理
 * 用于处理没有注册的请求地址
 * 一般是处理一些页面请求
 */
void handleNotFound() {
  String path = server.uri();
  Serial.print("load url:");
  Serial.println(path);
  String contentType = getContentType(path);
  String pathWithGz = path + ".gz";
  if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){
    if(SPIFFS.exists(pathWithGz))
      path += ".gz";
    File file = SPIFFS.open(path, "r");
    size_t sent = server.streamFile(file, contentType);
    file.close();
    return;
  }
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += ( server.method() == HTTP_GET ) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for ( uint8_t i = 0; i < server.args(); i++ ) {
    message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
  }
  server.send ( 404, "text/plain", message );
}
void handleMain() {
  /* 返回信息给浏览器(状态码,Content-type, 内容)
   * 这里是访问当前设备ip直接返回一个String
   */
  Serial.print("handleMain");
  File file = SPIFFS.open("/index.html", "r");
  size_t sent = server.streamFile(file, "text/html");
  file.close();
  return;
}
/* 引脚更改处理
 * 访问地址为htp://192.162.xxx.xxx/pin?a=XXX的时候根据a的值来进行对应的处理
 */
void handlePin() {
  if(server.hasArg("a")) { // 请求中是否包含有a的参数
    String action = server.arg("a"); // 获得a参数的值
    if(action == "on") { // a=on
      digitalWrite(2, LOW); // 点亮8266上的蓝色led,led是低电平驱动,需要拉低才能亮
      server.send ( 200, "text/html", "Pin 2 has turn on"); return; // 返回数据
    } else if(action == "off") { // a=off
      digitalWrite(2, HIGH); // 熄灭板载led
      server.send ( 200, "text/html", "Pin 2 has turn off"); return;
    }
    server.send ( 200, "text/html", "unknown action"); return;
  }
  server.send ( 200, "text/html", "action no found");
}
void setup() { 
  // 日常初始化网络
  pinMode(2, OUTPUT);
  Serial.begin ( 115200 );
  SPIFFS.begin();
  int connectCount = 0;
  WiFi.begin ( ssid.c_str(), password.c_str() );
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 1000 );
    Serial.print ( "." );
    if(connectCount > 30) {
      Serial.println( "Connect fail!" );
      break;
    }
    connectCount += 1;
  }
  if(WiFi.status() == WL_CONNECTED) {
    Serial.println ( "" );
    Serial.print ( "Connected to " );
    Serial.println ( ssid );
    Serial.print ( "IP address: " );
    Serial.println ( WiFi.localIP() );
    connectCount = 0;
  }
  server.on ("/", handleMain); // 绑定‘/’地址到handleMain方法处理
  server.on ("/pin", HTTP_GET, handlePin); // 绑定‘/pin’地址到handlePin方法处理
  server.onNotFound ( handleNotFound ); // NotFound处理
  server.begin();
  Serial.println ( "HTTP server started" );
}
 
void loop() {
  /* 循环处理,因为ESP8266的自带的中断已经被系统占用,
   * 只能用过循环的方式来处理网络请求
   */
  server.handleClient();
}

 

代码修改自之前路由系统,毕竟web页面配合路由的请求会很方便。

主要是增加了getContentType方法和修改了handleMain、handleNotFound。修改handleMain引导访问根目录到index.html文件上,修改handleNotFound加入文件检查,有则直接返回,没有则404。

需要用到的css和js文件(度盘连接),这里的文件是压缩成gz格式,在浏览器中是支持这种格式的压缩文件的,压缩成gz的目的是减少数据量,节约传输的带宽,8266虽然说是54M的制式,但是从Flash读取出数据再传输到客户端上的数据流量大约只有6-9kb/s,一个jquery min没压缩前大约94kb,最快的情况传输需要10秒钟,而压缩成gz格式之后只有32kb,传输也就只需要3秒钟,中间的等待时间就少了很多。在handleNotFound里边做了判断,如果找到同名文件带有gz格式的文件优先返回gz文件。

接下来就是将文件上传到Flash上了,在这里需要下载一个Arduino IDE的插件(github地址:https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.3.0/ESP8266FS-0.3.0.zip,度盘:)。下载完成之后解压到IDE的tools文件夹中,解压之后完整的路径应该是“Arduino IDE的文件夹/tools/ESP8266FS/tool/esp8266fs.jar”,然后重启Arduino IDE,打开项目,在对应的项目文件夹下创建名称为data的文件夹,这个data文件夹就是上传数据用的文件夹,上传之后这个目录就是8266的根目录,将需要上传的文件复制到这个文件夹中,让8266进入烧写状态并关闭IDE的串口管理器,最后选择Tools(工具)->ESP8266 Sketch Data Upload选项,将文件上传到给8266的板载Flash。进入烧写状态之后就慢慢等着文件上传完成了,完成之后8266会重启,但是保险起见,建议手动重启一次。

之后待8266连接上wifi之后访问它在串口管理器打印的IP,就可以看到上传到8266上的页面了。

打开地址显示出来的页面

打开地址显示出来的页面

开发者工具网络状态

开发者工具网络状态

在这个页面下点击点亮板载led和系列板载led就可以看到8266版上的那颗蓝色的led亮起和熄灭了。

关于一些SPIFFS使用的一些注意事项(坑),可以参考这篇文章:Arduino ESP8266 SPIFFS文件系统的一些坑

本文链接地址:https://www.windworkshop.cn/?p=1274 »文章允许转载 ,转载请注明出处,谢谢。

3 thoughts on “Arduino IDE for ESP8266教程(五)文件系统

  1. 守财奴

    你好,我想通过esp8266把arduino的数据,例如电压,温度这种值传到网页上应该怎么做呢,esp8266和arduino是通过串口通信

    Reply
    1. 当风过时 Post author

      用AT指令连上对应api地址和80端口,然后发送对应api的http报文就行了,具体可以参考极客工房上的相关文章

      Reply

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据