在网页中加载闪存文件系统中的图片、css和javascript

在网页中加载闪存文件系统中的图片、CSS和JavaScript – 太极创客 (taichi-maker.com)

• 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(115200); // 启动串口通讯
Serial.println("");

wifiMulti.addAP("A53G", "zizaibuchengren!%"); // 将需要连接的一系列WiFi ID和密码输入这里
// 环境查找是否有这里列出的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();

　　Serial.println(webAddress);

这里打印四次，可以简单理解为嵌套，也就是浏览器访问到首页（html）了，而在首页（html）里面又调用了css和js文件还有img文件，浏览器又请求了css和js文件和img文件，所以打印了四次

　　// 通过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("/")) {　　 // 如果访问地址以"/"为结尾，就告诉浏览器要访问/index.html这个页面；
　　　　path = "/index.html"; 
　　}

　　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";
}