Question

我正在尝试学习ESP32。我的自我完成的项目包含以下步骤：

将ESP32设置为softAP-完成
通过WiFi访问ESP32-完成
提供一份HTML身份验证表格（index1.html）（位于ESP32的闪存中），询问附近无线网络的SSID和密码-完成
键入上述凭据，单击“登录”按钮，然后将ESP32连接到该无线网络
切换到另一个网页（index2.html）（位于ESP32的闪存中）

硬件：

开发板：ESP32 DEVKIT1

核心安装版本：1.0.1-git this one

IDE名称：Arduino IDE

闪光频率：80Mhz

启用PSRAM：否

上传速度：115200

计算机操作系统：Linux Mint 19.1 Mate

由于我是一个完整的菜鸟，所以我做了很多研究，但发现我不知道如何将其应用到我的项目中，这就是为什么我写这篇文章。

由于我不知道如何在此处正确地发布代码（我读过this）（代码/代码不起作用，因此在每行开头键入>均不起作用），因为它将得到解释，而不只是复制粘贴，我做了一些要点。我希望他们能工作。

现在，我希望能够在各自的输入中键入SSID和密码，单击“登录”按钮，将其存储在ESP32闪存中的只读文件中，将ESP32连接到各自的无线网络，并从闪存内部提供另一个网页。

我没有提到使用JavaScript或PhP，因为我不知道应该使用哪个或它们是否可以这种方式工作。

还有，可能不是一个只读文件，而是一个只存储几个无线网络的小型数据库？

谢谢！抱歉，很长的帖子。

Answer 1

我从不对运行在微控制器上的ESP32或Web服务感到困惑，但是我主要是为了谋生而编写Web服务和应用程序。

您可以使用JavaScript读取表单值，并将HTTP请求提交到单独的端点以存储用户名和密码值，但是HTML already supports forms。

您现在可以使用表单的输入标签。您要做的就是在输入周围添加一个表单元素，该元素指定如何编码和传输表单值以及将端点发送到的端点。当您单击“提交”按钮时，浏览器将负责其余工作：

<body>
    <div class="login-box">
        <form method="post" action="/login">
            <div class = "box-head">
                <div class = "logo"><img url="logo.png"></div>
                <div class = "network-title"><h1>Network Login</h1></div>
            </div>
            <div class ="textbox">            
                <input type="text" placeholder="Network Name" name="networkName" value="">
            </div>        
            <div class="textbox">            
                <input type="password" placeholder="Password" name="networkPassword" value="">
            </div>        
            <input class="button" type="submit" value="Sign in">
            <input class="button" type="reset" value="Restart">        
        </form>
    </div>    
</body>

这会将HTTP POST请求发送到/login端点，该请求的正文包含编码为application/x-www-form-urlencoded的表单值。

您不需要PHP来处理请求（并且您没有PHP运行时开始）。 PHP在HTTP服务器上执行逻辑。在这种情况下，ESP32是您的HTTP服务器，您的逻辑将被草图中的AsyncWebServer对象捕获。

AsyncWebServerRequest can read form values为您服务，因此您要做的就是在服务器上实现正确的处理程序：

server.on("/login", HTTP_POST, [](AsyncWebServerRequest *request) {
  if (!request->hasParam("networkName", true) || !request->hasParam("networkPassword", true)) {
    request->send(400, "Missing fields");
    return;
  }
  const char *networkName = request->getParam("networkName")->value().c_str();
  const char *networkPassword = request->getParam("networkPassword")->value().c_str();
  // Do stuff with networkName and networkPassword
  // ...
  // Redirect to new page
  request->redirect("/whatever");
});

如何从HTML输入中读取数据并将数据本地写入文件中以供将来访问

index.html

login.css

Arduino IDE草图

1 个答案: