In deze tutorial zullen we het Express-framework bestuderen. Dit framework is zo gebouwd dat het fungeert als een minimaal en flexibel Node.js-webapplicatieframework, dat een robuuste set functies biedt voor het bouwen van enkelvoudige en meervoudige en hybride webapplicaties.
In deze tutorial leer je-
- Wat is Express.js?
- Express installeren en gebruiken
- Wat zijn routes?
- Voorbeeldwebserver met express.js
Wat is Express.js?
Express.js is een Node js-webtoepassingsserverframework, dat specifiek is ontworpen voor het bouwen van webtoepassingen met één pagina, meerdere pagina's en hybride webtoepassingen.
Het is het standaard serverraamwerk voor node.js. Express is het back-endgedeelte van iets dat bekend staat als de MEAN-stack.
De MEAN is een gratis en open-source JavaScript-softwarestack voor het bouwen van dynamische websites en webapplicaties met de volgende componenten;
1) MongoDB - De standaard NoSQL-database
2) Express.js - Het standaard framework voor webtoepassingen
3) Angular.js - Het JavaScript MVC-framework dat wordt gebruikt voor webapplicaties
4) Node.js - Framework dat wordt gebruikt voor schaalbare server-side en netwerktoepassingen.
Het Express.js-framework maakt het heel gemakkelijk 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 op de opdrachtregel uit te voeren
npm install express
De bovenstaande opdracht vraagt de Node-pakketbeheerder om de vereiste Express-modules te downloaden en dienovereenkomstig te installeren.
Laten we ons nieuw geïnstalleerde Express-framework gebruiken en een eenvoudige "Hello World" -toepassing maken.
Onze applicatie gaat een eenvoudige servermodule maken die luistert op poortnummer 3000. Als in ons voorbeeld een verzoek wordt gedaan via de browser op dit poortnummer, stuurt de servertoepassing een 'Hallo' Wereld'-antwoord naar de klant .
var express=require('express');var app=express();app.get('/',function(req,res){res.send('Hello World!');});var server=app.listen(3000,function() {});
Code Verklaring:
- In onze eerste coderegel gebruiken we de functie vereist om de "express-module" op te nemen.
- Voordat we de express-module kunnen gaan gebruiken, moeten we er een object van maken.
- Hier maken we een callback-functie. Deze functie wordt aangeroepen wanneer iemand naar de root van onze webtoepassing bladert, dit is http: // localhost: 3000 . De callback-functie wordt gebruikt om de string 'Hallo wereld' naar de webpagina te sturen.
- 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 iemand in staat te stellen inhoud terug te sturen naar de webpagina.
- We gebruiken dan de listen to-functie om onze servertoepassing te laten luisteren naar clientverzoeken op poort nr. 3000. U kunt hier elke beschikbare poort specificeren.
Als de opdracht met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- Je kunt duidelijk zien dat als we naar de URL van localhost op poort 3000 bladeren, je de string 'Hello World' op de pagina ziet verschijnen.
- Omdat we in onze code specifiek hebben vermeld dat de server moet luisteren op poort nr. 3000, kunnen we de uitvoer bekijken wanneer we naar deze URL bladeren.
Wat zijn routes?
Routing bepaalt de manier waarop een applicatie reageert op een clientverzoek aan een bepaald eindpunt.
Een klant kan bijvoorbeeld een GET, POST, PUT of DELETE http-verzoek doen voor verschillende URL's zoals hieronder getoond;
http://localhost:3000/Bookshttp://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, moet het antwoord idealiter een lijst met studenten 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 klant gestuurd. Dit is het concept van routing.
Elke route kan een of meer handlerfuncties hebben, die worden uitgevoerd wanneer de route overeenkomt.
De algemene syntaxis voor een route wordt hieronder weergegeven
app.METHOD(PATH, HANDLER)
Waarin,
1) app is een instantie 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 overeenkomt.
Laten we eens kijken naar een voorbeeld van hoe we routes in de expres kunnen implementeren. In ons voorbeeld worden 3 routes gemaakt als
- A / Node-route die de string "Tutorial on Node" zal weergeven als deze route wordt geopend
- A / Angular route die de string "Tutorial on Angular" zal weergeven als deze route wordt geopend
- Een standaardroute / die de string "Welkom bij Guru99 Tutorials" zal weergeven.
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 Verklaring:
- Hier definiëren we een route als de URL http: // localhost: 3000 / Node is geselecteerd in de browser. Aan de route koppelen we een callback-functie die wordt aangeroepen wanneer we naar de knooppunt-URL bladeren.
De functie heeft 2 parameters.
- De belangrijkste parameter die we zullen gebruiken is de 'res'-parameter, 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.
- We gebruiken de verzendfunctie om de string "Tutorial on Node" terug te sturen naar de client als de Node-route is gekozen.
- Hier definiëren we een route als de URL http: // localhost: 3000 / Angular is geselecteerd in de browser. Aan de route koppelen we een callback-functie die wordt aangeroepen wanneer we naar de Angular-URL bladeren.
- We gebruiken de verzendfunctie om de string "Tutorial on Angular" terug te sturen naar de client als de Angular-route is gekozen.
- Dit is de standaardroute die wordt gekozen wanneer men naar de route van de applicatie bladert - http: // localhost: 3000 . Als de standaardroute is gekozen, wordt het bericht "Welkom bij Guru99 Tutorials" naar de klant gestuurd.
Als de opdracht met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- Je kunt duidelijk zien dat als we naar de URL van localhost op poort 3000 bladeren, je de string 'Welkom bij Guru99 Tutorials' op de pagina ziet verschijnen.
- Omdat we in onze code hebben vermeld dat onze standaard-URL dit bericht zou weergeven.
Van de output,
- U kunt zien dat als de URL is gewijzigd in / Node, de respectieve Node-route zou worden gekozen en de string "Tutorial On Node 'wordt weergegeven.
Van de output,
- U kunt zien dat als de URL is gewijzigd in / Angular, de respectieve Node-route zou worden gekozen en de string "Tutorial On Angular" wordt weergegeven.
Voorbeeldwebserver met express.js
Uit ons bovenstaande voorbeeld hebben we gezien hoe we kunnen beslissen welke output we tonen op basis van routing. Dit soort routing wordt in de meeste moderne webapplicaties gebruikt. 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 om sjablonen voor de applicatie te gebruiken. Er zijn veel frameworks op de markt voor het maken van sjablonen. In ons geval nemen we het voorbeeld van het jade-raamwerk voor sjablonen.
Jade wordt geïnstalleerd via de Node Package-manager. Dit kan worden gedaan door de volgende regel op de opdrachtregel uit te voeren
npm jade installeren
De bovenstaande opdracht vraagt de Node-pakketbeheerder om de vereiste jade-modules te downloaden en dienovereenkomstig te installeren.
OPMERKING: 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 voeg de onderstaande code in. Zorg ervoor dat u het bestand in de map "views" maakt
- Hier specificeren we dat de titel van de pagina zal worden gewijzigd in de waarde die wordt doorgegeven wanneer deze sjabloon wordt aangeroepen.
- We specificeren ook dat de tekst in de header-tag zal worden vervangen door alles wat wordt doorgegeven in de jade-sjabloon.
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:
- Het eerste dat in de applicatie moet worden gespecificeerd, is "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.
- De renderfunctie wordt gebruikt om een webpagina weer te geven. In ons voorbeeld renderen we de sjabloon (index.jade) die eerder is gemaakt.
- We geven de waarden van "Guru99" en "Welkom" door aan respectievelijk de parameters "titel" en "bericht". Deze waarden zullen worden vervangen door de 'title' en 'message' parameters die zijn gedeclareerd in de index.jade-sjabloon.
Als de opdracht met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- 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.
Overzicht
- Het express-framework is het meest gebruikte framework voor het ontwikkelen van Node js-applicaties. Het express-framework is bovenop het node.js-framework gebouwd en helpt bij het versneld ontwikkelen van servertoepassingen.
- Routes worden gebruikt om gebruikers naar verschillende delen van de webapplicaties om te leiden op basis van het gedane verzoek. De respons voor elke route kan worden gevarieerd, afhankelijk van wat er aan de gebruiker moet worden getoond.
- Sjablonen kunnen worden gebruikt om op een efficiënte manier inhoud te injecteren. Jade is een van de meest populaire template-engines die wordt gebruikt in Node.js-toepassingen.