ExpressJS-routering begrijpen

Invoering

Express is een populair web framework van Node.js. Onder de functionaliteit biedt het een wrapper voor Routing. De Express Router helpt bij het maken van routehandlers. In deze zelfstudie leert u hoe u met de Express Router kunt werken.

Laten we beginnen.

Maak een nieuwe map voor uw toepassing. Voer de opdracht uit om npm te initialiseren in de map die u zojuist hebt gemaakt.

npm init -y

De enige afhankelijkheid die u nodig hebt, is uitdrukkelijk, dus ga je gang en installeer het.

npm install --save express

Aan het einde ziet uw pakket.json-bestand er als volgt uit.

# package.json "name": "express-router", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "echo \" Fout: geen test opgegeven \ "&& exit 1", "keywords": [], "author": "", "license": "ISC", "dependencies": "express": " ^ 4.16.2 "

Maak nu een nieuw bestand met de naam index.js, dat uw invoerbestand zal zijn zoals vermeld in uw package.json.

Voor nu heb je gewoon een basis-setup nodig zoals deze:

# index.js const express = require ('express') const app = express () app.listen (3000, () => console.log ('Server draait op poort 3000'))

Basisroutering

Begin met het maken van een aantal basisroutes zoals ik hieronder heb.

# index.js ... const router = express.Router () // 1 router.get ('/', (req, res) => // 2 res.send ('Dit is de startpagina!')) router .post ('/ contact', (req, res) => // 3 res.send ('Dit is de contactpagina met een POST-aanvraag')) app.use ('/', router) // 4 ...

Een exemplaar van de Express Router is gemaakt. De instantie is ingesteld op een variabele genaamd router. Deze variabele wordt gebruikt wanneer u een route wilt maken.
Er is een nieuwe route gedefinieerd voor de GET-methode naar de hoofdmap van de toepassing. Het is gekoppeld aan het exemplaar van de Express Router-klasse.
Er is een nieuwe route gedefinieerd voor de POST-methode naar de contactpagina van de toepassing. Het is gekoppeld aan het exemplaar van de Express Router-klasse.
Dit koppelt middleware aan die wordt gebruikt om je routes af te handelen. Hier vertelt u uw app dat u gebruik wilt maken van de router (dit is het exemplaar van de Express Router) voor elk verzoek dat aan de app is gedaan en dat overeenkomt met het pad '/'. Als u geen pad op deze middleware koppelt, wordt deze uitgevoerd voor elk verzoek dat aan de app wordt gedaan.

Laten we zeggen dat u de code hieronder had.

app.use ('/ user', router)

Dit komt overeen met het volgende: /gebruikersprofiel, user / profile / bewerken, user / dashboard / article / view, enzovoorts.

Routemethoden

In de bovenstaande code hebt u een routemethode gekoppeld aan een exemplaar van Express Router. De routemethode is afgeleid van een van de HTTP-methoden en als bijlage gekoppeld aan het exemplaar van de Express Router.

Express ondersteunt de volgende routeringsmethoden die overeenkomen met HTTP-methoden: krijgen, post, leggen, hoofd, verwijderen, opties, spoor, kopiëren, slot, MKCOL, verhuizing, zuivering, ontsluiten, verslag doen van, mkactivity, uitchecken, samensmelten, m-search, verwittigen, abonneren, Afmelden, lap, en zoeken.

Er is een routeringsmethode app.all () die niet is afgeleid van een HTTP-methode. Deze routeringsmethode wordt geladen voor functies op een opgegeven pad voor alle verzoekmethoden.

Stel dat u de onderstaande code in uw toepassing heeft.

app.all ('/ books', (req, res) => res.send ('This accesses the book section'))

Dit wordt uitgevoerd voor aanvragen naar "/ books" wanneer u GET, POST, PUT of een HTTP-verzoekmethode gebruikt.

Routepaden

Een routepad wordt gebruikt om een eindpunt te definiëren waar verzoeken kunnen worden gedaan. Dit gebeurt met de combinatie van een verzoekmethode. In Express kunnen routepaden string-patronen of reguliere expressies zijn.

Hier zijn voorbeelden die u aan uw kunt toevoegen index.js het dossier.

# index.js router.get ('/ about', (req, res) => res.send ('Dit routepad komt overeen met / about')) router.get ('/ profile.txt', ( req, res) => res.send ('Deze route komt overeen met /profile.txt'))

Laten we een routepad bekijken met behulp van tekenreekspatronen.

router.get ('/ ab + xy', (req, res) => // 1 res.send ('ab + xy')) router.get ('/ ab (xy)? z', (requ , res) => // 2 res.send ('/ ab (xy)? z'))

De route komt overeen abxy, abbxy, abbbxy, enzovoorts.
De route komt overeen /abz en /abxyz.

Route parameters

Deze worden gebruikt om waarden vast te leggen die op een bepaalde positie in de URL zijn opgegeven. Ze worden URL-segmenten genoemd. De gevangen waarden worden beschikbaar gesteld in de req.params object, waarbij de naam van de routeparameter die in het pad is opgegeven, de sleutels van de waarden is.

Hier is een voorbeeld.

Als u een vergelijkbaar routetraject in uw toepassing hebt: / Users /: userId / artikelen /:articleID

De gevraagde URL ziet er als volgt uit: http: // localhost: 3000 / users / 19 / articles / 104

In de req.params is het volgende beschikbaar: "userId": "19", "bookId": "104"

Ga je gang en maak een nieuwe route in je applicatie, gebruikmakend van het bovenstaande routepad.

router.get ('/ users /: userId / articles /: articleId', (req, res) => res.send (req.params))

Start uw server en wijs uw browser naar http: // localhost: 3000 / users / 19 / articles / 104. Je zult het zien req.params object weergegeven in uw browser.

De naam van de routeparameters moet uit woordtekens bestaan ([A-Za-z0-9_]).

Laten we verder gaan!

Stel dat u een routepad wilt hebben / Users /: naam, waar de naam van de gebruiker in de URL wordt doorgegeven en de toepassing de naam samen met een tekenreeks weergeeft. Hoe denk je dat dat kan worden bereikt??

Ga je gang en probeer het eerst zelf uit.

Dit is hoe de route eruit zou moeten zien.

router.get ('/ users /: name', (req, res) => res.send ('Welcome, $ req.params.name!'))

Wanneer u http: // localhost: 3000 / users / vivian bezoekt, zou u het moeten zien Welkom, vivian! weergegeven in de browser.

Aanmeldroutes

Laten we eens kijken hoe we een inlogroute in Express kunnen creëren. Uw aanmeldingsroutes vereisen twee acties op een enkel routepad. De acties worden gedifferentieerd door de gebruikte routemethode. Hier is hoe het eruit zal zien.

router.get ('/ login', (req, res) => res.send ('Dit moet leiden naar het inlogformulier')) router.post ('/ login', (req, res) => res.send ('Dit wordt gebruikt bij het verwerken van het formulier'))

Nadat u dit hebt gedaan, moet uw winkelformulier een actie hebben waarvan de waarde de route is die is gedefinieerd met de HTTP POST-methode. Hier is hoe het eruit zou moeten zien.

Wanneer op de knop Verzenden van het formulier wordt geklikt, wordt de opgegeven router gebeld. Het verschil tussen beide routepaden zoals hierboven vermeld, is de HTTP POST. Op deze manier bepaalt de applicatie welke verantwoordelijk is voor de verwerking van de gegevens die door het formulier worden doorgegeven.

Een ander aspect waar dit kan worden ervaren, is op het gebied van het bewerken en bijwerken van bronnen.

app.route ()

app.route () kan worden gebruikt om een keten van routehandlers voor een specifiek routepad te maken.

Aan de hand van het voorbeeld van de inlogroute, kunt u hier gebruik van maken app.route ().

app.route ('/ login') .get ((res, req) => res.send ('Dit moet leiden naar het inlogformulier')) .post ((res, req) => res. send ('Dit wordt gebruikt bij het verwerken van het formulier'))

U kunt meer routehandlers toevoegen dan hierboven.

Conclusie

Op dit moment moet u weten hoe routing werkt in Express. U hebt geleerd hoe u basisroutering instelt en ook hoe u met routemethoden en paden kunt werken. U zag hoe u routeparameters kunt gebruiken en waarden kunt ophalen die via de URL zijn verzonden.

Als u op zoek bent naar aanvullende JavaScript-bronnen om te studeren of te gebruiken in uw werk, bekijk dan wat we beschikbaar hebben op Envato Market.

Met deze kennis kunt u verder gaan met het bouwen van een Express-toepassing met complexe routering.

Code