Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
products:laboratory_iot:exp61 [2020/06/18 19:03] – создано labuser29products:laboratory_iot:exp61 [2024/12/06 16:33] (текущий) – labuser30
Строка 1: Строка 1:
-===== Эксперимент 61. Подмена данных в веб- странице =====+===== Эксперимент 61. Подмена данных в веб-странице ===== 
 + 
 +В прошлом эксперименте мы научились создавать простые веб-страницы с формой для отправки данных на сервер. На странице было текстовое поле, в которое можно было ввести значение от 0 до 1023. После ввода числа и нажатия на кнопку Send происходила отправка данных из формы на сервер. Сервер принимал эти данные, изменял состояние светодиода, вновь считывал из файла page.html содержимое и вновь отправлял его в браузер клиенту. Таким образом после отправки данных сервер отправлял нам ту же самую страницу и мы могли ввести новое значение в текстовое поле и снова отправить. 
 + 
 +Все хорошо, кроме одного — страница каждый раз загружалась в браузер в своем первозданном виде. В ней мы изначально прописали значение текстового поля по- умолчанию 512. И каждый раз после отправки данных в текстовом поле снова находилось число 512 вне зависимости от того что мы туда вводили. Это не очень удобно. Было бы здорово, если бы после ввода числа и отправки формы нам возвращалась бы страница с тем числом, которые мы ввели туда в прошлый раз. Это позволило бы нам видеть текущее значение яркости светодиода. 
 + 
 +Чтобы это сделать нам необходимо заменять данные в веб странице. Изначально мы прописали в ней жестко 
 + 
 +<code html> 
 +            <input type="text" name="duty" value="512"> 
 +</code> 
 + 
 +Теперь нам нужно подумать как вместо 512 выводить каждый раз другое значение, то, которое вводил пользователь. Сделать это не сложно, достаточно заменить 512 на специальную метку. А перед выводом страницы в браузер производить поиск метки в тексте и ее замену на нужное число. Сделаем вот так: 
 + 
 +<file html page2.html[enable_line_numbers="2", start_line_numbers_at="1"]> 
 +<html> 
 +    <head> 
 +    </head> 
 +    <body> 
 +        <h2>Input led duty between 0 and 1023</h2> 
 +        <form action="/"> 
 +            <input type="text" name="duty" value="<=VALUE=>"> 
 +            <input type="submit" value="Send"> 
 +        </form> 
 +    </body> 
 +</html> 
 +</file> 
 + 
 +<WRAP center round important 60%> 
 +Сохрани эту страницу в корне файловой системы микроконтроллера под именем page2.html 
 +</WRAP> 
 + 
 +Как видно, мы заменили жестко прописанное число 512 на метку ''<=VALUE=>''. Теперь перед выводом этой страницы в браузер нам нужно производить поиск с ее тексте ''<=VALUE=>'' и замену этой метки на реальное число. 
 + 
 +Теперь новый код программы: 
 +<file python Exp61.py[enable_line_numbers="2", start_line_numbers_at="1"]> 
 +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() 
 +</file> 
 + 
 +<WRAP center round important 60%> 
 +Первым делом в коде программы нужно заменить ''Wi-Fi_Name'' на имя нужной сети, а ''Wi-Fi_Password'' на пароль от нее. 
 +</WRAP> 
 + 
 +По сравнению с кодом прошлого эксперимента появилась одна строка 
 +<code python[enable_line_numbers="2", start_line_numbers_at="36"]> 
 +    html = html.replace('<=VALUE=>', duty) 
 +</code> 
 + 
 +Для замены метки на данные мы применили оператор ''replace(что_меняем, на_что_меняем)''. Теперь после отправки данных из формы нам вернется веб-страница с таким же значением, которое мы вводили перед отправкой.