Как читать из ввода HTML и записывать эти данные локально в файл для последующего доступа - PullRequest
Новая
       18

Как читать из ввода HTML и записывать эти данные локально в файл для последующего доступа

0 голосов
/ 01 февраля 2019

Я пытаюсь выучить ESP32.Мой собственный проект состоит из следующих шагов:

  • установить ESP32 в качестве softAP - DONE
  • получить доступ к ESP32 через WiFi - DONE
  • предоставить форму проверки подлинности HTML (index1.html) (он находится во флэш-памяти ESP32), запрашивая SSID и пароль в беспроводной сети поблизости - DONE
  • , введите вышеупомянутые учетные данные, нажмите кнопку входа в систему и подключите ESP32 к этомуБеспроводная сеть
  • переключается на другую веб-страницу (index2.html) (она находится во флэш-памяти ESP32)

Оборудование:

Плата: ESP32 DEVKIT1

Версия установки ядра: 1.0.1-git эта

Имя IDE: Arduino IDE

Частота флеш-памяти: 80 МГц

PSRAM включен: нет

Скорость загрузки: 115200

Компьютерная ОС: Linux Mint 19.1 Mate

Так как я полный нуб, я провел много исследований, но не нашел ничего, чтоЯ знал, как подать заявку на мой проект, поэтому я пишу этот пост.

Поскольку я не понимаю, как правильно размещать код здесь (я прочитал this ) (код / ​​код не работает, ввод> в начале каждой строки не работает)потому что это будет интерпретироваться вместо просто КОПИРОВАНИЯ, я сделал несколько суть.Я надеюсь, что они работают.

index.html

https://gist.github.com/GeorgeFlorian/d52ed6fb10e4beaf8f64ef5edef2a78b

login.css

https://gist.github.com/GeorgeFlorian/8d976c512e5ddbc1a5506cc35a0326a2

Arduino IDE Sketch

https://gist.github.com/GeorgeFlorian/d0b6ff502675ef7599aa74d8d8aa706f

Теперь я хотел бы иметь возможность ввести SSID и пароль в их соответствующие входные данные, нажать кнопку «Войти», сохранить их в файле только для чтения внутрифлэш-память ESP32, подключите ESP32 к соответствующей беспроводной сети и обслуживайте другую веб-страницу из флэш-памяти.

Я не упоминал об использовании JavaScript или PhP, потому что понятия не имею, какой следуетиспользовать или если они даже работают таким образом.

Кроме того, вместо файла, доступного только для чтения, может быть небольшая база данных, хранящая только несколько беспроводных сетей?

Спасибо!Извините за длинный пост.

1 Ответ

0 голосов
/ 01 февраля 2019

Я никогда не сталкивался с ESP32 или веб-сервисами, работающими на микроконтроллерах, но в основном я пишу веб-сервисы и приложения для жизни.

Вы можете использовать JavaScript для чтения значений формы и отправки HTTP-запросав отдельную конечную точку для хранения значений имени пользователя и пароля, но HTML уже поддерживает формы .

Входные теги, которые вы сейчас используете, работают с формами.Все, что вам нужно сделать, это добавить элемент формы вокруг ваших входных данных, который определяет, как кодировать и передавать значения формы, и в какую конечную точку их отправлять.Браузер позаботится обо всем остальном, когда вы нажмете кнопку отправки: 

<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 может считывать значения формы для вас, поэтому все, что вам нужно сделатьэто реализовать правильный обработчик на вашем сервере: 

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");
});
...