Obdelava spletnih obrazcev na strežni strani z Node.js in Express

Ta vodiču ti bom pokazal, kako sprejeti podatke obrazca na strežniku z Node.js in Express. Skupaj bomo postavili preprost strežnik in preučili potrebne korake za ustvarjanje obrazcev, ki pošiljajo podatke na ta strežnik. Ta navodila so namenjena vsem, ki imajo osnovno razumevanje JavaScripta in Node.js ter bi radi razširili svoje sposobnosti na področju spletnega razvoja.

Najpomembnejši ugotovitvi:

• Temelji za ustvarjanje preprostega Node.js strežnika z Express
• Nastavitev projektnega imenika in namestitev potrebnih paketov
• Ustvarjanje HTML datoteke za prikaz in uporabo obrazcev
• Obdelava podatkov, poslanih s strežnika

Korak za korakom navodila

Najprej moramo postaviti strežnik, ki bo obdelal prihajajoče podatke obrazca. Začnemo z ustvarjanjem novega Node.js projekta.

Odpri svoj urejevalnik, na primer Visual Studio Code, in odpri terminal. Lahko uporabiš tudi navadni terminal. Prepričaj se, da je Node.js nameščen na tvojem računalniku.

Pojdi v svojo glavno mapo in ustvari novo podmapo za svojo strežniško aplikacijo. Predlagam, da ji ime daš "FormServerApp".

Prestopi v novo ustvarjeno mapo in inicializiraj nov Node.js projekt z ukazom npm init. Pozval te bo k vnosu nekaterih informacij, kot so ime projekta, verzija in datoteka začetne točke. Lahko uporabiš privzete vrednosti ali vpišeš svoje.

Po ustvarjanju projekta boš v mapi videl datoteko package.json. Ta datoteka vsebuje vse metapodatke tvojega projekta. Sedaj moramo namestiti Express, zato izvedemo ukaz npm install express.

Po končani namestitvi preveri v datoteki package.json, ali je Express naveden med odvisnostmi. Pomembno je zagotoviti, da je namestitev uspešna, preden nadaljuješ.

Sedaj ustvarimo novo datoteko z imenom index.js, ki bo služila kot začetna točka naše aplikacije. Ta datoteka bo vsebovala glavno logiko za naš Express strežnik.

Sprva lahko narediš kratek preskus tako, da v index.js datoteko zapišeš console.log("FormServer"); in jo izvedeš z node index.js, da preveriš, ali vse deluje.

Sedaj je čas, da uporabiš Express v svoji index.js datoteki. Dodaj zahtevano kodo za uvoz Expressa in ustvari Express aplikacijo. Tukaj je preprost primer kode za inicializacijo Express aplikacije in poslušanje določenega vrat.

Preveri, ali imaš strežnik teči na določenem vratu, na primer 3000. Preveri, ali aplikacija pravilno deluje, tako da v brskalniku odpreš localhost:3000. Moral bi videti izpis "Hello World".

Za podporo obrazcem v tvoji aplikaciji potrebujemo zdaj datoteko index.html, ki vsebuje HTML strukturo za naš obrazec. Najprej ustvari nov mapo z imenom "public". Tja postavi datoteko index.html.

V datoteko index.html preprosto vstavi osnovno HTML strukturo z obrazcem. Obrazec bo kasneje poslal podatke na strežnik.

Za zagotavljanje statičnih datotek (HTML, CSS, JS) prek strežnika Express uporabite metodo app.use(), da določite mapo "public" kot statično mapo. Tako lahko brskalnik zahteva datoteko index.html, ko obiščete localhost:3000/index.html.

Ko zdaj zaženete strežnik in v brskalniku naložite index.html, bi morali biti sposobni pravilno prikazati obrazec. Če izpolnite obrazec in ga pošljete, še ničesar ne bo storilo, saj še nismo implementirali serverjske logike.

V naslednjem koraku se bomo posvetili serverjski obdelavi podatkov obrazca. Kar pomeni, da moramo dodati pot, ki bo sprejela in obdelala podatke, poslane iz obrazca. Pripravite se na naslednje korake, da nadaljujete z razvojem vaše spletne aplikacije in dodajate funkcionalnosti!

Povzetek

V tem vadnici ste se naučili, kako nastaviti preprost strežnik z Node.js in Express. Spoznali ste osnove ustvarjanja projektov Node.js, nameščanje odvisnosti in vstop v HTML-obrazce. Ti koraki so ključni za obdelavo spletnih obrazcev serverjsko.