Spracovávanie web formulárov serverovo s Node.js a Express

V dnešnom návode vám ukážem, ako prijímať formulárne údaje na serveri pomocou Node.js a Express. Spoločne vytvoríme jednoduchý server a prejdeme potrebné kroky na vytvorenie formulárov, ktoré odosielajú údaje na tento server. Tento návod je určený pre tých, ktorí majú základné pochopenie JavaScriptu a Node.js a chcú rozšíriť svoje zručnosti v oblasti webdevelopmentu.

Najdôležitejšie zistenia:

• Základy vytvorenia jednoduchého servera Node.js s Expressom
• Nastavenie projektového adresára a inštalácia potrebných balíčkov
• Vytvorenie HTML súboru na zobrazenie a použitie formulárov
• Spracovanie odoslaných údajov zo strany servera

Postup krok za krokom

Aby sme mohli spracovávať prichádzajúce formulárne údaje, musíme najprv vytvoriť server. Preto začneme vytvorením nového projektu Node.js.

Otvorte svoj editor, napríklad Visual Studio Code, a spustite terminál. Alternatívne môžete použiť bežný terminál. Uistite sa, že máte Node.js nainštalovaný vo vašom počítači.

Prejdite do vášho hlavného adresára a vytvorte nový podadresár pre vašu serverovú aplikáciu. Navrhujem nazvať adresár „FormServerApp“.

Prejdite do novovytvoreného adresára a inicializujte nový projekt Node.js príkazom npm init. Budete vyzvaní k zadaniu niektorých informácií, ako je názov projektu, verzia a súbor vstupného bodu. Môžete prijať predvolené hodnoty alebo zadávať vlastné.

Po vytvorení projektu uvidíte v adresári súbor package.json. Tento súbor obsahuje všetky metadáta vášho projektu. Teraz musíme nainštalovať Express, preto spustíme príkaz npm install express.

Po dokončení inštalácie skontrolujte v súbore package.json, či je Express uvedený v závislostiach. Je dôležité sa uistiť, že inštalácia prebehla úspešne, predtým než budete pokračovať.

Teraz vytvoríme nový súbor s názvom index.js, ktorý bude slúžiť ako vstupný bod našej aplikácie. Tento súbor bude obsahovať hlavnú logiku pre náš Express server.

Na začiatku môžete vykonať skúšobný test jednoducho pridaním console.log("FormServer"); do súboru index.js a spustením s node index.js, aby ste sa uistili, že všetko funguje.

Teraz je čas importovať Express do vášho súboru index.js. Pridajte potrebný kód na import Expressu a vytvorte aplikáciu Express. Tu je jednoduchý kód na inicializáciu aplikácie Express a počúvanie na určenom porte.

Uistite sa, že server beží na určenom porte, napríklad 3000. Skontrolujte, či aplikácia správne funguje otvorením prehliadača a zadaním localhost:3000. Malo by sa zobraziť „Hello World“.

Pre podporu formulárov vo vašej aplikácii teraz potrebujeme súbor index.html, ktorý bude obsahovať HTML štruktúru pre naše formuláre. Najprv vytvorte nový adresár s názvom „public“. Do neho umiestnite súbor index.html.

V súbore index.html môžete jednoducho vložiť základnú HTML štruktúru s formulárom. Formulár neskor odosle údaje na server.

Na poskytovanie statických súborov (HTML, CSS, JS) cez server Express použite metódu app.use() na nastavenie zložky "public" ako statický adresár. Takto môže prehliadač požiadať o súbor index.html, keď zadáte localhost:3000/index.html.

Ak spustíte server a načítate index.html v prehliadači, mali by ste byť schopní správne zobraziť formulár. Keď vyplníte a odošlete formulár, nič sa však nestane, pretože sme ešte neimplementovali serverovú logiku.

V ďalšom kroku sa budeme venovať spracovaniu formulárnych údajov na strane servera. To znamená, že musíme pridať trasu, ktorá prijme a spracuje údaje odoslané formulárom. Buďte pripravení na ďalšie kroky pri rozvoji vášho webová aplikácie a pridávaní funkcionalít!

Zhrnutie

V tomto návode ste sa naučili, ako aktivovať jednoduchý server s Node.js a Express. Zoznámili ste sa s základmi vytvárania projektu Node.js, inštaláciou závislostí a začiatkom s HTML formulármi. Tieto kroky sú rozhodujúce pre spracovanie web formulárov na serveri.