文章目录
开发环境：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
";
message += "URI: ";
message += server.uri();
message += "
Method: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "
Arguments: ";
message += server.args();
message += "
";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "
";
}
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对象格式化成Stringc_str()把String转换成char *server.arg("username")获取前端传递的路径中的参数usernameserver.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对象格式化成Stringc_str()把String转换成char *server.arg("username")获取前端传递的路径中的参数usernameconst 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());
}
});