Virkelig, virkelig grundlæggende routing i Node.js med Express

Målet med denne historie er kort at forklare, hvordan routing fungerer i Express, mens man bygger en enkel - meget enkel - Node-app.

Vi bruger også EJS, en skabelonmotor, der "lader dig generere HTML-markering med almindelig JavaScript", ifølge deres hjemmeside. Dybest set vil det lade os oprette HTML-sider, der kan variere afhængigt af den anmodning klienten fremsætter. Vi bruger ikke denne sidste funktion, men den er fantastisk. I slutningen af ​​denne artikel finder du nogle ressourcer, hvor du kan lære mere.

Hvad er ruting? (I 2-ish linjer)

Lad os først og fremmest tage et hurtigt (virkelig hurtigt) blik på, hvad routing er:

en eller anden måde

Det tager dybest set brugeren (eller nogle data) fra et sted til et andet. Det sted er ruten. Jeg sagde, at jeg skulle gøre det hurtigt.

Oprettelse af projektet

Vi skal bygge et smukt websted for at lære, hvordan routing fungerer i Express. Tjek det ud:

Sejt, ikke? Men det er alt, hvad vi har brug for i øjeblikket.

Lad os først oprette projektet og installere pakkerne. Kør bare følgende på kommandolinjen:

npm install expressnpm install ejs

Du kan desuden tilføje dash dash-gem (jeg skriver - som " dash", fordi Medium automatisk formaterer det, og det ser ikke godt ud til dette formål) for at gemme det i din package.json- fil. Men hvordan dette fungerer er en historie for en anden dag.

Derefter kræver vi Express og indstiller visningsmotoren til EJS i vores app.js- fil som følger:

var express = require('express');var app = express();app.set('view engine', 'ejs');

Vi inkluderer også følgende linje, så vores app lytter til anmodninger:

app.listen(3000);

Håndtering af GET-anmodninger

Tillykke, alt er klar til at håndtere anmodninger! Der er flere typer anmodninger i HTTP, men vi håndterer kun GET-anmodninger, der bruges til at hente data fra serveren. For at håndtere denne form for anmodning i Express bruger vi følgende metode:

app.get('/about', function(req, res) { res.render('about');});

Lad os se på, hvad der sker her. Vi fortæller vores server, at når som helst nogen skriver et sted på webstedet.com/omout , ønsker vi at udløse en funktion. Denne funktion tager to parametre, req (anmodning) og res (svar). Ved hjælp af svarobjektet gengiver vi om-siden .

For at dette skal fungere, bliver vi nødt til at oprette en side, der hedder about.ejs i HTML. Vi placerer det også i en mappe kaldet visninger inde i vores projektmappe. Dette er den mappe, hvor Express vil se for at gengive visningen. Her har du mega-komplekset om siden, vi bruger til dette eksempel:

Pæn! Men hvad hvis brugeren ikke skriver en rute? Ligesom vi gør det meste af tiden, et sted på webstedet.com ? Nå, virkelig let. Skift / omkring til bare /, og gengiv den side, du kan lide:

app.get('/', function(req, res) { res.render('home');});

Håndtering af ikke-eksisterende ruter

Men hvad hvis nogen skriver en rute, der ikke findes? Vi vil sandsynligvis ikke have en standardfejlside, der skal vises. I stedet ønsker vi en brugerdefineret, cool fejlside.

Den gode nyhed er, at det er ekstremt let at lave en med Express. Udskift blot ruteparameteren i get-metoden med en stjerne, og gengiv din egen fejlside som sådan:

app.get('*', function(req, res) { res.render('error');});

Prøver det!

Lad os endelig køre vores server fra kommandolinjen (forudsat at serveren hedder app.js )

node-app

og se om det fungerer! Lad os skrive navnet på vores server ( localhost , da det er en lokal server, der kører på vores computer) og porten ( 3000 i dette tilfælde) i vores browser:

lokal vært: 3000

Fantastiske!

Yderligere læsning

Du kan lære alt hvad du behøver at vide om ruting i Express-guiden, og der er også mange nyttige ting på EJS-webstedet!

Jeg håber, at denne artikel var nyttig for dig. Hvis det var, bedes du efterlade en kommentar og klappe den op!

God kodning ... Eller glad routing, tror jeg!