文章目录
- 开发环境：Arduino
库调用
#include<WebServer.h>#include<ArduinoJson.h>//IDE没有自带，需自行安装
实例
WebServer server(80);staticconstchar 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>)==";voidsetup(){
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();}voidloop(){delay(1);
server.handleClient();}
实现思路
ESP32作为AP模式，终端连接该AP，通过地址即可访问该web服务器了，前端界面文件通过http GET方式获取，包括css文件，图片，js文件等。
技术要点
1. 前端涉及的文件需要包装再发送
staticconstchar index_html[] PROGMEM = R"==()==";
把整个前端文件的内容放在
()
括号里。
2. http-GET路由
访问路径
/upd_pwd
，操作方式
GET
，Arduino的编译链为
c++
，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。
serializeJson把json对象格式化成Stringc_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对象格式化成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{constchar*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());}});
本文转载自: https://blog.csdn.net/dropLin/article/details/141677619
版权归原作者 DropLin 所有， 如有侵权，请联系我们删除。
版权归原作者 DropLin 所有， 如有侵权，请联系我们删除。