当前位置：首页 > news >正文

ESP32应用开发-Webserver

news 2025/7/7 7:30:08

文章目录

- 库调用
- 实例
- 实现思路
- 技术要点
- - 1. 前端涉及的文件需要包装再发送
  - 2. http-GET路由
  - 3. http-POST路由

开发环境：Arduino

库调用

#include <WebServer.h>
#include <ArduinoJson.h>	//IDE没有自带，需自行安装

实例


WebServer server(80);static const char index_html[] PROGMEM = R"==(  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styleLoading.css"> <title>沃进DTU配置系统</title><style></style>
</head>
<body><div class="content"><div><div class="casePage"><div class="disflex" style="justify-content: space-between;"><div class="titltInfo disflex"><div class="title_wayos" style="margin-bottom: 10px;"><a href="https://vollgo.cn/">沃进科技</a></div></div></div></div></div></div>
</body>
<script>
</script>
</html>)==";  void setup() {Serial.begin(115200);Serial.println("system start");IPAddress apIP({192, 168, 4, 1});    //设置AP的IP地址WiFi.mode(WIFI_AP_STA);WiFi.softAPConfig(apIP, apIP, IPAddress({255, 255, 255, 0}));server.on("/", [=]() {server.send(200, "text/html", FPSTR(index_html));});server.on("/index.html", [=]() {server.send(200, "text/html", FPSTR(index_html));});server.on("/wifi_params", HTTP_GET, [=]() {StaticJsonDocument<1024> doc;doc["code"] = 200;doc["message"]["ssid"] = "12345";String jsonString;serializeJson(doc, jsonString);Serial.println(jsonString);server.send(200, "text/json", jsonString.c_str());});server.onNotFound([](){String message = "File Not Found\n\n";message += "URI: ";message += server.uri();message += "\nMethod: ";message += (server.method() == HTTP_GET) ? "GET" : "POST";message += "\nArguments: ";message += server.args();message += "\n";for (uint8_t i = 0; i < server.args(); i++) {message += " " + server.argName(i) + ": " + server.arg(i) + "\n";}server.send(404, "text/plain", message);// digitalWrite(led, 0);});server.begin();
}
void loop() {delay(1);server.handleClient();
}

实现思路

ESP32作为AP模式，终端连接该AP，通过地址即可访问该web服务器了，前端界面文件通过http GET方式获取，包括css文件，图片，js文件等。

技术要点

1. 前端涉及的文件需要包装再发送

static const char index_html[] PROGMEM = R"==(  
)==";

把整个前端文件的内容放在()括号里。

2. http-GET路由

访问路径/upd_pwd，操作方式GET，Arduino的编译链为c++，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。

serializeJson把json对象格式化成String
c_str()把String转换成char *
server.arg("username")获取前端传递的路径中的参数username

  server.on("/upd_pwd", HTTP_GET, []() {String username = server.arg("username");StaticJsonDocument<512> doc;doc["code"] = 201;String jsonString;serializeJson(doc, jsonString);server.send(200, "text/json", jsonString.c_str());});

3. http-POST路由

访问路径/upd_pwd，操作方式POST，Arduino的编译链为c++，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。
post消息体的body数据放在plain字段中，以json字符串的形式存放。

serializeJson把json对象格式化成String
c_str()把String转换成char *
server.arg("username")获取前端传递的路径中的参数username
const char *ip = doc["server"];获取json对象的server字段的值

  server.on("/upd_pwd", HTTP_POST, []() {String body= server.arg("plain");StaticJsonDocument<512> doc;  DeserializationError error = deserializeJson(doc, body.c_str());if(error){server.send(400, "text/json", "{\"success\": 400, \"message\":\"json error\"}");}else{const char *ip = doc["server"];StaticJsonDocument<512> doc_ret;doc_ret["code"] = 201;String jsonString;serializeJson(doc_ret, jsonString);server.send(200, "text/json", jsonString.c_str());}});