Pārvaldiet veidlapas, izmantojot Express

Viens no vistiešākajiem veidiem, kā mēs varam iegūt lietotāja datus tīmekļa lietojumprogrammās, ir veidlapas, lai gan ir daudz mehānismu, lai šie dati sasniegtu mūsu loģiku un lietojumprogrammu kontrolierus, bet dziļi tiem jāievēro tie paši noteikumi, kas veidlapām HTML, izmantojiet kādu metodi HTTP lai nosūtītu informāciju.
Tas padara spēju apstrādāt un apstrādāt veidlapas ļoti svarīgas, ja vēlamies izveidot pilnvērtīgas tīmekļa lietojumprogrammas ar funkcijām, kuras var ņemt vērā un kuras attīsta mūsu idejas.
1- Lai veiktu šo apmācību, mums jāatbilst dažām iepriekšējām prasībām, vispirms mums ir jābūt instalētai Node.js funkcionāls, tad mums ir jābūt projektam ar EkspressNav svarīgi, ka tai nav mapes struktūras, taču mums ir nepieciešams, lai ietvars būtu pieejams vietā.
2- Mums ir jābūt pamatjēdzieniem par npm, un no HTML, jo, lai gan jēdzieni ir izskaidroti ļoti vienkāršā veidā, ir pamatprincipi, kas nav izskaidroti, piemēram, kas ir tags vai kas ir HTML atribūts.
3- Visbeidzot, mums ir nepieciešams pārlūks un teksta redaktors, lai mēs varētu rakstīt un apstiprināt mūsu lietojumprogrammu.
Pirms iepazīties ar operāciju Ekspress Lai apstrādātu veidlapas, mums ir jāzina nedaudz padziļināti to pamataspekti, jo tie ir būtiska mūsu lietojumprogrammu veidošanas sastāvdaļa, kad mēs vēlamies vai mums ir nepieciešams iegūt lietotāju datus.
Apskatīsim šo kodu, kurā esam izveidojuši vienkāršu lauka formu, kurā attēloti mūsu iecienītākie augļi.

Jūsu mīļākie augļi:Sūtīt

Pirmkārt, veidlapai jāsastāv no etiķetes, un tajā jābūt vismaz vienam atribūtam metodi tas mūsu pārlūkprogrammai var norādīt veidu, kādā tā mums nosūtīs informāciju POST vai GŪT, kas ir pamata HTTP metodes, mēs varam arī ievietot atribūtu ar nosaukumu darbībaJa tas neeksistē, veidlapa tiks nosūtīta uz to pašu maršrutu, kas to apkalpo, ja tā eksistē, tā tiks nosūtīta uz maršrutu, kas norādīts kā piemēra gadījumā.
Vispārīgās iezīmesMūsu veidlapā visas etiķetes darbojas HTML mēs vēlamies, tomēr svarīgākie ir datu ievadīšanas veidi, piemēram, tipu gadījumā, jo šīs etiķetes un to vērtība ir tās, kas tiks nosūtītas darīšanas laikā Iesniegt kas ir cita veida ievade, kas mums nepieciešama, jo tā ir darbības poga. Mēs saņemsim datus ar nosaukumu, ko esam piešķīruši īpašumiem jams Katrā mūsu izveidotajā laukā ir svarīgi katram laukam ievietot id atribūtu un to, lai tas būtu unikāls, lai varētu manipulēt ar tajā esošajiem elementiem. SAULE elegantā veidā.
Kā mēs redzam formu HTML Neskatoties uz to, ka tas ir ļoti vienkāršs elements, tajā ir vairākas detaļas, kuras ir vērts izcelt, izcelt un paskaidrot, lai izvairītos no neskaidrībām nākotnē.
Pēc veidlapas saņemšanas mums ir daudz iespēju neatkarīgi no izmantotā ietvara Ekspress, Laravel, Djangoutt. Ir process, kas ir labi ievērot, jo tas ir tas, kas paziņos mūsu lietotājam, vai viņa dati ir saņemti, vai tie ir apstrādāti vai ir radusies kļūda. Šo procesu var iedalīt divās grupās - atbilde un novirzīšana.
AtbildeŠajā darbības grupā, tiklīdz lietotājs ir iesniedzis veidlapu un mēs veicam apstrādi, mēs varam nosūtīt atbildi HTML tajā pašā laikā, tas ir, mēs izdrukājam ziņojumu vai izveidojam jaunu skatu, šeit mēs varam jums pateikt, vai dati bija pareizi vai radās kļūda. Šī atbilde var būt tipa AJAX, lai tas tiktu ģenerēts, pilnībā neielādējot lapu vai atkārtoti ielādējot, parādītu jauno skatu vai vienkārši ģenerētu animētu ziņojumu ar JavaScript.
NovirzīšanaŠajā citā grupā, kad esam apstrādājuši mūsu novirzīto informāciju un nosūtījuši lietotāju vai nu uz citu skatu, vai vienkārši uz ekrānu, kur pateicamies viņam par mūsu lietojumprogrammas izmantošanu, tā var šķist tāda pati kā atbilde, tomēr mēs darām nosūtiet lietotāju uz citu mūsu lietojumprogrammas vietu.
Lai sagatavotu mūsu pieteikumu Ekspress Lai apstrādātu veidlapas, mums vispirms jāinstalē spraudnis ar nosaukumu ķermeņa parsētājs, tas mums palīdzēs manipulēt ar datiem, ko mums sūta pārlūks. Lai to izdarītu mūsu konsolē Node.js mums jāizmanto instrukcija:

 npm instalēt-saglabāt ķermeņa parsētāju

Apskatīsim atbildi, ko rada šīs instrukcijas izpilde:

Tad jau mūsu failā app.js vai nosaukumu, ko esam ievietojuši, mums vienkārši jāiekļauj šī starpprogrammatūra, lai palīdzētu mums mijiedarboties:

 app.use (pieprasīt ('body-parser') ());

Tādējādi mēs esam gatavi apstrādāt mūsu veidlapu saturu tieši mūsu lietojumprogrammā Ekspress, Tas var šķist nedaudz sarežģīti, jo citām sistēmām šāda veida instalācija nav nepieciešama Ekspress to dara, lai dotu mums brīvību apstrādāt informāciju, kā mēs vēlamies, tas ir tikai viens ceļš no daudzajiem esošajiem.
Mēs izveidosim veidlapu, kuras funkcija ir iemūžināt lietotāja iecienītākos augļus. Lielākai ērtībai mēs izmantosim to, ko izveidojām iepriekšējā apmācības sadaļā, mūsu mapē, kurā esam instalējuši Ekspress, izveidosim failu ar nosaukumu server.js, app.js vai kādu vārdu mēs gribam likt, tomēr saturs ir svarīgs. Iekšpusē mēs sāksim, pieprasot izmantot izteikt, tad mums jāģenerē lietojumprogrammas objekts, un tam jāizmanto starpprogrammatūra ķermeņa parsētājs.
Definējiet maršrutusNākamajā darbībā mums ir jādefinē maršruti, mūsu gadījumā veidlapas parādīšanai izmantosim saknes maršrutu, tāpēc, tieši piekļūstot mūsu lietojumprogrammai, rezultāts būs tieši redzams, tad mēs izveidosim maršrutu, ko sauc par procesu, kas saņem metodi POST, tas, ko tā darīs, ir saņemt veidlapas datus, lai beidzot izdrukātu a HTML norādot saņemtos datus.
Tas ļaus mums izprast mūsu programmas plūsmu un tādējādi turpmāk apstrādāt sarežģītākas formas. Apskatīsim zemāk izskaidrojamo kodu:

 var express = pieprasīt ('express'); var bodyParser = pieprasīt ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('ports', process.env.PORT || 3001); app.get ('/', funkcija (req, res) {var html = '' + '' + ''+' Jūsu mīļākie augļi: '+' '+'"+"'+' Sūtīt '+''+' '; res.send (html); }); app.post ('/ process', funkcija (req, res) {var fruit = req.body.fruit; var html = 'Jūsu mīļākais auglis ir:' + auglis + '.
'+' Mēģiniet vēlreiz. '; res.send (html); }); app.listen (app.get ('ports'), function () {console.log ('Express sākās vietnē http: // localhost:' + app.get ('port') + '; nospiediet Ctrl-C, lai aizvērtu serveris. ');});

Ar to mēs esam pabeiguši savas lietojumprogrammas izveidi, tagad mēs pārskatīsim, kā to parādīt, jo mums vienkārši jāraksta instrukcija:

 mezgls server.js

Kur server.js Tas ir nosaukums, kuru esam ievietojuši savā lietojumprogrammā, un atkarībā no porta, ko esam ievietojuši, mēs varam redzēt savu veidlapu pārlūkprogrammā:

Protams, tas var būt estētiskāks, izmantojot Bootstrapvai stili CSSTomēr šīs apmācības nolūkos un apjomā tā ir lieliski piemērota veidlapu apstrādes izpratnei. Ja mēs mijiedarbosimies ar to, ierakstot kaut ko laukā un noklikšķinot uz sūtīt, mēs redzēsim, kā mēs nokļūsim savā URL process:

Šajā gadījumā mēs esam atstājuši saiti, lai atgrieztos sākumā, šī apstrāde pieder pie novirzīšanas veida, jo esam nosūtījuši lietotāju uz citu maršrutu un tur saņēmuši viņa vaicājuma rezultātu, protams, mums ir daudz apstiprinājumu šajā piemērā, piemēram, ja tiek nosūtīts tukšs lauks, kā mēs pārbaudām, vai sūtījums ir izgatavots no citas izcelsmes, utt. Tās ir derīgas lietas, taču tās izvairās no apmācības mērķa, mēs tās pieminējam tikai tāpēc, lai jūs zinātu, ka viņu kā programmētāju attīstībai seko citi soļi Ekspress.
Ar to mēs esam pabeiguši šo apmācību, kā mēs redzam Ekspress Mums ir daudz vieglāk, ja mēs pārsūtām informāciju no priekšpuses uz mūsu loģiku, vienkāršota maršrutu apstrāde un starpprogrammatūras izmantošana, lai palīdzētu mums atšifrēt informāciju, padara to perfektu, lai ietaupītu mūsu izstrādes laiku.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu