Domáca automatizácia pomocou portálu pre vlastnú potrebu: 9 krokov

Obsah:

Krok 1: Počiatočné vyhlásenia
Krok 2: Html kód pre klientske rozhranie tj. Prihlasovacia stránka
Krok 3: Použitie metód WebServer.arg () a WebServer.on ()
Krok 4: Ak používateľ zadá nesprávne poverenia
Krok 5: Ako pridať obrázok na webovú stránku.
Krok 6: Aké súčasti potrebujeme …
Krok 7: Pripojenia.
Krok 8: Teraz vyskúšajte a užívajte si …
Krok 9: Kód je tu.

2025 Autor: John Day | [email protected]. Naposledy zmenené: 2025-01-13 06:58

Domáca automatizácia pomocou portálu pre vlastníctvo

Tu vytvoríme veľmi zaujímavý projekt automatizácie domácnosti založenej na Captive Portal pomocou nodeMCU od začiatku … Takže, začnime..

Krok 1: Počiatočné vyhlásenia

Deklarujte IO piny nodeMCU, aby vykonali akciu, súbory záhlavia a kód na vytvorenie servera DNS.. zobrazené na obrázku..

Krok 2: Html kód pre klientske rozhranie tj. Prihlasovacia stránka

Ako je znázornené na obrázku, deklarujte html kód v reťazcovej premennej, ktorú pošleme koncovému používateľovi na overenie prístupového kódu.

*Na zachytenie údajov zadaných používateľom tu používame panel ukotvenia a značku href

*Značka Anchor sa v zásade používa na pridanie ďalšej webovej stránky na webovú stránku a značka href definuje cieľ odkazu.

*Ale tu dostávame údaje zadané používateľom do poľa Prístupový kód prostredníctvom ukotvovacej tably a značky href …

Ako spomeniem dva spôsoby, ako zachytiť vstup z webového rozhrania do našich prostriedkov, koniec programátorov.

Krok 3: Použitie metód WebServer.arg () a WebServer.on ()

Ako som už spomenul v predchádzajúcom kroku, poviem vám dve rôzne metódy..

1) Použitím metódy webServer.arg ():

Tu určujeme atribút automatického zaostrovania spolu s prvkom, ako je znázornené na obrázku, automatické zaostrovanie robí to, že je to booleovský atribút, keď je pravdivý, znamená to, že prítomný zaisťuje, že vstupný prvok sa pri načítaní stránky zaostrí.

a potom na objekt servera zavoláme metódu args (). Táto metóda vráti počet parametrov dotazu, ktoré boli odovzdané na server HTTP, a podľa toho použije podmienené príkazy na vykonanie akcií.

2) Použitím atribútu a href:

Tu špecifikujeme naše ovládacie prvky (ako tlačidlá) v rámci a priradíme reťazec, znak, odkaz, ktorý chcete validovať pomocou podmienených príkazov, a potom zavoláme webServer.on (), aby sme dostali vstup na validáciu.

Ako je znázornené..

Krok 4: Ak používateľ zadá nesprávne poverenia

Čo som urobil, jednoducho zmeňte existujúci kód prihlasovacej stránky a pridajte novú hlavičku informujúcu, že používateľ zadal nesprávne poverenie.

Ak sú prihlasovacie údaje nesprávne, najskôr ich overte a presmerujte používateľa na novú upravenú prihlasovaciu stránku s chybovým hlásením.

Ako je znázornené..

Krok 5: Ako pridať obrázok na webovú stránku.

Je to veľmi jednoduché, pretože tu neukladáme naše obrázky na fyzické úložisko, aby sme poskytli cestu k načítaniu tohto obrázku, ktorú zvyčajne robíme v prípade html stránky.

čo teda robíme, je jednoducho previesť naše obrázky na base64 a vložiť ich do kódu stránky, ako je to znázornené..