Эксперимент 61. Подмена данных в веб-странице

В прошлом эксперименте мы научились создавать простые веб-страницы с формой для отправки данных на сервер. На странице было текстовое поле, в которое можно было ввести значение от 0 до 1023. После ввода числа и нажатия на кнопку Send происходила отправка данных из формы на сервер. Сервер принимал эти данные, изменял состояние светодиода, вновь считывал из файла page.html содержимое и вновь отправлял его в браузер клиенту. Таким образом после отправки данных сервер отправлял нам ту же самую страницу и мы могли ввести новое значение в текстовое поле и снова отправить.

Все хорошо, кроме одного — страница каждый раз загружалась в браузер в своем первозданном виде. В ней мы изначально прописали значение текстового поля по- умолчанию 512. И каждый раз после отправки данных в текстовом поле снова находилось число 512 вне зависимости от того что мы туда вводили. Это не очень удобно. Было бы здорово, если бы после ввода числа и отправки формы нам возвращалась бы страница с тем числом, которые мы ввели туда в прошлый раз. Это позволило бы нам видеть текущее значение яркости светодиода.

Чтобы это сделать нам необходимо заменять данные в веб странице. Изначально мы прописали в ней жестко 

            <input type="text" name="duty" value="512">

Теперь нам нужно подумать как вместо 512 выводить каждый раз другое значение, то, которое вводил пользователь. Сделать это не сложно, достаточно заменить 512 на специальную метку. А перед выводом страницы в браузер производить поиск метки в тексте и ее замену на нужное число. Сделаем вот так:

page2.html
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h2>Input led duty between 0 and 1023</h2>
  6.         <form action="/">
  7.             <input type="number" name="duty" min="0" max="1023" value="<=VALUE=>">
  8.             <input type="submit" value="Send">
  9.         </form>
  10.     </body>
  11. </html>

Как видно, мы заменили жестко прописанное число 512 на метку ⇐VALUE⇒. Теперь перед выводом этой страницы в браузер нам нужно производить поиск с ее тексте ⇐VALUE⇒ и замену этой метки на реальное число.

Теперь новый код программы:

Exp61.ino
  1. #include <ESP8266WiFi.h>
  2. #include <ESP8266WebServer.h>
  3.  
  4. #define WIFI_NAME     "WiFi_Name"
  5. #define WIFI_PASSWORD "WiFi_Password"
  6. #define PIN_LED 13 
  7.  
  8. ESP8266WebServer server(80);
  9.  
  10. void indexPage() {
  11.   int duty = 512;
  12.   if (server.hasArg("duty")) duty = server.arg("duty").toInt(); 
  13.   analogWrite(PIN_LED, duty);
  14.  
  15.   String page = "<!DOCTYPE html>";
  16.   page += "<html>";
  17.   page += "<head>";
  18.   page += "</head>";
  19.   page += "<body>";
  20.   page += "<h2>Input led duty between 0 and 1023</h2>";
  21.   page += R"(<form action="/">)";
  22.   page += R"(<input type="number" name="duty" min="0" max="1023" value="<=VALUE=>">)";
  23.   page += R"(<input type="submit" value="Send">)";
  24.   page += "</form>";
  25.   page += "</body>";
  26.   page += "</html>";
  27.  
  28.   page.replace("<=VALUE=>", String(duty));
  29.   server.send(200, "text/html", page); 
  30. }
  31.  
  32. void setup() {
  33.   Serial.begin(9600);
  34.   Serial.println();
  35.   pinMode(PIN_LED, OUTPUT);
  36.   analogWriteRange(1024);
  37.   analogWrite(PIN_LED, 0);
  38.  
  39.   Serial.print("Connecting to WiFi"); 
  40.   WiFi.mode(WIFI_STA);                                         
  41.   WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
  42.   while (WiFi.status() != WL_CONNECTED) {
  43.     Serial.print(".");
  44.     delay(500);
  45.   }
  46.   Serial.println();
  47.   Serial.println("WiFi connected");
  48.   Serial.print("IP address: ");
  49.   Serial.println(WiFi.localIP());
  50.  
  51.   server.on("/", indexPage);
  52.   server.begin(); 
  53. }
  54. void loop() {
  55.   server.handleClient(); 
  56. }

Первым делом в коде программы нужно заменить WiFi_Name на имя нужной сети, а WiFi_Password на пароль от нее.

По сравнению с кодом прошлого эксперимента появилась одна строка 

  1.   page.replace("<=VALUE=>", String(duty));

Для замены метки на данные мы применили метод replace(что_меняем, на_что_меняем). Теперь после отправки данных из формы нам вернется веб-страница с таким же значением, которое мы вводили перед отправкой.