===== Эксперимент 61. Подмена данных в веб-странице =====
В прошлом эксперименте мы научились создавать простые веб-страницы с формой для отправки данных на сервер. На странице было текстовое поле, в которое можно было ввести значение от 0 до 1023. После ввода числа и нажатия на кнопку Send происходила отправка данных из формы на сервер. Сервер принимал эти данные, изменял состояние светодиода, вновь считывал из файла page.html содержимое и вновь отправлял его в браузер клиенту. Таким образом после отправки данных сервер отправлял нам ту же самую страницу и мы могли ввести новое значение в текстовое поле и снова отправить.
Все хорошо, кроме одного — страница каждый раз загружалась в браузер в своем первозданном виде. В ней мы изначально прописали значение текстового поля по- умолчанию 512. И каждый раз после отправки данных в текстовом поле снова находилось число 512 вне зависимости от того что мы туда вводили. Это не очень удобно. Было бы здорово, если бы после ввода числа и отправки формы нам возвращалась бы страница с тем числом, которые мы ввели туда в прошлый раз. Это позволило бы нам видеть текущее значение яркости светодиода.
Чтобы это сделать нам необходимо заменять данные в веб странице. Изначально мы прописали в ней жестко
Теперь нам нужно подумать как вместо 512 выводить каждый раз другое значение, то, которое вводил пользователь. Сделать это не сложно, достаточно заменить 512 на специальную метку. А перед выводом страницы в браузер производить поиск метки в тексте и ее замену на нужное число. Сделаем вот так:
Input led duty between 0 and 1023
Сохрани эту страницу в корне файловой системы микроконтроллера под именем page2.html
Как видно, мы заменили жестко прописанное число 512 на метку ''<=VALUE=>''. Теперь перед выводом этой страницы в браузер нам нужно производить поиск с ее тексте ''<=VALUE=>'' и замену этой метки на реальное число.
Теперь новый код программы:
from micropyserver import MicroPyServer
import time
from machine import Pin, PWM
import network
import gc
_init()
gc.collect()
Led = Pin(13, Pin.OUT)
pwmLed = PWM(Led)
wlan_id = "Wi-Fi_Name"
wlan_pass = "Wi-Fi_Password"
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(wlan_id, wlan_pass)
time.sleep(1)
while wlan.isconnected() == False:
pass
print('Device IP:', wlan.ifconfig()[0])
def index(request, params):
duty = '512'
if ('duty' in params):
duty = params['duty']
pwmLed.duty(int(duty))
html_file = open("page2.html")
html = html_file.read()
html = html.replace('<=VALUE=>', duty)
html_file.close()
server.send(html, content_type="Content-Type: text/html")
server = MicroPyServer()
server.add_route("/", index)
server.start()
Первым делом в коде программы нужно заменить ''Wi-Fi_Name'' на имя нужной сети, а ''Wi-Fi_Password'' на пароль от нее.
По сравнению с кодом прошлого эксперимента появилась одна строка
html = html.replace('<=VALUE=>', duty)
Для замены метки на данные мы применили оператор ''replace(что_меняем, на_что_меняем)''. Теперь после отправки данных из формы нам вернется веб-страница с таким же значением, которое мы вводили перед отправкой.