Täna õpetuses näitan sulle, kuidas saad vormiandmeid serveris Node.js-i ja Express-i abil vastu võtta. Me loome koos lihtsa serveri ja käime läbi vajalikud sammud, et luua vorme, mis saadavad andmeid sellele serverile. See juhend on mõeldud kõigile, kellel on põhiline arusaam JavaScriptist ja Node.js-ist ning kes soovivad laiendada oma oskusi veebiarenduse valdkonnas.
Peamised teadmised:
- Põhiteadmised lihtsa Node.js-i serveri loomiseks Express-iga
- Projektikataloogi seadistamine ja vajalike pakettide installimine
- HTML-faili loomine vormide kuvamiseks ja kasutamiseks
- Serveripoolne töötlemine saadetud andmetega
Juhised samm-sammult
Esmalt peame seadistama serveri, et töödelda saabuvaid vormiandmeid. Seega alustame uue Node.js-i projekti loomisest.
Ava oma redaktor, näiteks Visual Studio Code, ja ava terminal. Võid kasutada ka tavalist terminali. Veendu, et Node.js on sinu arvutisse installitud.
Navigeeri oma põhikataloogi ja loo uus alamkataloog oma serveri rakenduse jaoks. Soovitan nimetada kataloogi "FormServerApp".
Mine loodud kataloogi ja alusta uut Node.js-i projekti käsu npm init abil. Sul palutakse sisestada mõningaid andmeid, nagu projekti nimi, versioon ja sisenemispunkti fail. Võid kasutada vaikeväärtusi või sisestada oma.
Pärast projekti loomist näed kataloogis package.json-faili. See fail sisaldab kõiki sinu projekti metaandmeid. Nüüd peame installima Express-i, seega jooksutame käsku npm install express.
Pärast installimise lõpetamist kontrolli package.json-i, kas Express on sõltuvustena loetletud. Veendu, et paigaldamine õnnestus enne jätkamist.
Nüüd loome uue faili nimega index.js, mis toimib meie rakenduse sisenemispunktina. See fail sisaldab põhilogikat meie Express-i serveri jaoks.
Alustuseks võid teha lühikese proovitesti, sisestades index.js-faili console.log("FormServer"); ning käivitades selle node index.js abil, et veenduda, et kõik toimib.
Nüüd on aeg kasutada Express-i oma index.js-failis. Lisa vajalik kood Express-i importimiseks ja loo Expressi rakendus. Siin on lihtne kood Expressi rakenduse algatamiseks ja konkreetsele pordile kuulamiseks.
Veendu, et suunad serveri kindlale pordile, nt 3000, ja lase serveril töötada. Kontrolli, kas rakendus toimib õigesti, avades brauseris aadressi localhost:3000. Sinu peaksid nägema väljundit „Hello World“.
Vormide toe lisamiseks oma rakendusse vajame nüüd index.html-faili, mis sisaldab meie vormi HTML-struktuuri. Alustuseks loo uus kaust nimega „public“. Sinna paigutad index.html-faili.
Index.html-failis võid lisada lihtsa HTML-raami vormiga. See vorm saadab hiljem serverile saadetud andmed.
Staatiliste failide (HTML, CSS, JS) Express serveri kaudu esitamiseks kasuta meetodit app.use(), et määrata "public" kausta staatilise kausta. Nii saab brauser küsida index.html faili, kui kutsud esile localhost:3000/index.html.
Kui nüüd käivitad serveri ja laed brauseris index.html, peaksid olema võimeline vormi korrektselt kuvama. Kui täidad ja edastad vormi, midagi ei juhtu, sest me ei ole veel serveripoole loogikat rakendanud.
Järgmises sammus keskendume vormiandmete serveripoole töötlemisele. See tähendab, et peame lisama marsruudi, mis võtab vastu ja töötleb vormi poolt saadetud andmed. Ole valmis järgmiste sammude jaoks, et jätkata oma veebirakenduse arendamist ja funktsioonide lisamist!
Kokkuvõte
Selles õpetuses õppisid, kuidas seadistada lihtne server Node.js ja Express abil. Sa oled õppinud alustama Node.js projekti loomist, sõltuvuste installimist ja HTML-vormidega tutvumist. Need sammud on olulised veebivormide serveripoole töötlemiseks.
Sagedased küsimused
Kuidas installeerida Node.js?Node.js saab alla laadida ja installida ametlikult veebisaidilt.
Mis on Express?Express on paindlik Node.js veebirakenduste raamistik, mis pakub mitmekülgseid funktsioone veebi- ja mobiilirakenduste jaoks.
Kuidas saata oma vormiandmed serverile?Saate luua HTML-vormi ja saata andmed Fetch või AJAX abil serveripoolele.
