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

ESP32应用开发-Webserver

news 2025/9/17 17:25:56
文章目录
    • 库调用
    • 实例
    • 实现思路
    • 技术要点
      • 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";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对象格式化成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());
    }
    });

相关文章：

ESP32应用开发-Webserver

文章目录 库调用实例实现思路技术要点 1. 前端涉及的文件需要包装再发送2. http-GET路由3. http-POST路由 开发环境&#xff1a;Arduino 库调用 #include <WebServer.h> #include <ArduinoJson.h> //IDE没有自带&#xff0c;需自行安装实例 WebServer server…...

编程日记 2024/12/24 5:23:26

【IMU：视觉惯性SLAM系统】

视觉惯性SLAM系统简介 相机&#xff08;单目/双目/RGBD)与IMU结合起来就是视觉惯性&#xff0c;通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度&#xff0c;可分为6轴(6个自由度)和9轴&#xff08;9个自由度&#xff09;IMU&#xff0c;具体的关于IMU的介…...

编程日记 2024/12/24 5:22:25

前端开发 之 12个鼠标交互特效下【附完整源码】

前端开发 之 12个鼠标交互特效下【附完整源码】 文章目录 前端开发 之 12个鼠标交互特效下【附完整源码】七&#xff1a;粒子烟花绽放特效1.效果展示2.HTML完整代码 八&#xff1a;彩球释放特效1.效果展示2.HTML完整代码 九&#xff1a;雨滴掉落特效1.效果展示2.HTML完整代码 十…...

编程日记 2024/12/24 5:21:23

Unity文件路径访问总结：从基础到高级的资源加载方法

在Unity开发中&#xff0c;文件路径的访问和资源加载是开发者经常需要处理的任务。无论是加载纹理、模型、音频&#xff0c;还是读取配置文件&#xff0c;正确地处理路径和资源加载是确保项目顺利运行的关键。本文将以Unity文件路径访问为主线&#xff0c;详细介绍Unity中常见的…...

编程日记 2024/12/24 5:20:22

AWS Transfer 系列：简化文件传输与管理的云服务

在数字化转型的今天&#xff0c;企业对文件传输、存储和管理的需求日益增长。尤其是对于需要大量数据交换的行业&#xff0c;如何高效、可靠地传输数据成为了一大挑战。为了解决这一难题&#xff0c;AWS 提供了一系列的文件传输服务&#xff0c;统称为 AWS Transfer 系列。这些…...

编程日记 2024/12/24 5:19:19

Jenkins Api Token 访问问题

curl --location http://192.168.18.202:8080/view/ChinaFish/job/Ali/buildWithParameters?token1142be281174ee8fdf58773dedcef7ea4c&DeployTypeUpdateConfig \ --header Authorization: •••••• \ --header Cookie: JSESSIONID.824aa9a5node01ojk9yhh3imc24duwy67…...

编程日记 2024/12/24 5:18:18

垂起固定翼无人机大面积森林草原巡检技术详解

垂起固定翼无人机大面积森林草原巡检技术是一种高效、精准的监测手段&#xff0c;以下是对该技术的详细解析&#xff1a; 一、垂起固定翼无人机技术特点 垂起固定翼无人机结合了多旋翼和固定翼无人机的优点&#xff0c;具备垂直起降、飞行距离长、速度快、高度高等特点。这种无…...

编程日记 2024/12/24 5:13:09

【Leetcode 每日一题】1387. 将整数按权重排序

问题背景 我们将整数 x x x 的 权重 定义为按照下述规则将 x x x 变成 1 1 1 所需要的步数&#xff1a; 如果 x x x 是偶数&#xff0c;那么 x x / 2 x x / 2 xx/2。如果 x x x 是奇数&#xff0c;那么 x 3 x 1 x 3 \times x 1 x3x1。 比方说&#xff0c; x …...

编程日记 2024/12/24 5:09:01

科研笔记 KDD 2025

1 基本介绍 KDD 每年有多次投稿周期。KDD 2025 将有两个截止时间&#xff1a;分别是 2024 年 8 月 1 日和 2025 年 2 月 1 日&#xff08;全文提交截止时间在摘要提交截止后一周&#xff09;。 同时&#xff0c;KDD 会议论文集&#xff08;Proceedings&#xff09;将分两批出…...

编程日记 2024/12/24 5:08:00

黑马Java面试教程_P8_并发编程

系列博客目录 文章目录 系列博客目录前言1.线程的基础知识1.1 线程和进程的区别&#xff1f;难2频3面试文稿 1.2 并行和并发有什么区别&#xff1f; 难1频1面试文稿 1.3 创建线程的四种方式 难2频4面试文稿 1.4 runnable 和 callable 有什么区别 难2频3面试文稿 1.5 线程的 run…...

编程日记 2024/12/24 5:03:54

网络视频监控平台/安防监控/视频综合管理Liveweb视频汇聚平台解决方案

一、当前现状分析 当前视频资源面临以下问题&#xff1a; 1&#xff09;不同单位在视频平台建设中以所属领域为单位&#xff0c;设备品牌众多&#xff0c;存在的标准不一&#xff0c;各系统之间也没有统一标准&#xff1b; 2&#xff09;各单位视频平台建设分散、统筹性差&am…...

编程日记 2024/12/24 5:01:48

workman服务端开发模式-应用开发-后端api推送修改二

需要修改两个地方&#xff0c;第一个是总控制里面的续token延时&#xff0c;第二个是操作日志记录 一、总控续token延时方法 在根目录下app文件夹下controller文件夹下Base.php中修改isLoginAuth方法&#xff0c;具体代码如下&#xff1a; <?php /*** 总控制* User: 龙哥…...

编程日记 2024/12/24 5:00:46

SQL 使用带聚集函数的联结

聚集函数用于汇总数据&#xff0c;通常用于从一个表中计算统计信息&#xff0c;但也可以与联结一起使用。以下是一个例子&#xff0c;展示如何使用聚集函数统计每个顾客的订单数。 示例 1&#xff1a;使用 COUNT() 函数与 INNER JOIN 假设我们需要检索所有顾客及每个顾客所下…...

编程日记 2024/12/24 4:57:44

Restaurants WebAPI（三）——Serilog/FluenValidation

文章目录 项目地址一、Serilog使用1.1 安装 Serilog1.2 注册日志服务1.3 设置日志级别和详情1.4 配置到文件里1.5 给不同的环境配置日志1.5.1 配置appsettings.Development.json二、Swagger的使用三、自定义Exception中间件3.1 使用FluentValidation项目地址 教程作者：教程地址…...

编程日记 2024/12/24 4:54:39

概率论得学习和整理32： 用EXCEL描述正态分布，用δ求累计概率，以及已知概率求X的区间

目录 1 正态分布相关 2 正态分布的函数和曲线 2.1 正态分布的函数值&#xff0c;用norm.dist() 函数求 2.2 正态分布的pdf 和 cdf 2.3 正态分布的图形随着u 和 δ^2的变化 3 正态分布最重要的3δ原则 3.0 注意&#xff0c;这里说的概率一定是累计概率CDF&#xff0c;而…...

编程日记 2024/12/24 4:51:36

【原生js案例】让你的移动页面实现自定义的上拉加载和下拉刷新

目前很多前端UI都是自带有上拉加载和下拉刷新功能，按照官网配置去实现即可，比如原生小程序，vantUI等UI框架，都替我们实现了内部功能。 那如何自己来实现一个上拉加载和下拉刷新的功能？ 实现效果 不用浏览器的css滚动条，自定义实现滚动效果 自定义实现滚动，添加上拉加载…...

编程日记 2024/12/24 4:49:33

【linux 常用命令】

1. 使用xshell 通过SSH连接到Linux服务器 ssh -p 端口号 usernameip地址2. 查看当前目录下的子文件夹的内存占用情况 du -a -h -d 1或者 du -ah -d 1-a &#xff1a;展示所有子文件夹&#xff08;包括隐藏文件夹&#xff09;&#xff0c;-h &#xff1a;以人类可读的形式&am…...

编程日记 2024/12/24 4:44:29

【JetPack】Room数据库笔记

Room数据库笔记 ORM框架&#xff1a;对齐数据库数据结构与面向对象数据结构之间的关系&#xff0c;使开发编程只考虑面向对象不需要考虑数据库的结构 Entity : 数据实体&#xff0c;对应数据库中的表 <完成面向对象与数据库表结构的映射> 注解&#xff1a; 类添加注解…...

编程日记 2024/12/24 4:41:25

【CSS in Depth 2 精译_088】第五部分：添加动效概述 + 第 15 章：CSS 过渡特效概述 + 15.1：状态间的由此及彼

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼 ✔️15.2 定时函数 文章目录 第 5 部分 添加动效 Adding motion第 15 章 过渡 Transitions15.1 状态间的由此及彼 From here…...

编程日记 2024/12/24 4:40:24

# 起步专用 - 哔哩哔哩全模块超还原设计！(内含接口文档、数据库设计)

↑ 上方下载文档 (大小374KB) 接口文档预览 (超过50个接口) 一、数据库25张表er-关系清晰构图&#xff01;(tip: 鼠标右键图片 > 放大图像) 二、难点/经验 详细说明 热门评论排序评论点赞列表|DTO封装经验分享|精华接口文档说明 组员都说喜欢分档对应枚举码 如果这篇文章…...

编程日记 2024/12/24 4:35:16

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/9/8 8:54:14

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/8/25 20:32:49

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/8/27 15:36:00

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/9/9 18:41:56

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/9/2 17:47:53

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/9/2 18:32:32

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/9/3 23:35:33

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

编程新知 2025/8/28 8:20:05

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/9/7 7:21:20

前端打包工具简单介绍

前端打包工具简单介绍 一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry&#xff08;入口&#xff09; 指定应用的起点文件&#xff0c;比如 src/index.js。 Module&#xff08;模块&#xff09; Webpack 把项目当作模块图&#xff0c;模块可以是 JS、CSS、图片等…...

编程新知 2025/8/24 20:46:53