Tīmekļa formas servera pusē apstrādāt izmantojot Node.js un Express

Šodienas padomā es tev parādīšu, kā jūs varat saņemt formas datus uz servera, izmantojot Node.js un Express. Kopā mēs izveidosim vienkāršu serveri un norādīsim nepieciešamos soļus, lai izveidotu formas, kas nosūtīs datus uz šo serveri. Šis ceļvedis ir domāts visiem, kuriem ir pamatzināšanas par JavaScript un Node.js un vēlas paplašināt savas prasmes webizstrādes jomā.

Galvenās atziņas:

• Pamatprasmes, lai izveidotu vienkāršu Node.js serveri ar Express
• Projekta direktorija iestatīšana un nepieciešamo pakotņu uzstādīšana
• HTML faila izveide formas rādīšanai un izmantošanai
• Datu apstrāde servera pusē, kas nosūtīti

Pamācība soļo pa solim

Vispirms mums jāizveido serveris, lai apstrādātu ienākošos formas datus. Tāpēc sākam ar jauna Node.js projekta izveidi.

Atver savu redaktoru, piemēram, Visual Studio Code, un atver terminālu. Vai arī vari izmantot parasto terminālu. Pārliecinies, ka tava datorā ir instalēts Node.js.

Navigē uz savu galveno direktoriju un izveido jaunu apakšdirektoriju savai servera lietotnei. Iesaku nosaukt direktoriju "FormServerApp".

Veici pāreju uz jaunizveidoto direktoriju un inicializē jaunu Node.js projektu, izmantojot npm init komandu. Būsi lūgts ievadīt dažas informācijas, piemēram, projekta nosaukumu, versiju un ieejas punkta failu. Vari pieņemt noklusētos vērtības vai ievadīt savus.

Pēc projekta izveidošanas redzēsi package.json failu direktorijā. Šis fails satur visus projekta metadatus. Tagad mums ir jāinstalē Express, tāpēc izpildi npm install express komandu.

Pēc instalācijas pārbaudi package.json, vai Express ir sarakstā ar atkarībām. Ir svarīgi, lai instalācija būtu veiksmīga, pirms turpini tālāk.

Tagad izveidosim jaunu failu ar nosaukumu index.js, kas būs mūsu lietotnes ieejas punkts. Šis fails saturēs galveno loģiku mūsu Express serverim.

Sākumā vari veikt īsu pārbaudi, ierakstot console.log("FormServer") index.js failā un to izpildīt ar node index.js, lai pārliecinātos, ka viss darbojas pareizi.

Tagad ir laiks izmantot Express tavā index.js failā. Pievieno nepieciešamo kodu, lai importētu Express un izveidotu Express lietotni. Šeit ir vienkāršs kods, lai inicializētu Express lietotni un klausītos uz portu.

Pārliecinies, ka serveris tiek palaists uz noteiktu portu, piemēram, 3000. Pārliecinies, vai lietotne darbojas pareizi, atverot pārlūkprogrammā localhost:3000. Vajadzētu redzēt izvadi "Hello World".

Lai atbalstītu formas savā lietotnē, tagad mums ir jāizveido index.html fails, kurš saturēs HTML struktūru mūsu formai. Vispirms izveido jaunu mapi ar nosaukumu "public". Ievieto tur index.html failu.

Index.html failā vienkārši ievieto vienkāršu HTML struktūru ar formu. Šī forma vēlāk nosūtīs datus uz serveri.

Lai nodrošinātu statiskos failus (HTML, CSS, JS) ar Express serveri, izmantojiet metodi app.use(), lai iestatītu "public" mapes kā statisku direktoriju. Tādējādi pārlūks var pieprasīt index.html failu, atverot localhost:3000/index.html.

Tālākajā solī pievērsīsimies formu datu servera pusējai apstrādei. Tas nozīmē, ka mums jāpievieno maršruts, kas saņem un apstrādā formas nosūtītos datus. Esiet gatavs turpmākiem soļiem, lai attīstītu savu tīmekļa lietotni un pievienotu funkcionalitāti!

Kopsavilkums

Šajā pamācībā jūs esat mācījušies, kā izveidot vienkāršu serveri ar Node.js un Express. Jūs esat iepazinušies ar pamatiem, lai izveidotu Node.js projektu, instalētu atkarības un iepazītos ar HTML formām. Šie soļi ir būtiski, lai apstrādātu tīmekļa formas servera pusē.