===== Эксперимент 61. Подмена данных в веб-странице =====
В прошлом эксперименте мы научились создавать простые веб-страницы с формой для отправки данных на сервер. На странице было текстовое поле, в которое можно было ввести значение от 0 до 1023. После ввода числа и нажатия на кнопку Send происходила отправка данных из формы на сервер. Сервер принимал эти данные, изменял состояние светодиода, вновь считывал из файла page.html содержимое и вновь отправлял его в браузер клиенту. Таким образом после отправки данных сервер отправлял нам ту же самую страницу и мы могли ввести новое значение в текстовое поле и снова отправить.
Все хорошо, кроме одного — страница каждый раз загружалась в браузер в своем первозданном виде. В ней мы изначально прописали значение текстового поля по- умолчанию 512. И каждый раз после отправки данных в текстовом поле снова находилось число 512 вне зависимости от того что мы туда вводили. Это не очень удобно. Было бы здорово, если бы после ввода числа и отправки формы нам возвращалась бы страница с тем числом, которые мы ввели туда в прошлый раз. Это позволило бы нам видеть текущее значение яркости светодиода.
Чтобы это сделать нам необходимо заменять данные в веб странице. Изначально мы прописали в ней жестко
Теперь нам нужно подумать как вместо 512 выводить каждый раз другое значение, то, которое вводил пользователь. Сделать это не сложно, достаточно заменить 512 на специальную метку. А перед выводом страницы в браузер производить поиск метки в тексте и ее замену на нужное число. Сделаем вот так:
Input led duty between 0 and 1023
Как видно, мы заменили жестко прописанное число 512 на метку ''<=VALUE=>''. Теперь перед выводом этой страницы в браузер нам нужно производить поиск с ее тексте ''<=VALUE=>'' и замену этой метки на реальное число.
Теперь новый код программы:
#include
#include
#define WIFI_NAME "WiFi_Name"
#define WIFI_PASSWORD "WiFi_Password"
#define PIN_LED 13
ESP8266WebServer server(80);
void indexPage() {
int duty = 512;
if (server.hasArg("duty")) duty = server.arg("duty").toInt();
analogWrite(PIN_LED, duty);
String page = "";
page += "";
page += "";
page += "";
page += "";
page += "
Input led duty between 0 and 1023
";
page += R"(";
page += "";
page += "";
page.replace("<=VALUE=>", String(duty));
server.send(200, "text/html", page);
}
void setup() {
Serial.begin(9600);
Serial.println();
pinMode(PIN_LED, OUTPUT);
analogWriteRange(1024);
analogWrite(PIN_LED, 0);
Serial.print("Connecting to WiFi");
WiFi.mode(WIFI_STA);
WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(500);
}
Serial.println();
Serial.println("WiFi connected");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", indexPage);
server.begin();
}
void loop() {
server.handleClient();
}
Первым делом в коде программы нужно заменить ''WiFi_Name'' на имя нужной сети, а ''WiFi_Password'' на пароль от нее.
По сравнению с кодом прошлого эксперимента появилась одна строка
page.replace("<=VALUE=>", String(duty));
Для замены метки на данные мы применили метод ''replace(что_меняем, на_что_меняем)''. Теперь после отправки данных из формы нам вернется веб-страница с таким же значением, которое мы вводили перед отправкой.