代码收藏家技术教程 2023-01-04

使用ESP32搭建WEB服务器：第五步 – 内嵌HTML

在前面的文章: ESP32的web服务器中已经建立了最基本的web服务器。已经实现了基本对于浏览器发送的请求进行响应。但是只是输出了最基本的字符串，但一个正常的网页，是一种叫做HTML的全称为超文本标记语言，大多数情况下会包含有CSS层叠样式表来修饰网页，同时会利用JavaScript脚本语言来对浏览器事件做出响应,详细的说明这里不再赘叙。可以自行搜索。这里只介绍和使用一些基本的元素和属性。对于一个中文网页，需要使用

<meta charset="utf-8">

来声明编码，否则会出现乱码。下面是一个简单的HTML页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>EPS32教程</title>
  </head>
  <body>
    <h1>ESP32 HTML 标题</h1>
    <p>ESP32 HTML 段落</p>
  </body>
</html>

该HTML生成的网页在浏览器打开后的结果

基本的HTML页面已经有了，接下来就是要在ESP32的web服务器的基础上，把响应浏览器的请求换成上面的HTML代码。

首先，把这段HTML代码定义为一个String的变量:

const String indexHtml PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>EPS32教程</title>
  </head>
  <body>
    <h1>ESP32 HTML 标题</h1>
    <p>ESP32 HTML 段落</p>
  </body>
</html>
)rawliteral";

在这个变量里，使用了 PROGMEM 关键字，这个关键字的目的是将数据存储在Flash(闪存)中而不是RAM(运行内存)

同时R"rawliteral是一种引入原始字符串的方法。引用该方法，就无需对比如斜杠"\"或换行符"\n"之类的进行转义,非常方便。

然后，在响应请求的回调函数里发送这个变量,同时，发送的数据类型也相应得应该换成"text/html":

void call_back(AsyncWebServerRequest *request){
  Serial.println("User requested");
  request->send(200,"text/html",indexHtml);   //响应请求
}

至此，就创建了一个基本的HTML服务器，完整的代码:

#include <WiFi.h>
#include "ESPAsyncWebServer.h"

  AsyncWebServer server(80);

const String indexHtml PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>EPS32教程</title>
  </head>
  <body>
    <h1>ESP32 HTML 标题</h1>
    <p>ESP32 HTML 段落</p>
  </body>
</html>
)rawliteral";
  
//连接WIFI
void connect_wifi(){
  const char* wifi_ssid = "maiqh";
  const char* wifi_password = "1581162577000";
  Serial.begin(9600);
  WiFi.begin(wifi_ssid, wifi_password);         //连接WIFI
  Serial.print("Connected");
  //循环，直到连接成功
  while(WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  IPAddress local_IP = WiFi.localIP();
  Serial.print("WIFI is connected,The local IP address is "); //连接成功提示
  Serial.println(local_IP); 
}

void call_back(AsyncWebServerRequest *request){
  Serial.println("User requested");
  request->send(200,"text/html",indexHtml);   //响应请求
}

void web_server(){

  server.on("/",HTTP_GET,call_back);    //注册回调函数
  server.begin();                       //初始化
}

void setup() {
  connect_wifi();
  web_server();
}

void loop() {
  // put your main code here, to run repeatedly:

}

和之前一样，在串口监视器得到ESP32的IP地址后，在浏览器访问