Cuprins:
- Pasul 1: Declarații inițiale
- Pasul 2: Cod HTML pentru Front End I.e. Pagina de logare
- Pasul 3: Utilizarea metodelor WebServer.arg () și WebServer.on ()
- Pasul 4: dacă utilizatorul tastează acreditări greșite
- Pasul 5: Cum să adăugați o imagine pe pagina dvs. web
- Pasul 6: De ce componente avem nevoie
- Pasul 7: Conexiuni
- Pasul 8: Acum testați și bucurați-vă
- Pasul 9: Codul este aici
2025 Autor: John Day | [email protected]. Modificat ultima dată: 2025-01-13 06:58
Aici, vom crea un proiect foarte interesant de automatizare a casei bazate pe Portal captiv, folosind nodeMCU de la zero.. Deci, să începem..
Pasul 1: Declarații inițiale
Declarați pinii IO ai nodeMCU pentru a efectua acțiuni, fișiere antet și cod pentru crearea serverului DNS … afișat în imagine..
Pasul 2: Cod HTML pentru Front End I.e. Pagina de logare
După cum se arată în imagine, declarați codul html într-o variabilă șir pe care o trimitem utilizatorului final pentru validarea Codului de acces.
* Pentru a prinde datele introduse de utilizator aici, folosim panoul de ancorare și eticheta href
* Practic, eticheta de ancorare este utilizată pentru a adăuga o altă pagină web în cadrul paginii web, iar eticheta href definește destinația linkului.
* Dar, aici primim datele introduse de utilizator în câmpul Cod de acces prin panoul de ancoră și eticheta href …
cum, voi menționa despre două metode de captare a intrării de la interfața web la mijloacele noastre de programare sfârșesc..
Pasul 3: Utilizarea metodelor WebServer.arg () și WebServer.on ()
Așa cum, menționez în pasul anterior, vă voi spune două metode diferite..
1) Folosind metoda webServer.arg ():
Aici, specificăm atributul de focalizare automată împreună cu elementul așa cum se arată în imagine, ceea ce face focalizarea automată este că este un atribut boolean atunci când este adevărat înseamnă prezent, asigură faptul că elementul de intrare se concentrează atunci când pagina se încarcă.
și apoi, apelăm metoda args () pe obiectul server. Această metodă va returna numărul de parametri de interogare care au fost trimiși pe HTTP și vor aplica instrucțiuni condiționale pentru a efectua acțiuni în consecință.
2) Prin utilizarea atributului și href:
Aici, specificăm elementele noastre de control (cum ar fi butoanele) din interior și atribuim un șir, char, link pe care doriți să îl validați folosind instrucțiuni condiționale și apoi apelăm webServer.on () pentru a primi intrarea pentru validare.
Așa cum se arată..
Pasul 4: dacă utilizatorul tastează acreditări greșite
Ceea ce am făcut, pur și simplu schimbați codul de pagină de autentificare existent și adăugați un nou antet prin care informați că utilizatorul a introdus o acreditare greșită..
Mai întâi validați acreditarea dacă este greșită, direcționați utilizatorul către o nouă pagină de conectare editată care afișează mesajul de eroare.
Așa cum se arată..
Pasul 5: Cum să adăugați o imagine pe pagina dvs. web
Este foarte simplu, deoarece aici nu stocăm imaginile într-un spațiu fizic, astfel încât să oferim o cale pentru a prelua acea imagine pe care o facem de obicei în cazul paginii html.
deci ceea ce facem este pur și simplu să ne convertim imaginile în base64 și să le lipim în codul paginii noastre Așa cum se arată..
Pasul 6: De ce componente avem nevoie
1) - nodeMCU
2) - Arduino IDE pentru a bloca nodeMCU
3) fire de jumper (F-2-F)
4) -Modul de reluare
5) -Un smartphone sau laptop activat WiFi pentru testare
Pasul 7: Conexiuni
Adăugați modulul de releu la pinii IO declarați în cod.
Conectați releul la echipamentele electrice pe care doriți să le controlați așa cum se arată în imagine..
Pasul 8: Acum testați și bucurați-vă
Pasul 9: Codul este aici
Vă rugăm să scrieți comentariile dvs. valoroase..