Node.js Express FrameWork-tutorial – Leer in 10 minuten

Door: James Hartman James Hartman
Hours Bijgewerkt

In deze tutorial bestuderen we het Express-framework. Dit raamwerk is zo gebouwd dat het fungeert als een minimaal en flexibel Node.js-webapplicatieframework, dat een robuuste set functies biedt voor het bouwen van enkele, meerpagina- 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 het standaard serverframework voor node.js geworden. Express is het backend-gedeelte van iets dat bekend staat als de MEAN-stack.

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 standaardframework voor webapplicaties

3) Angular.js - The JavaScript MVC-framework gebruikt voor webapplicaties

4) Node.js – Framework dat wordt gebruikt voor schaalbare server-side- en netwerktoepassingen.

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

Met het bovenstaande commando wordt de Node-pakketbeheerder gevraagd de vereiste express-modules te downloaden en dienovereenkomstig te installeren.

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

Onze applicatie gaat een eenvoudige servermodule maken die luistert op poortnummer 3000. Als in ons voorbeeld via de browser een verzoek wordt gedaan op dit poortnummer, stuurt de serverapplicatie een 'Hallo' Wereld'-antwoord naar de client .

Express installeren en gebruiken

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

Code Verklaring:

  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 callback-functie. Deze functie wordt aangeroepen wanneer iemand naar de root van onze webapplicatie bladert http://localhost:3000 . De callback-functie wordt gebruikt om de string '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 luisterfunctie om onze serverapplicatie te laten luisteren naar clientverzoeken op poort nr. 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:

Express.js

Van de uitvoer,

  • U kunt duidelijk zien dat als u naar de URL van localhost op poort 3000 surft, u de tekst 'Hello World' op de pagina ziet staan.
  • Omdat we in onze code specifiek hebben vermeld dat de server op poort nr. 3000 moet luisteren, kunnen we de uitvoer bekijken als we naar deze URL browsen.

GERELATEERDE ARTIKELEN

Wat zijn routes?

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

Een client kan bijvoorbeeld een GET-, POST-, PUT- of DELETE http-verzoek indienen voor verschillende URL's, zoals hieronder weergegeven;

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

In het bovenstaande voorbeeld,

  • Als er een GET-verzoek wordt gedaan voor de eerste URL, zou het antwoord idealiter een lijst met boeken moeten zijn.
  • Als het GET-verzoek wordt gedaan voor de tweede URL, zou het antwoord idealiter een lijst met studenten moeten zijn.
  • Dus op basis van de URL waartoe toegang wordt verkregen, wordt een andere functionaliteit op de webserver aangeroepen en dienovereenkomstig wordt het antwoord naar de client verzonden. Dit is het concept van routering.

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.

Laten we eens kijken naar een voorbeeld van hoe we routes in de express kunnen implementeren. In ons voorbeeld worden 3 routes gemaakt als

  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 string “Welkom bij Guru99 Tutorials” weergeeft.

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

Routes in Node.js

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 Verklaring:

  1. Hier definiëren we een route als de URL http://localhost:3000/Node is geselecteerd in de browser. Aan de route voegen we een callback-functie toe die wordt aangeroepen wanneer we naar de knooppunt-URL bladeren. De functie heeft twee 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.
  1. We gebruiken de verzendfunctie om de string “Tutorial on Node” terug te sturen naar de client als de Node-route is gekozen.
  2. Hier definiëren we een route als de URL http://localhost:3000/Angular is geselecteerd in de browser. Aan de route voegen we een callback-functie toe die wordt aangeroepen wanneer we naar de Angular-URL bladeren.
  3. We gebruiken de verzendfunctie om de string “Tutorial on Angular” terug te sturen naar de klant als de Angular-route is gekozen.
  4. Dit is de standaardroute die wordt gekozen wanneer men naar de route van de applicatie bladert – http://localhost:3000. Wanneer de standaardroute wordt gekozen, wordt het bericht “Welkom bij Guru99 Tutorials” naar de klant verzonden.

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

Output:

Routes in Node.js

Van de uitvoer,

  • U kunt duidelijk zien dat als u naar de URL van localhost op poort 3000 surft, u de tekst 'Welcome to Guru99 Tutorials' op de pagina ziet staan.
  • Omdat we in onze code hebben vermeld dat onze standaard-URL dit bericht zou weergeven.

Routes in Node.js

Van de uitvoer,

  • U kunt zien dat als de URL is gewijzigd in /Node, de betreffende Node-route wordt gekozen en de tekenreeks 'Tutorial On Node' wordt weergegeven.

Routes in Node.js

Van de uitvoer,

  • U kunt zien dat als de URL is gewijzigd naar /Angular, de betreffende Node-route wordt gekozen en de tekenreeks "Tutorial On Angular" wordt weergegeven.

Voorbeeldwebserver die express.js gebruikt

Uit ons bovenstaande voorbeeld hebben we gezien hoe we kunnen beslissen welke uitvoer we moeten weergeven op basis van routing. Dit soort routering wordt gebruikt in de meeste moderne webapplicaties. Het andere deel van een webserver gaat over het gebruik van sjablonen in Node js.

Bij het maken van snelle, on-the-fly Node-applicaties is een gemakkelijke en snelle manier het gebruik van sjablonen voor de applicatie. Er zijn veel raamwerken op de markt beschikbaar voor het maken van sjablonen. In ons geval zullen we het voorbeeld van het jade-framework voor sjablonen nemen.

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

npm installeer jade

Met de bovenstaande opdracht wordt de Node-pakketbeheerder gevraagd de vereiste jade-modules te downloaden en dienovereenkomstig te installeren.

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

Laten we ons nieuw geïnstalleerde jade-framework gebruiken en enkele basissjablonen maken.

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

Voorbeeldwebserver met Express.js

  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 ook dat de tekst in de headertag wordt vervangen door wat er in de jade-sjabloon wordt doorgegeven.

Voorbeeldwebserver met Express.js

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 Verklaring:

  1. Het eerste dat u in de toepassing moet specificeren, is de “view-engine” die zal worden gebruikt om de sjablonen weer te geven. Omdat we jade gaan gebruiken om onze sjablonen 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 “Guru99” en “Welkom” door aan respectievelijk de parameters “titel” en “bericht”. Deze waarden worden vervangen door de parameters 'title' en 'message' die zijn gedeclareerd 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:

Voorbeeldwebserver met Express.js

Van de uitvoer,

  • We kunnen zien dat de titel van de pagina wordt ingesteld op ‘Guru99’ en de koptekst van de pagina wordt ingesteld op ‘Welkom’.
  • Dit komt door de jade-sjabloon die wordt aangeroepen in onze node js-applicatie.

Samenvatting

  • Het Express Framework is het meest voorkomende raamwerk dat wordt gebruikt voor het ontwikkelen van Node js-applicaties. Het Express-framework is bovenop het node.js-framework gebouwd en helpt bij de snelle ontwikkeling van servergebaseerde applicaties.
  • Er worden routes gebruikt om gebruikers naar verschillende delen van de webapplicaties te leiden op basis van het ingediende verzoek. De reactie voor elke route kan worden gevarieerd, afhankelijk van wat er aan de gebruiker moet worden getoond.
  • Sjablonen kunnen worden gebruikt om inhoud op een efficiënte manier te injecteren. Jade is een van de populairste sjabloonengines die wordt gebruikt in Node.js-applicaties.