吴先森的笔记
为退烧而生!
某咸鱼的笔记

使用ESP8266搭建一个从闪存中读取HTML文件的迷你WebServer

使用ESP8266搭建一个从闪存中读取HTML文件的迷你WebServer

本次开发用到的库:FS.h(SPIFFS文件系统)、ESP8266WiFi.h(WIFI库)以及ESP8266WebServer.h(WebServer)

环境配置

配置Arduino IDE开发环境

按照以下文章配置好Arduino IDE的ESP8266开发环境,上述库(FS.h、ESP8266WiFi.h、ESP8266WebServer)基本上全部自带。如果编译的时候报错缺少库,请自行从项目–>加载库–>搜索中安装

安装ESP8266FS

Github镜像下载)中下载ESP8266FS,并将其解压到Arduino(你的Arduino安装目录)/tools文件夹中

https://www.wunote.cn/wp-content/uploads/2022/02/174617.png

并重启Arduino,你应该会在工具中,见到ESP8266 Sketch Data Upload

https://www.wunote.cn/wp-content/uploads/2022/02/174804.png

开始编写

在arduino中新建一个项目,并在里面写入

#include <ESP8266WiFi.h>      // 使用WIFI库连接网络
#include <ESP8266WebServer.h> // ESP8266 Web服务器
#include <FS.h>               // 闪存文件系统操作的工具函数

// 定义WIFI账号密码
#define wifiSSID "XXXXX"
#define wifiPassword "XXXXXXXXXX"

ESP8266WebServer server(80); // 建立新的ESP8266WebServer对象

void setup(void)
{
  Serial.begin(9600); // 启动串口通讯

  // 连接WIFI部分
  Serial.println("");
  Serial.println("Connect to WiFi");
  WiFi.begin(wifiSSID, wifiPassword); //连接WIFI
  int i = 0;
  while (WiFi.status() != WL_CONNECTED) // 如果WIFI连接成功则跳出循环
  {
    delay(1000);
    Serial.print("Wait for WiFi [");
    Serial.print(i++);
    Serial.println("s]");
  }
  Serial.println("Connected to WiFi successfully");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP()); // 显示当前设备被分配到的IP

  // SPIFFS部分
  if (SPIFFS.begin())
  {
    Serial.println("Start SPIFFS successfully");
  }
  else
  {
    Serial.println("Start SPIFFS Failed");
  }

  // Web服务器部分
  server.on("/", homePage); // 设置请求根目录时候的回调函数
  server.begin();           // 启动Web服务器
  Serial.println("HTTP server started");
}

// 本函数千万不要读取大文件,不然会内存溢出的,大文件要用文件流的形式!
String readFile(String filename)
{
  File myFile; // 定义变量
  String content = "";
  myFile = SPIFFS.open(filename, "r"); // 以只读方式打开文件
  if (myFile) //判断文件是否打开成功
  {
    Serial.println("Reading File [" + filename + "]");
    content = myFile.readString(); // 读取文件中的所有内容
    myFile.close();  //关闭文件
  }
  else
  {
    Serial.println("Open File Failed.");
  }
  return content; //返回文件内容
}

void homePage()
{
  server.send(200, "text/html", readFile("/index.html")); // 返回网页信息
}

void loop()
{
  server.handleClient(); // 监听客户请求并处理
}

然后在项目中新建一个/data文件夹

https://www.wunote.cn/wp-content/uploads/2022/02/130637.png

在里面放入index.html即可

烧录程序

点击工具–>ESP8266 Sketch Data Upload即可烧录文件

然后点击项目–>上传按钮,即可开始烧录程序

烧录完成后,ESP8266将会自动重启

连接串口及会看到程序输出

https://www.wunote.cn/wp-content/uploads/2022/02/132057.png
https://www.wunote.cn/wp-content/uploads/2022/02/132229.png

程序源代码

网页链接:https://share.llilii.cn/arduino/esp8266/demo/mini_webserver.zip

发表评论请先填写昵称和邮箱
评论需要审核后才能显示,与内容无关的评论、灌水评论、广告等不会通过审核
本站的所有教程均博主亲身尝试后的经验,且未注明的均为原创
本站的内容可能很小白化,老鸟勿喷。
本文链接:https://www.wunote.cn/article/4549/
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可

某摆烂咸鱼

文章作者

为退烧而生!

发表回复

textsms
account_circle
email

某咸鱼的笔记

使用ESP8266搭建一个从闪存中读取HTML文件的迷你WebServer
本次开发用到的库:FS.h(SPIFFS文件系统)、ESP8266WiFi.h(WIFI库)以及ESP8266WebServer.h(WebServer) 环境配置 配置Arduino IDE开发环境 按照以下文章配置好Arduino IDE的…
扫描二维码继续阅读
2022-02-06
EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00