Share
Express er et populært Node.js webramme. Blant sin funksjonalitet er det et omslag for ruting. Express Router hjelper i opprettelsen av rutehåndterere. I denne opplæringen lærer du hvordan du arbeider med Express Router.
La oss komme i gang.
Opprett en ny katalog for søknaden din. Kjør kommandoen for å initialisere npm i katalogen du nettopp opprettet.
npm init -y
Den eneste avhengigheten du trenger er uttrykkelig, så fortsett og installer den.
npm installere - lagre ekspress
På slutten, din package.json-fil skal se slik ut.
# package.json "name": "express-router", "versjon": "1.0.0", "beskrivelse": "", "main": "index.js", "scripts" : "echo" Feil: ingen test oppgitt \ "&& avslutte 1", "nøkkelord": [], "forfatter": "", "lisens": "ISC" ^ 4.16.2 "
Opprett nå en ny fil kalt index.js, som vil være din oppføringsfil som angitt i din package.json.
For nå trenger du bare et grunnleggende oppsett som dette:
Accentsconagua
# index.js const express = kreve ('express') const app = express () app.listen (3000, () => console.log ('Server som kjører på port 3000'))Start med å lage noen grunnleggende ruter som jeg har under.
# index.js ... const router = express.Router () // 1 router.get ('/', (req, res) => // 2 res.send ('Dette er hjemmesiden!')) router .post ('/ contact', (req, res) => // 3 res.send ('Dette er kontaktsiden med en POST-forespørsel')) app.use ('/', router) // 4 ... '/'. Hvis du ikke klarer å montere en bane på denne mellomprogramvaren, blir den utført for hver forespørsel som gjøres til appen.La oss si at du hadde koden nedenfor i stedet.
app.use ('/ bruker', ruteren)Dette vil samsvare med alle følgende: /brukerprofil, bruker / profil / redigere, bruker / dashbord / artikkel / vis, og så videre.
I den ovennevnte koden tilkoblet du en rutemetode til en forekomst av Express Router. Rutemetoden er avledet fra en av HTTP-metodene og knyttet til forekomsten av Express Routeren som du gjorde.
Express støtter følgende rutemetoder som samsvarer med HTTP-metoder: få, post, sette, hode, slette, opsjoner, spor, kopiere, låse, mkcol, bevege seg, purge, låse opp, rapportere, mkactivity, Sjekk ut, slå sammen, m-søk, gi beskjed, abonnere, Avslutte abonnementet, lapp, og Søke.
Det er en rutemetode app.all () som ikke er avledet fra noen HTTP-metode. Denne rutemetoden blir lastet for funksjoner på en spesifisert bane for alle forespørselsmetoder.
Si at du har koden nedenfor i søknaden din.
app.all ('/ books', (req, res) => res.send ('Dette åpner bokdelen'))Dette vil bli utført for forespørsler til "/ bøker" når du bruker GET, POST, PUT, eller noen HTTP-forespørselsmetode.
En rutebane brukes til å definere et sluttpunkt der forespørsler kan gjøres. Det gjør det med kombinasjonen av en forespørselsmetode. I Express kan ruteveier være strengmønstre eller vanlige uttrykk.
Her er eksempler du kan legge til i index.js fil.
# index.js router.get ('/ om', (req, res) => res.send ('Denne ruten vil passe til / om')) router.get ('/ profile.txt', ( req, res) => res.send ('Denne ruten vil matche til /profile.txt'))La oss se en rutebane med strengemønstre.
router.get ('/ ab + xy', (req, res) => // 1 res.send ('ab + xy')) router.get ('/ ab (xy)? z' , res) => // 2 res.send ('/ ab (xy)? z'))Disse brukes til å fange verdier som er angitt på en bestemt posisjon i nettadressen. De kalles URL-segmenter. Verdiene fanget blir gjort tilgjengelige i req.params objekt, bruk navnet på ruteparameteren som er angitt i banen som nøklene til verdiene.
Her er et eksempel.
Hvis du har en rutebane som ligner dette i søknaden din: / brukere /: userId / artikler /:artic
Den forespurte nettadressen vil se slik ut: http: // localhost: 3000 / users / 19 / articles / 104
I req.params vil følgende være tilgjengelig: "userId": "19", "bookId": "104"
Gå videre og opprett en ny rute i søknaden din, ved hjelp av ruteveien ovenfor.
router.get ('/ users /: userId / articles /: articleId', (req, res) => res.send (req.params))Start serveren din og pek nettleseren din til http: // localhost: 3000 / users / 19 / articles / 104. Du vil se req.params objekt som vises i nettleseren din.
Navnet på ruteparametrene må bestå av ordtegn ([A-Za-z0-9_]).
La oss ta det videre!
Si at du vil ha en rutebane som heter / Brukere /: navn, hvor brukernavnet er sendt inn i nettadressen, og programmet viser navnet sammen med en streng. Hvordan tror du det kan oppnås?
Gå videre og prøv det på egenhånd først.
Her er hvordan ruten skal se ut.
router.get ('/ users /: name', (req, res) => res.send ('Velkommen, $ req.params.name!'))Når du besøker http: // localhost: 3000 / users / vivian, bør du se Velkommen, vivian! vises i nettleseren.
La oss se hvordan du oppretter en påloggingsrute i Express. Innloggingsruter krever to handlinger på en enkelt rutebane. Handlingene vil bli differensiert av rutemetoden som brukes. Slik ser det ut.
router.get ('/ login', (req, res) => res.send ('Dette skal føre til innloggingsskjemaet')) router.post ('/ login', (req, res) => res.send ('Dette brukes til å behandle skjemaet'))Etter å ha gjort dette, bør butikkskjemaet ditt ha en handling hvis verdi er ruten som er definert med HTTP POST-metoden. Slik ser det ut.
Når innleveringsknappen på skjemaet blir klikket, blir den angitte ruteren kalt. Forskjellen mellom begge rutene som angitt ovenfor er HTTP POST. Slik bestemmer søknaden hvilken som er ansvarlig for å håndtere dataene som sendes gjennom skjemaet.
Et annet aspekt der dette kan oppleves, er i området for redigering og oppdatering av ressurser.
app.route () kan brukes til å lage en kjede av rutehåndterere for en bestemt rutebane.
Bruk eksempelet på påloggingsruten, her er hvordan du skal gjøre bruk av app.route ().
app.route ('/ login') .get ((res, req) => res.send ('Dette er skal føre til påloggingsskjemaet')) .post ((res, req) => res. send ('Dette brukes til å behandle skjemaet'))Du kan legge til flere rutehåndterere enn vi har over.
På dette punktet bør du vite hvordan ruting fungerer i Express. Du har lært hvordan du konfigurerer grunnleggende ruting, og også hvordan du arbeider med rutemetoder og stier. Du så hvordan du kan bruke ruteparametere og hente verdier sendt via nettadressen.
Hvis du leter etter flere JavaScript-ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.
Med denne kunnskapen kan du gå videre for å bygge et Express-program med komplisert ruting.
