Apdorojimas serverio pusėje naudojant Node.js ir Express su formomis internete

Šiandienos pamokoje parodysiu, kaip gauti formos duomenis serveryje naudojant "Node.js" ir "Express". Kartu sukursime paprastą serverį ir atliksime reikiamus veiksmus, kad sukurtume formas, siunčiančias duomenis į šį serverį. Ši mokomoji programa skirta visiems, kurie turi pagrindines "JavaScript" ir "Node.js" žinias ir nori praplėsti savo žiniatinklio kūrimo įgūdžius.

Pagrindinės žinios:

• Pagrindinės žinios apie paprasto Node.js serverio kūrimą naudojant Express
• Projekto katalogo nustatymas ir reikiamų paketų diegimas
• HTML failo, skirto formoms rodyti ir naudoti, sukūrimas
• Siunčiamų duomenų apdorojimas serverio pusėje

Žingsnis po žingsnio instrukcijos

Pirmiausia turime sukurti serverį, kuris apdorotų gaunamų formų duomenis. Todėl pradedame nuo naujo "Node.js" projekto sukūrimo.

Atidarykite redaktorių, pavyzdžiui, "Visual Studio Code", ir atidarykite terminalą. Taip pat galite naudoti įprastą terminalą. Įsitikinkite, kad jūsų kompiuteryje įdiegtas Node.js.

Pereikite į pagrindinį katalogą ir sukurkite naują pakatalogį savo serverio programai. Siūlau katalogą pavadinti "FormServerApp".

Persikelkite į naujai sukurtą katalogą ir inicializuokite naują "Node.js" projektą naudodami komandą npm init. Jūsų bus paprašyta įvesti tam tikrą informaciją, pavyzdžiui, projekto pavadinimą, versiją ir įvesties taško failą. Galite sutikti su numatytosiomis reikšmėmis arba įvesti savo.

Sukūrę projektą, kataloge pamatysite package.json failą. Šiame faile pateikiami visi jūsų projekto metaduomenys. Dabar reikia įdiegti Express, todėl paleidžiame komandą npm install express.

Baigę diegimą, patikrinkite package.json ir pažiūrėkite, ar "Express" yra įtraukta į priklausomybių sąrašą. Prieš tęsdami įsitikinkite, kad diegimas buvo sėkmingas.

Dabar sukuriame naują failą index.js, kuris bus mūsų programos įvesties taškas. Šiame faile bus pateikta pagrindinė mūsų "Express" serverio logika.

Pradžiai galite atlikti greitą testą, į index.js failą įrašydami console.log("FormServer");; ir vykdydami jį su node index.js, kad įsitikintumėte, jog viskas veikia.

Dabar laikas naudoti "Express" savo index.js faile. Pridėkite reikiamą kodą, kad importuotumėte "Express" ir sukurtumėte "Express" programą. Čia pateikiamas paprastas kodas, skirtas "Express" programai inicializuoti ir klausytis prievado.

Įsitikinkite, kad paleidžiate serverį konkrečiame prievade, pavyzdžiui, 3000. Patikrinkite, ar programa veikia teisingai, naršyklėje paskambinę į localhost:3000. Turėtumėte matyti išvestį "Hello World".

Kad galėtumėte palaikyti savo programos formas, dabar mums reikia index.html failo, kuriame būtų mūsų formos HTML struktūra. Pirmiausia sukurkite naują aplanką pavadinimu "public". Į šį aplanką įdėkite index.html failą.

Į index.html failą galite tiesiog įterpti paprastą HTML struktūrą su forma. Vėliau forma išsiųs į serverį pateiktus duomenis.

Norėdami pateikti statinius failus (HTML, CSS, JS) per "Express" serverį, naudodami metodą app.use() nustatykite aplanką "public" kaip statinį katalogą. Tai leis naršyklei prašyti "index.html" failo, kai skambinsite į localhost:3000/index.html.

Jei dabar paleisite serverį ir naršyklėje įkelsite index.html, formą turėtų būti galima rodyti teisingai. Tačiau, kai užpildysite formą ir ją pateiksite, dar nieko neįvyks, nes dar neįgyvendinome serverio pusės logikos.

Kitame žingsnyje daugiausia dėmesio skirsime formos duomenų apdorojimui serverio pusėje. Tai reiškia, kad turime pridėti maršrutą, kuris priima ir apdoroja formos siunčiamus duomenis. Laukite kitų žingsnių, kad galėtumėte toliau plėtoti savo žiniatinklio programą ir pridėti funkcijų!

Apibendrinimas

Šioje pamokoje sužinojote, kaip sukurti paprastą serverį naudojant Node.js ir Express. Sužinojote Node.js projekto kūrimo, priklausomybių diegimo ir HTML formų naudojimo pradžios pagrindus. Šie žingsniai yra labai svarbūs tvarkant žiniatinklio formas serverio pusėje.