ESP32应用开发-Webserver

最新推荐文章于 2024-09-01 21:55:24 发布

DropLin

最新推荐文章于 2024-09-01 21:55:24 发布

阅读量428

点赞数 1

分类专栏：乐鑫ESP32 文章标签： c++ c语言 Arduino

本文链接：https://blog.csdn.net/dropLin/article/details/141677619

版权

乐鑫ESP32 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

开发环境：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());
	 }
  });

DropLin

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ESP32应用开发-Webserver

ESP32作为AP模式，终端连接该AP，通过地址即可访问该web服务器了，前端界面文件通过http GET方式获取，包括css文件，图片，js文件等。，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。字段中，以json字符串的形式存放。post消息体的body数据放在。，Arduino的编译链为。，Arduino的编译链为。把整个前端文件的内容放在。
复制链接

扫一扫

专栏目录