Förstå ExpressJS Routing

Introduktion

Express är en populär Node.js webbram. Bland dess funktionalitet är det ett omslag för routing. Express Routern hjälper till att skapa rutthanterare. I denna handledning lär du dig hur du arbetar med Express Router.

Låt oss börja.

Skapa en ny katalog för din ansökan. Kör kommandot för att initiera npm i den katalog du just skapat.

npm init -y

Det enda beroende du behöver är uttryckligt, så fortsätt och installera det.

npm installera - spara express

I slutet ska din paket.json-fil se ut så här.

# package.json "name": "express-router", "version": "1.0.0", "beskrivning": "", "main": "index.js", "scripts" : "echo" Fel: inget test specificerat \ "&& avsluta 1", "sökord": [], "författare": "", "licens": "ISC", "beroenden": "express" ^ 4.16.2 "

Skapa nu en ny fil som heter index.js, som kommer att vara din inloggningsfil enligt vad som anges i din package.json.

För tillfället behöver du bara en grundläggande inställning så här:

# index.js const express = kräver ('express') const app = express () app.listen (3000, () => console.log ('Server som körs på port 3000'))

Grundläggande routing

Börja med att skapa några grundläggande vägar som jag har nedan.

# index.js ... const router = express.Router () // 1 router.get ('/', (req, res) => // 2 res.send ('Detta är hemsidan!')) router post ("/", router) // 4 ... 

1. En förekomst av Express Router skapas. Instansen är inställd på en variabel som kallas router. Denna variabel kommer att användas när du vill skapa en rutt.
2. En ny rutt definieras för GET-metoden till applikationsroten. Den är kopplad till förekomsten av Express Router-klassen.
3. En ny rutt definieras för POST-metoden till programmets kontaktsida. Den är kopplad till förekomsten av Express Router-klassen.
4. Detta monterar lite mellanprogram som används för att hantera dina rutter. Här berättar du för din app att du vill använda routern (som är förekomsten av Express Routern) för varje begäran som görs till appen som motsvarar sökvägen '/'. Om du misslyckas med att montera en sökväg på den här mellanspaken, kommer den att utföras för varje begäran som görs till appen.

Låt oss säga att du hade koden nedan istället.

app.use ('/ user', router)

Detta kommer att matcha alla följande: /användarprofil, användare / profil / redigera, användare / instrumentbräda / artikeln / vy, och så vidare.

Ruttmetoder

I ovanstående kod bifogade du en ruttmetod till en förekomst av Express Router. Ruttmetoden är härledd från en av HTTP-metoderna och kopplad till exemplet av Express Routern som du gjorde.

Express stöder följande routingmetoder som motsvarar HTTP-metoder: skaffa sig, posta, sätta, huvud, radera, alternativ, spår, kopia, låsa, mkcol, flytta, rena, låsa upp, Rapportera, mkactivity, checka ut, sammanfoga, m-sökning, anmäla, prenumerera, säga upp, lappa, och Sök.

Det finns en routing metod app.all () som inte härrör från någon HTTP-metod. Denna routingmetod laddas för funktioner på en angiven sökväg för alla förfrågningsmetoder.

Säg att du har koden nedan i din ansökan.

app.all ('/ books', (req, res) => res.send ('Detta öppnar bokdelen'))

Detta kommer att utföras för förfrågningar till "/ böcker" när du använder GET, POST, PUT eller någon HTTP-begäran metod.

Ruttvägar

En ruttväg används för att definiera en slutpunkt där förfrågningar kan göras. Det gör det med kombinationen av en begäran metod. I Express kan ruttvägar vara strängmönster eller reguljära uttryck.

Här är exempel du kan lägga till i din index.js fil.

# index.js router.get ('/ om', (req, res) => res.send ('Denna ruttväg kommer att matcha till / om')) router.get ('/ profile.txt', ( req, res) => res.send ('Denna rutt kommer att matcha till /profile.txt'))

Låt oss se en ruttväg med strängmönster.

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

1. Ruten kommer att matcha abxy, abbxy, abbbxy, och så vidare.
2. Ruten kommer att matcha /abz och /ABXYZ.

Ruttparametrar

Dessa används för att fånga in värden som anges i en viss position i webbadressen. De kallas URL-segment. De upptagna värdena görs tillgängliga i req.params objekt, med namnet på den ruttparameter som anges i sökvägen som värdena för värdena.

Här är ett exempel.

Om du har en ruttväg som liknar detta i din ansökan: / användare /: användarid / artiklar /:articleId

Den begärda webbadressen kommer att se ut så här: http: // localhost: 3000 / users / 19 / articles / 104

I req.params kommer följande att finnas tillgängligt: "userId": "19", "bookId": "104"

Fortsätt och skapa en ny rutt i din ansökan med hjälp av rutten ovanför.

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

Starta servern och peka webbläsaren till http: // localhost: 3000 / users / 19 / articles / 104. Du kommer att se req.params objekt som visas i din webbläsare.

Ruttparameterns namn måste bestå av ordtecken ([A-Za-z0-9_]).

Låt oss ta det vidare!

Säg att du vill ha en ruttväg kallad / Användare /: namn, där användarens namn skickas till webbadressen och applikationen visar namnet tillsammans med en sträng. Hur tror du det kan uppnås?

Gå vidare och prova själv på egen hand.

Här är hur rutten ska se ut.

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

När du besöker http: // localhost: 3000 / users / vivian, bör du se Välkommen, vivian! visas i webbläsaren.

Inloggningsrutor

Låt oss se hur du skapar en inloggningsväg i Express. Dina inloggningsvägar kräver två handlingar på en enda ruttväg. Åtgärderna kommer att differentieras med den använda ruttenmetoden. Så här ser det ut.

router.get ('/ login', (req, res) => res.send ('Detta ska leda till inloggningsformuläret')) router.post ('/ login', (req, res) => res.send ('Detta används för att bearbeta formuläret'))

Efter detta måste din butikshandling ha en åtgärd vars värde är den väg som definierats med HTTP POST-metoden. Så här ska det se ut.

När inlämningsknappen på formuläret klickas, kallas den angivna routern. Skillnaden mellan båda rutorna som anges ovan är HTTP POST. Så här bestämmer ansökan vilken som är ansvarig för hanteringen av data som skickas via formuläret.

En annan aspekt där detta kan upplevas är inom området för redigering och uppdatering av resurser.

app.route ()

app.route () kan användas för att skapa en kedja av rutthanterare för en specifik ruttväg.

Med hjälp av exemplet på inloggningsvägen, så här är hur du ska använda dig av app.route ().

app.route ('/ login') .get ((res, req) => res.send ('Detta ska leda till inloggningsformuläret')) .post ((res, req) => res. skicka ('Detta används för att bearbeta formuläret'))

Du kan lägga till fler rutthanterare än vad vi har ovan.

Slutsats

Vid den här tiden borde du veta hur routing fungerar i Express. Du har lärt dig hur du konfigurerar grundläggande routing, och hur man arbetar med rutinmetoder och vägar. Du såg hur du använder rutparametrar och hämtar värden som skickas via webbadressen.

Om du letar efter ytterligare JavaScript-resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato Market.

Med denna kunskap kan du gå vidare för att bygga en Express-applikation med komplex routing.