Node.js Express.js Framework-handleiding

In deze tutorial bestuderen we het Express-framework. Dit framework is zo ontworpen dat het fungeert als een minimaal en flexibel Node.js-webapplicatie-framework, dat een robuuste set functies biedt voor het bouwen van single-page, multi-page en hybride webapplicaties.

Wat is Express.js?

Express.js is een Node.js-webapplicatieserverframework dat specifiek is ontworpen voor het bouwen van single-page, multi-page en hybride webapplicaties.

Het is uitgegroeid tot het standaard serverframework voor Node.js. Express vormt de backend van wat bekend staat als de MEAN-stack.

Express voegt routing en middleware toe aan de kern van Node.js HTTP. streams en API's voor gebeurtenissen.

De MEAN is gratis en open source JavaScript softwarestack voor het bouwen van dynamische websites en webapplicaties, bestaande uit de volgende componenten;

1) MongoDB — De standaard NoSQL-database

2) Express.js — Het standaard framework voor webapplicaties

3) angularjs - De JavaScript MVC-framework gebruikt voor webapplicaties

4) Node.js — Framework dat gebruikt wordt voor schaalbare server-side en netwerkapplicaties.

Het Express.js-framework maakt het heel eenvoudig om een ​​applicatie te ontwikkelen die kan worden gebruikt om meerdere soorten verzoeken af ​​te handelen, zoals de GET-, PUT- en POST- en DELETE-verzoeken.

Express installeren en gebruiken

Express wordt geïnstalleerd via de Node Package Manager. Dit kan worden gedaan door de volgende regel uit te voeren in de opdrachtregel

npm install express

Bovenstaande opdracht vraagt ​​de Node Package Manager om de benodigde express-pakketten te downloaden. modules en installeer ze dienovereenkomstig.

Versie-opmerking: npm installeert nu Express 5.2; veel projecten gebruiken nog steeds Express 4. Beide versies voeren de onderstaande voorbeelden uit op een ondersteunde Node.js-release.

Laten we ons nieuw geïnstalleerde Express-framework gebruiken en een eenvoudige “Hello World”-applicatie maken.

Onze applicatie gaat een eenvoudige applicatie maken. servermodule die luistert op poortnummer 3000. In ons voorbeeld, als er via de browser een verzoek wordt gedaan op dit poortnummer, stuurt de serverapplicatie een 'Hello World'-antwoord naar de client.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Uitleg:

1. In onze eerste coderegel gebruiken we de require-functie om de ‘express-module’ op te nemen.
2. Voordat we de express-module kunnen gaan gebruiken, moeten we er een object van maken.
3. Hier maken we een callbackfunctie aan. Deze functie wordt aangeroepen wanneer iemand naar de root van onze webapplicatie navigeert, namelijk http://localhost:3000. De callbackfunctie wordt gebruikt om de tekst 'Hello World' naar de webpagina te sturen.
4. In de callback-functie sturen we de string “Hello World” terug naar de client. De parameter 'res' wordt gebruikt om inhoud terug te sturen naar de webpagina. Deze 'res'-parameter is iets dat wordt geleverd door de 'request'-module om het mogelijk te maken inhoud terug te sturen naar de webpagina.
5. Vervolgens gebruiken we de listen-functie om onze serverapplicatie te laten luisteren naar clientverzoeken op poort 3000. U kunt hier elke beschikbare poort opgeven.

Als de opdracht succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

Van de uitvoer,

• Dat is duidelijk te zien als je naar de website gaat. URL Als je localhost op poort 3000 gebruikt, zie je de tekst 'Hello World' op de pagina verschijnen.
• Omdat we in onze code specifiek hebben aangegeven dat de server moet luisteren op poort 3000, kunnen we de uitvoer bekijken wanneer we naar deze pagina navigeren. URL.

Wat zijn routes?

Een enkele hoofdroute is slechts het beginpunt.

Routing bepaalt de manier waarop een applicatie reageert op een clientverzoek aan een specifiek eindpunt.

Een client kan bijvoorbeeld een GET-, POST-, PUT- of DELETE-HTTP-verzoek indienen voor diverse doeleinden. URL zoals de exemplaren die hieronder worden getoond;

http://localhost:3000/Books
http://localhost:3000/Students

In het bovenstaande voorbeeld,

• Als er een GET-verzoek wordt gedaan voor de eerste URLIn dat geval zou het antwoord idealiter een lijst met boeken moeten zijn.
• Als het GET-verzoek voor de tweede keer wordt gedaan URLIn dat geval zou het antwoord idealiter een lijst met studenten moeten zijn.
• Dus gebaseerd op de URL Wanneer een verzoek wordt ingediend, wordt een andere functionaliteit op de webserver aangeroepen en wordt het antwoord dienovereenkomstig naar de client verzonden. Dit is het concept van routing.

Elke route kan een of meer afhandelingsfuncties hebben, die worden uitgevoerd wanneer de route wordt gematcht.

De algemene syntaxis voor een route wordt hieronder weergegeven

app.METHOD(PATH, HANDLER)

Waarin,

1) app is een exemplaar van de express-module

2) METHODE is een HTTP-verzoekmethode (GET, POST, PUT of DELETE)

3) PATH is een pad op de server.

4) HANDLER is de functie die wordt uitgevoerd wanneer de route wordt gematcht.

⚠️ Express 5 Opmerkingen: Deze signatures zijn ongewijzigd, maar app.del() is app.delete() geworden, res.sendfile() is res.sendFile() geworden en wildcards hebben nu namen nodig zoals /*splat.

Laten we eens kijken naar een voorbeeld van hoe we routes in Express kunnen implementeren. In ons voorbeeld maken we 3 routes aan, zoals:

1. Een /Node-route die de string “Tutorial on Node” weergeeft als deze route wordt geopend
2. Een /Angular-route die de string “Tutorial on Angular” weergeeft als deze route wordt bezocht
3. Een standaardroute / die de tekst "Welkom bij" zal weergeven. Guru99 handleidingen.”

Onze basiscode blijft hetzelfde als eerdere voorbeelden. Het onderstaande fragment is een add-on om te laten zien hoe routering wordt geïmplementeerd.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Uitleg:

1. Hier definiëren we een route als de URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLDe functie heeft 2 parameters.
   • De belangrijkste parameter die we zullen gebruiken is de parameter 'res', die kan worden gebruikt om informatie terug te sturen naar de klant.
   • De parameter 'req' bevat informatie over het verzoek dat wordt gedaan. Soms kunnen aanvullende parameters worden verzonden als onderdeel van het verzoek dat wordt gedaan, en daarom kan de parameter 'req' worden gebruikt om de aanvullende parameters te vinden die worden verzonden.
2. We gebruiken de verzendfunctie om de string “Tutorial on Node” terug te sturen naar de client als de Node-route is gekozen.
3. Hier definiëren we een route als de URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. We gebruiken de verzendfunctie om de string “Tutorial on Angular” terug te sturen naar de klant als de Angular-route is gekozen.
5. Dit is de standaardroute die wordt gekozen wanneer men naar de root van de applicatie navigeert: http://localhost:3000. Wanneer de standaardroute wordt gekozen, verschijnt de boodschap "Welkom bij Guru"99 handleidingen" worden naar de klant verzonden.

Als de opdracht succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

Van de uitvoer,

• Dat is duidelijk te zien als je naar de website gaat. URL Als je localhost op poort 3000 gebruikt, zie je de tekst 'Welcome to GuruEr worden 99 tutorials op de pagina weergegeven.
• Omdat we in onze code hebben aangegeven dat onze standaardwaarde URL zou dit bericht weergeven.

Ga vervolgens naar /Node.

Van de uitvoer,

• Je kunt zien dat als de URL Als de URL is gewijzigd naar /Node, wordt de betreffende Node-route gekozen en wordt de tekst "Tutorial on Node" weergegeven.

Ga vervolgens naar /Angular.

Van de uitvoer,

• Je kunt zien dat als de URL Als de URL is gewijzigd naar /Angular, wordt de betreffende Node-route geselecteerd en wordt de tekst "Tutorial on Angular" weergegeven.

Voorbeeldwebserver die express.js gebruikt

Uit ons bovenstaande voorbeeld hebben we gezien hoe we op basis van routing kunnen bepalen welke output we moeten weergeven. Dit type routing wordt in de meeste moderne webapplicaties gebruikt. Een ander belangrijk aspect van een webserver is het gebruik van templates in Node.js.

Bij het snel en eenvoudig ontwikkelen van Node.js-applicaties is het gebruik van templates een gemakkelijke en snelle manier. Er zijn veel frameworks beschikbaar voor het maken van templates. In ons geval nemen we het Jade-framework als voorbeeld.

Jade wordt geïnstalleerd via de Node Package Manager. Dit kan door de volgende regel in de commandoregel uit te voeren.

npm installeer jade

Met bovenstaand commando verzoekt u de Node Package Manager om de benodigde Jade-modules te downloaden en te installeren.

NOTITIE: In de nieuwste versie van Node is jade verouderd. Gebruik in plaats daarvan pug.

⚠️ Modern equivalent: installeren mopshondHernoem index.jade naar index.pug en stel app.set('view engine','pug') in. Het jade-pakket ontvangt geen updates; de onderstaande stappen worden nog steeds uitgevoerd.

Laten we ons zojuist geïnstalleerde Jade-framework gebruiken om een ​​paar basissjablonen te maken.

Stap 1) De eerste stap is het maken van een Jade-sjabloon. Maak een bestand met de naam index.jade en voeg de onderstaande code toe. Zorg ervoor dat u het bestand in de map "views" aanmaakt.

1. Hier specificeren we dat de titel van de pagina wordt gewijzigd in de waarde die wordt doorgegeven wanneer deze sjabloon wordt aangeroepen.
2. We specificeren tevens dat de tekst in de header-tag wordt vervangen door de tekst die in de Jade-template wordt doorgegeven.

Hieronder volgt de applicatiecode die dit weergeeft.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Uitleg:

1. Het eerste wat in de applicatie moet worden gespecificeerd, is de "view engine" die zal worden gebruikt om de templates weer te geven. Omdat we Jade gaan gebruiken om onze templates weer te geven, specificeren we dit dienovereenkomstig.
2. De renderfunctie wordt gebruikt om een ​​webpagina weer te geven. In ons voorbeeld renderen we de sjabloon (index.jade) die eerder is gemaakt.
3. We geven de waarden door van “GuruDe waarden "title" en "message" worden respectievelijk vervangen door de parameters "title" en "message" zoals gedefinieerd in de index.jade-sjabloon.

Als de opdracht succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

Van de uitvoer,

• We kunnen zien dat de paginatitel wordt ingesteld op “Guru99” en de koptekst van de pagina wordt ingesteld op “Welkom.”
• Dit komt door de Jade-template die in onze Node.js-applicatie wordt aangeroepen.

Veelgestelde vragen