首页 > 编程语言 >在网页中加载闪存文件系统中的图片、css和javascript

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

时间:2022-11-05 19:22:53浏览次数:72  
标签:return javascript filename endsWith println 闪存 Serial else css

在网页中加载闪存文件系统中的图片、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";
}

标签:return,javascript,filename,endsWith,println,闪存,Serial,else,css
From: https://www.cnblogs.com/fengzhihean/p/16860889.html

相关文章

  • 显示两行文字,超出显示省略号 css
    1width:100px;2background-color:pink;//一下内容为设置文字换行及只显示两行,超出显示省略号3text-overflow:-o-ellipsis-lastline;4ov......
  • CSS & JS Effect – Textarea Autoresize
    前言这是一个很普遍的体验,而且实现起来也很简单哦 参考YouTube– HowtoAutoResizeTextareausingHTMLCSS&JavaScript 效果我故意加了border和pad......
  • JavaScript之字符串的方法
    JavaScript字符串用于存储和处理文本。String(字符串)可以存储一系列字符,如"JavaScript之字符串的方法"。String也是基础数据类型。接下来查看String常用方法,如有不足和......
  • 用DIV+CSS技术设计的音乐主题网站(web前端网页制作课作业)
    ......
  • CSS选择器分类大全
    选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的目录一、基础选择器二、复合选择器三、CSS3选择器补充:(一)层级选择......
  • TypeScript与JavaScript区别
    TypeScript是JavaScript的一个超集,支持ECMAScript6标准。TypeScript由微软开发的自由和开源的编程语言。TypeScript设计目标是开发大型应用,它可以编译成纯JavaS......
  • JavaScript数组的reduce()方法
    参考文章:Array.prototype.reduce()——MDN一、介绍reduce()方法对数组中的每个元素按顺序执行一个由您提供的reducer函数,每一次运行reducer都会将先前元素的......
  • 原生javascript点击获取table表格数据
    1.ajax获取List数据xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4&&xmlHttp.status==200){letreturnVal......
  • 1 JavaScript作用、功能和发展史
    文章目录​​前言​​​​1JavaScript基本介绍​​​​2JavaScript当前作用​​​​3JavaScript结构组成​​​​4JavaScript语言特点​​​​结语​​前言......
  • CSS 样式种类
    CSS样式种类边框(border)1)宽度、样式、颜色(border:2pxsolidred)viewcode<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ti......