Эксперимент 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="text" name="duty" value="<=VALUE=>">
  8.             <input type="submit" value="Send">
  9.         </form>
  10.     </body>
  11. </html>

Сохрани эту страницу в корне файловой системы микроконтроллера под именем page2.html

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

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

Exp61.py
  1. from micropyserver import MicroPyServer
  2. import time
  3. from machine import Pin, PWM
  4. import network
  5. import gc
  6. _init()
  7. gc.collect()
  8.  
  9. Led = Pin(13, Pin.OUT)
  10. pwmLed = PWM(Led)
  11.  
  12. wlan_id = "Wi-Fi_Name"
  13. wlan_pass = "Wi-Fi_Password"
  14.  
  15. wlan = network.WLAN(network.STA_IF)
  16. wlan.active(True)
  17. wlan.connect(wlan_id, wlan_pass)
  18. time.sleep(1)
  19.  
  20. while wlan.isconnected() == False:
  21.     pass
  22.  
  23. print('Device IP:', wlan.ifconfig()[0])
  24.  
  25.  
  26. def index(request, params):
  27.     duty = '512'
  28.     if ('duty' in params):
  29.         duty = params['duty']
  30.         pwmLed.duty(int(duty))
  31.  
  32.  
  33.     html_file = open("page2.html")
  34.     html = html_file.read()
  35.  
  36.     html = html.replace('<=VALUE=>', duty)
  37.  
  38.     html_file.close()
  39.     server.send(html, content_type="Content-Type: text/html")
  40.  
  41.  
  42. server = MicroPyServer()
  43. server.add_route("/", index)
  44. server.start()

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

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

  1.     html = html.replace('<=VALUE=>', duty)

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