Tvarkykite formas naudodami „Express“

Vienas iš tiesioginių būdų, kaip mes galime gauti naudotojų duomenis žiniatinklio programose, yra formos, nors yra daug mechanizmų, kad šie duomenys pasiektų mūsų logiką ir programų valdytojus, tačiau giliai jie turi laikytis tų pačių taisyklių, kaip ir formos HTML, naudokite tam tikrą metodą HTTP siųsti informaciją.
Todėl gebėjimas apdoroti ir manipuliuoti formomis yra gyvybiškai svarbus, jei norime sukurti išsamias žiniatinklio programas, į kurias būtų galima atsižvelgti ir kurios galėtų plėtoti mūsų idėjas.
1- Norėdami atlikti šią pamoką, turime atitikti kai kuriuos ankstesnius reikalavimus, pirmiausia turime įdiegti Node.js funkcionalus, tada mes turime turėti projektą su EkspresasNesvarbu, kad jame nėra aplanko struktūros, tačiau mums reikia, kad sistema būtų prieinama toje vietoje.
2- Turime turėti pagrindines sąvokas npm, ir HTML, nes nors sąvokos aiškinamos labai paprastai, yra nepaaiškinamų pagrindinių dalykų, pavyzdžiui, kas yra žyma arba kas yra HTML atributas.
3- Galiausiai mums reikia naršyklės ir teksto redaktoriaus, kad galėtume parašyti ir patvirtinti mūsų programą.
Prieš pradėdami pamatyti operaciją Ekspresas Norėdami apdoroti formas, turime šiek tiek nuodugniau žinoti pagrindinius jų aspektus, nes jie yra esminė mūsų programų kūrimo dalis, kai norime ar reikia užfiksuoti vartotojo duomenis.
Pažiūrėkime šį kodą, kuriame sukūrėme paprastą lauko formą, kurioje užfiksuoti mūsų mėgstamiausi vaisiai.

Mėgstamiausias vaisius:Siųsti

Pirmiausia formą turi sudaryti etiketė, kurioje turi būti bent vienas atributas metodas tai gali parodyti mūsų naršyklei būdą, kuriuo ji mums atsiųs informaciją POST arba GET, kurie yra pagrindiniai HTTP metodai, taip pat galime įdėti atributą, vadinamą veiksmasJei to nėra, forma bus išsiųsta tuo pačiu maršrutu, kuris ją aptarnauja; jei ji yra, ji bus išsiųsta tokiu maršrutu, kuris nurodytas kaip pavyzdyje.
Bendrosios savybėsMūsų formoje visos etiketės veikia HTML mes norime, tačiau svarbesni yra duomenų įvedimo būdai, kaip ir tipų atveju, nes šios etiketės ir jų vertė yra tos, kurios bus išsiųstos tuo metu Pateikti tai yra kito tipo įvestis, kurios mums reikia, nes tai yra veiksmų mygtukas. Gausime duomenis su pavadinimu, kurį davėme nuosavybėms yam kiekvieno iš mūsų sukurtų laukų, taip pat svarbu kiekvienam laukui įdėti id atributą ir kad jis būtų unikalus, kad būtų galima manipuliuoti jo elementais. SAULĖ elegantiškai.
Kaip mes matome formą HTML Nepaisant to, kad tai labai paprastas elementas, jame yra keletas detalių, kurias verta pabrėžti, paryškinti ir paaiškinti, kad ateityje nesusipainiotumėte.
Gavę formą, turime daug galimybių, nepriklausomai nuo naudojamos sistemos Ekspresas, Laravelis, Djangoir kt. Yra procesas, kurį gerai sekti, nes tai yra tas, kuris informuos mūsų vartotoją, ar jo duomenys buvo gauti, ar jie buvo apdoroti, ar įvyko klaida. Šį procesą galima suskirstyti į dvi grupes - atsaką ir peradresavimą.
AtsakymasŠioje veiksmų grupėje vartotojui pateikus formą ir atlikus apdorojimą, galime išsiųsti atsakymą HTML tuo pačiu metu, tai yra, spausdiname pranešimą arba sukuriame naują rodinį, čia galime pasakyti, ar duomenys buvo teisingi, ar įvyko klaida. Šis atsakymas gali būti tipinis AJAX, kad jis būtų sukurtas visiškai neįkeliant puslapio arba iš naujo įkeliant parodyti naują rodinį arba tiesiog generuoti animacinį pranešimą su „JavaScript“.
PeradresavimasŠioje kitoje grupėje, kai mes apdorosime peradresuojamą informaciją ir nusiųsime naudotoją į kitą rodinį arba tiesiog į ekraną, kuriame dėkojame jiems už naudojimąsi mūsų programa, tai gali atrodyti taip pat, kaip ir atsakymas, tačiau ką mes darome nusiųskite vartotoją į kitą mūsų programos vietą.
Norėdami paruošti mūsų paraišką Ekspresas Norėdami apdoroti formas, pirmiausia turime įdiegti papildinį pavadinimu kūno analizatorius, tai padės mums manipuliuoti duomenimis, kuriuos mums siunčia naršyklė. Norėdami tai padaryti mūsų konsolėje Node.js turime naudoti instrukciją:

 npm įdiegti-išsaugoti kūno analizatorių

Pažiūrėkime atsakymą, kurį sukuria šios instrukcijos vykdymas:

Tada jau mūsų failo viduje app.js ar pavadinimą, kurį įdėjome, tiesiog turime įtraukti šią tarpinę programinę įrangą, kad padėtų mums sąveikauti:

 app.use (reikalauti ('body-parser') ());

Tuo mes esame pasirengę apdoroti savo formų turinį tiesiogiai mūsų programoje Ekspresas, Tai gali atrodyti šiek tiek sudėtinga, nes kitoms sistemoms tokio tipo diegti nereikia Ekspresas ar tai suteikia mums laisvę apdoroti informaciją taip, kaip norime, tai tik vienas kelias iš daugelio egzistuojančių.
Mes sukursime formą, kurios funkcija bus užfiksuoti vartotojo mėgstamiausius vaisius. Mes naudosime tą, kurią sukūrėme ankstesniame vadovėlio skyriuje, kad būtų lengviau, mūsų aplanke, kuriame įdiegėme Ekspresas, sukurkime failą pavadinimu server.js, app.js ar kokį pavadinimą norime pavadinti, tačiau turinys yra svarbus dalykas. Viduje pradėsime reikalaudami naudoti išreikšti, tada mes turime sukurti programos objektą ir tai turi naudoti tarpinę programinę įrangą kūno analizatorius.
Apibrėžkite maršrutusKitame veiksme turime apibrėžti maršrutus, mūsų atveju formai rodyti naudosime pagrindinį maršrutą, taigi, tiesiogiai pasiekdami mūsų programą, mes turėsime rezultatą tiesiogiai, tada sukursime maršrutą, vadinamą procesu, kuris gauna metodas POST, tai, ką ji padarys, bus gauti formos duomenis ir pagaliau atspausdinti HTML nurodant gautus duomenis.
Tai leis mums suprasti mūsų programos eigą ir ateityje galėsime apdoroti sudėtingesnes formas. Pažiūrėkime žemiau pateiktą kodą:

 var express = reikalauti ('express'); var bodyParser = reikalauti ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('uostas', process.env.PORT || 3001); app.get ('/', funkcija (req, res) {var html = '' + '' + ''+' Mėgstamiausi vaisiai: '+' '+'„+“'+' Siųsti '+'„+“; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html = 'Jūsų mėgstamiausias vaisius:' + vaisius + '.
'+' Bandykite dar kartą. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express pradėtas adresu http: // localhost:' + app.get ('port') + '; paspauskite Ctrl-C, kad uždarytumėte serveris. ');});

Baigę kurti savo programą, dabar peržiūrėsime, kaip ją rodyti, tam tiesiog turime parašyti instrukciją:

 mazgas serveris.js

Kur server.js Tai yra vardas, kurį mes įtraukėme į savo programą ir priklausomai nuo to, kokį prievadą įdėjome, savo formą galime pamatyti naršyklėje:

Žinoma, tai gali būti labiau estetiška, naudojant Bootstrap, arba stilius CSSTačiau šios pamokos tikslais ir apimtimi ji puikiai tinka formų tvarkymui suprasti. Jei su juo bendraujame, ką nors parašę lauke ir spustelėję „Siųsti“, pamatysime, kaip mes pasiekiame URL procesas:

Šiuo atveju mes palikome nuorodą, kad grįžtume į pradžią, šis apdorojimas priklauso peradresavimo tipui, nes mes nusiuntėme naudotoją kitu keliu ir gavome jo užklausos rezultatą, žinoma, yra daug patvirtinimų, kurių mums trūksta šiame pavyzdyje, pvz., jei siunčiamas tuščias laukas, kaip mes patvirtiname, ar siunta siunčiama iš kitos kilmės, ir pan. Jie yra galiojantys dalykai, tačiau jiems nepavyksta pasiekti pamokos tikslo, mes juos paminime tik todėl, kad žinotumėte, jog jų, kaip programuotojų, tobulėjimo eina kiti žingsniai Ekspresas.
Tai baigėme, kaip matome Ekspresas Mums daug lengviau, kai perkeliame informaciją iš „Front-End“ į savo logiką, supaprastintas maršrutų tvarkymas ir tarpinės programinės įrangos naudojimas, padedantis iššifruoti informaciją, leidžia mums sutaupyti kūrimo laiko.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką