ESP8266-Web服务器

为了修改方便并且保证html文件的可读性，把html及其相关文件全部使用 SPIFFS 文件系统进行存储

>w 实例文件：`...\共享盘\创客\作品DIY\ESP8266_Web服务器`

## SPIFFS 使用说明
SPIFFS 是一个简单的文件系统，`所有的文件都是在同一个级别下的，没有文件夹的概念`
>s 不过可以使用文件名中的特定字符(如斜杠/)来模拟文件夹结构，以便在代码中更容易地组织和访问文件
> 比如文件命名为 `my_folder/file.txt`，然后在代码中使用 / 分隔文件名来模拟文件夹的结构
> 这只是一种在代码中模拟文件夹结构的方式，实际上文件仍然是位于同一个目录下的

### 文件上传
![](/media/202311/2023-11-03_180818_8506460.34863937567819303.png)
1. 注意 SPIFFS 没有文件夹概念，故必须全部放在 data 文件夹下，且不能再套文件夹
2. 使用 `工具——ESP8266 Sketch Data Upkoad` 进行上传，且要保证 COM口 无任何占用(无法像烧录固件会自动屏蔽IDE的串口监视器)

#### 离线网页小技巧
对于有些网页保存下来想要使用 ESP8266 还原效果的
1. 使用Edge/Google浏览器打开要离线的网页
2. <kbd>Ctrl</kbd>+<kbd>S</kbd> 保存页面为 完整的 html
![](/media/202311/2023-11-03_195308_7375840.6924215359246861.png)
![](/media/202311/2023-11-03_195531_4258100.8207023045844386.png)
3. 把 html主文件 和 其他相关文件夹下的所有文件 都放到 `程序项目文件夹/data` 下
![](/media/202311/2023-11-03_195840_2516110.4399545575844479.png)
4. 修正 `程序项目文件夹/data` 下的所有文件名称，`不可有中文、文件名不宜过长`
注意，修改前后的名称要知道，一会需要使用
5. 修改 html主文件，修改其中调用的文件名称(刚修改的)，并修复 SPIFFS文件系统中没有层级而主文件中有的问题
![](/media/202311/2023-11-03_200626_2504530.7110286786499057.png)
可以通过批量替换 `html名称_files/` 来实现快速去除目录层级
![](/media/202311/2023-11-03_201029_7766670.4270858749172216.png)
可以通过查找 `src=".` 来快速定位加载的本地文件

修改好后这些文件就可以正常在 ESP8266 中进行加载web了，注意修改加载主页(/)html文件名称

### 查看 SPIFFS 文件系统下包含哪些文件
```C++
#include <FS.h>

void setup() {
  Serial.begin(115200);
  if (!SPIFFS.begin()) {
    Serial.println("挂载文件系统失败");
    return;
  }
  Serial.println("在 SPIFFS 中列出文件: ");
  Dir dir = SPIFFS.openDir("/");
  while (dir.next()) {
    Serial.print("File: ");
    Serial.println(dir.fileName());
  }
}

void loop() {

}
```

## 部署 Web服务器
基础版，设置指定WiFi连接使用
```C++
// 使用 SPIFFS文件系统保存web页面,使用 "工具" -> "ESP8266 Sketch Data Upload" 进行上传页面文件
// web页面保存在 项目文件夹/data 下

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

const char* ssid = "WIFI233";  // 替换为你的WiFi网络名称
const char* password = "xxx";  // 替换为你的WiFi密码

ESP8266WebServer server(80);  // Web服务运行的端口
// 定义个LED,WEB服务启动好了就灭灯提示
const int ledPin = 16;  // LED的引脚(16板载,2芯片,低触发)

void setup() {
  Serial.begin(115200);  // 指定波特率
  pinMode(ledPin, OUTPUT);  // 设置LED引脚为输出模式
  digitalWrite(ledPin, LOW);  // 初始状态开启LED

// 连接WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("成功连接 WiFi\nIP地址: ");
  Serial.println(WiFi.localIP());

// 启动 SPIFFS
  if (!SPIFFS.begin()) {
    Serial.println("挂载文件系统失败");
    return;
  }

// 设置路由,将根目录重定向到 SPIFFS 中的 index.html
  // 可以同时设置多个(多创建几条server.on),用于处理不同路径的路由
  server.on("/", HTTP_GET, [](){
    File file = SPIFFS.open("/index.html", "r");
    // 找不到文件则返回提示
    if (!file) {
      // 支持使用html语法,注意有些需要使用\进行转义(如双引号)
      server.send(404, "text/html;charset=utf-8", "<html><head><title>ESP8266 Web系统</title></head><body><h1>未找到该文件,请检查文件确实存在于SPIFFS文件系统中,使用 工具 -> ESP8266 Sketch Data Upload 进行上传页面文件 </h1></body></html>");
      return;
    }
    server.streamFile(file, "text/html;charset=utf-8");  // 从文件发送
    file.close();  // 关闭当前文件
  });

// 处理未指定的页面,解决通用页面和文件
  server.onNotFound([](){
    String Path = server.uri();  // 获取当前访问页面的url
    File file = SPIFFS.open(Path, "r");  // 根据url来进行加载对应文件
    // 判断在 SPIFFS 在是否有当前文件
    if (file) {
      String contentType = getContentType(Path);  // 根据url来确认响应类型
      server.streamFile(file, contentType);  // 使用正确的响应类型来加载当前文件至web
      file.close();  // 关闭当前文件
    } else {
      String message = "未找到该文件\n\n请求的URL: “" + server.uri() + "” 在这个服务器上没找到";  // 支持使用字符串进行动态加载
      server.send(404, "text/plain;charset=utf-8", message);  // 直接发送
    }
  });

server.begin();  // 启动web服务
  digitalWrite(ledPin, HIGH); // 服务启动好了关闭LED
}

void loop() {
  server.handleClient();  // 处理客户端
}

// 根据访问的文件后缀,返回正确的响应类型,对于网页中中文乱码的可以加上 `;charset=utf-8` 指定字符集
String getContentType(String filename) {
  // 仅列举常见的文件类型,不使用的可以禁用
  if (filename.endsWith(".htm") || filename.endsWith(".html")) return "text/html;charset=utf-8";
  else if (filename.endsWith(".xml")) return "text/xml";
  else if (filename.endsWith(".css")) return "text/css";
  else if (filename.endsWith(".js")) return "application/javascript";
  else if (filename.endsWith(".json")) return "application/json";
  else if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) return "image/jpeg";
  else if (filename.endsWith(".png")) return "image/png";
  else if (filename.endsWith(".gif")) return "image/gif";
  else if (filename.endsWith(".ico")) return "image/x-icon";
  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";
  else if (filename.endsWith(".mp3")) return "audio/mpeg";
  else if (filename.endsWith(".mp4")) return "video/mp4";
  return "text/plain;charset=utf-8";
}
```

### WIFI & AP 任选
```C++
// 使用 SPIFFS文件系统保存web页面,使用 "工具" -> "ESP8266 Sketch Data Upload" 进行上传页面文件
// web页面保存在 项目文件夹/data 下

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

#define ap_mode 1;  // 设定wifi模式,定义则为 ap,否则为 wifi
const char* ssid = "WIFI233";  // 替换为你的WiFi网络名称
const char* password = "xxx";  // 替换为你的WiFi密码
ESP8266WebServer server(80);  // Web服务运行的端口

// 定义个LED,WEB服务启动好了就灭灯提示
const int ledPin = 16;  // LED的引脚(16板载,2芯片,低触发)

void setup() {
  Serial.begin(115200);  // 指定波特率
  pinMode(ledPin, OUTPUT);  // 设置LED引脚为输出模式
  digitalWrite(ledPin, LOW);  // 初始状态开启LED

// 启动 SPIFFS
  if (!SPIFFS.begin()) {
    Serial.println("挂载文件系统失败");
    return;
  }

// 网络连接
  #ifdef ap_mode  // 使用AP模式
    WiFi.mode(WIFI_AP);  // AP模式
    IPAddress ip(192, 168, 233, 1);  // 你ESP8266的IP地址
    IPAddress gateway(192, 168, 233, 1);  // 你的网关
    IPAddress subnet(255, 255, 255, 0);  // 你的子网掩码
    WiFi.softAPConfig(ip, gateway, subnet);  // 设置AP参数
    // WiFi.softAP(ssid, password);  // 设置AP_含密码
    WiFi.softAP(ssid);  // 设置AP_无密码
    Serial.print("\nWeb地址: http://");
    Serial.println(ip);
  #else  // 使用WIFI模式
    WiFi.begin(ssid, password);  // 连接WiFi
    while (WiFi.status() != WL_CONNECTED) {
      delay(1000);
      Serial.print(".");
    }
    Serial.println("成功连接 WiFi\nWeb地址: http://");
    Serial.println(WiFi.localIP());
  #endif

// 设置路由,将根目录重定向到 SPIFFS 中的 index.html
  // 可以同时设置多个(多创建几条server.on),用于处理不同路径的路由
  server.on("/", HTTP_GET, [](){
    File file = SPIFFS.open("/index.html", "r");
    // 找不到文件则返回提示
    if (!file) {
      // 支持使用html语法,如果页面中有"记得改成\"
      server.send(404, "text/html;charset=utf-8", "<html><head><title>ESP8266 Web系统</title></head><body><h1>未找到该文件,请检查文件确实存在于SPIFFS文件系统中,使用 工具 -> ESP8266 Sketch Data Upload 进行上传页面文件 </h1></body></html>");
      return;
    }
    server.streamFile(file, "text/html;charset=utf-8");  // 从文件发送
    file.close();  // 关闭当前文件
  });

// 处理未指定的页面,解决通用页面和文件
  server.onNotFound([](){
    String Path = server.uri();  // 获取当前访问页面的url
    File file = SPIFFS.open(Path, "r");  // 根据url来进行加载对应文件
    // 判断在 SPIFFS 在是否有当前文件
    if (file) {
      String contentType = getContentType(Path);  // 根据url来确认响应类型
      server.streamFile(file, contentType);  // 使用正确的响应类型来加载当前文件至web
      file.close();  // 关闭当前文件
    } else {
      String message = "未找到该文件\n\n请求的URL: “" + server.uri() + "” 在这个服务器上没找到";  // 支持使用字符串进行动态加载
      server.send(404, "text/plain;charset=utf-8", message);  // 直接发送
    }
  });

server.begin();  // 启动web服务
  digitalWrite(ledPin, HIGH); // 服务启动好了关闭LED
}

void loop() {
  server.handleClient();  // 处理客户端
}

// 根据访问的文件后缀,返回正确的响应类型,对于网页中中文乱码的可以加上 `;charset=utf-8` 指定字符集
String getContentType(String filename) {
  // 仅列举常见的文件类型,不使用的可以禁用
  if (filename.endsWith(".htm") || filename.endsWith(".html")) return "text/html;charset=utf-8";
  else if (filename.endsWith(".xml")) return "text/xml";
  else if (filename.endsWith(".css")) return "text/css";
  else if (filename.endsWith(".js")) return "application/javascript";
  else if (filename.endsWith(".json")) return "application/json";
  else if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) return "image/jpeg";
  else if (filename.endsWith(".png")) return "image/png";
  else if (filename.endsWith(".gif")) return "image/gif";
  else if (filename.endsWith(".ico")) return "image/x-icon";
  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";
  else if (filename.endsWith(".mp3")) return "audio/mpeg";
  else if (filename.endsWith(".mp4")) return "video/mp4";
  return "text/plain;charset=utf-8";
}
```

## HTTP 发送请求
```C++
# 设置 HTTP 响应头信息
server.sendHeader(code, content_type, content_length)
	# code：HTTP 状态码，如 200 表示成功，404 表示未找到，等等
	# content_type：指定响应的内容类型，例如 text/html 表示 HTML 内容
	# content_length：指定响应内容的长度，以字节为单位

# 直接发送 HTTP 响应
server.send(code, content_type, content)
	# code：HTTP 状态码，如 200 表示成功，404 表示未找到，等等
	# content_type：指定响应的内容类型，例如 text/html 表示 HTML 内容
	# content：要发送的内容，可以是字符串或者字节数组等

# 从文件系统中发送文件内容
server.streamFile(path, contentType)
	# path：文件的路径，相对于 SPIFFS 或其他文件系统
	# contentType：指定响应的内容类型，例如 text/html 表示 HTML 内容
```