Node.js Express.js Framework Tutorial

In diesem Tutorial beschäftigen wir uns mit dem Express-Framework. Dieses Framework ist so konzipiert, dass es als minimales und flexibles Node.js-Webanwendungsframework fungiert und eine robuste Reihe von Funktionen für die Entwicklung von Single-Page-, Multi-Page- und hybriden Webanwendungen bietet.

Was ist Express.js?

Express.js ist ein Webanwendungsserver-Framework für Node.js, das speziell für die Entwicklung von Single-Page-, Multi-Page- und Hybrid-Webanwendungen konzipiert wurde.

Es hat sich zum Standard-Server-Framework für Node.js entwickelt. Express ist der Backend-Teil des sogenannten MEAN-Stacks.

Express schichtet Routing und Middleware über die Node.js-Kern-HTTP-Schnittstelle, Ströme und Ereignis-APIs.

Der MEAN ist kostenlos und Open Source JavaSkript Software-Stack zum Erstellen dynamischer Websites und Webanwendungen, der die folgenden Komponenten enthält:

1) MongoDB — Die Standard-NoSQL-Datenbank

2) Express.js — Das Standard-Webanwendungsframework

3) AngularJS - Das JavaScript-MVC-Framework für Webanwendungen

4) Node.js — Framework für skalierbare serverseitige und Netzwerkanwendungen.

Das Express.js-Framework macht es sehr einfach, eine Anwendung zu entwickeln, die zur Verarbeitung mehrerer Arten von Anforderungen wie GET-, PUT- und POST- und DELETE-Anforderungen verwendet werden kann.

Express installieren und verwenden

Express wird über den Node Package Manager installiert. Dies kann durch Ausführen der folgenden Zeile in der Befehlszeile erfolgen

npm install express

Der obige Befehl fordert den Node Package Manager auf, die benötigten Express-Pakete herunterzuladen. Module und installieren Sie sie entsprechend.

Versionshinweis: npm installiert jetzt Express 5.2; viele Projekte verwenden weiterhin Express 4. Beide führen die folgenden Beispiele auf einem Unterstützte Node.js-Version.

Lassen Sie uns unser neu installiertes Express-Framework verwenden und eine einfache „Hello World“-Anwendung erstellen.

Unsere Anwendung wird ein einfaches Servermodul Der Server lauscht auf Port 3000. In unserem Beispiel sendet die Serveranwendung bei einer Anfrage über den Browser an diesen Port eine „Hello World“-Antwort an den Client.

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

Code Erläuterung:

1. In unserer ersten Codezeile verwenden wir die Funktion require, um das „Express-Modul“ einzubinden.
2. Bevor wir das Express-Modul verwenden können, müssen wir ein Objekt daraus erstellen.
3. Hier erstellen wir eine Callback-Funktion. Diese Funktion wird immer dann aufgerufen, wenn jemand die Startseite unserer Webanwendung unter http://localhost:3000 aufruft. Die Callback-Funktion sendet die Zeichenkette „Hello World“ an die Webseite.
4. In der Callback-Funktion senden wir die Zeichenfolge „Hello World“ an den Client zurück. Der Parameter „res“ wird verwendet, um Inhalte an die Webseite zurückzusenden. Dieser „res“-Parameter wird vom „request“-Modul bereitgestellt, um es einem zu ermöglichen, Inhalte an die Webseite zurückzusenden.
5. Anschließend verwenden wir die Listen-Funktion, um unsere Serveranwendung so zu konfigurieren, dass sie Clientanfragen auf Port 3000 entgegennimmt. Sie können hier jeden verfügbaren Port angeben.

Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

• Das kann man deutlich sehen, wenn man zu folgendem navigiert: URL Wenn Sie localhost auf Port 3000 aufrufen, wird die Zeichenkette „Hello World“ auf der Seite angezeigt.
• Da wir in unserem Code explizit angegeben haben, dass der Server auf Port 3000 lauschen soll, können wir die Ausgabe beim Aufruf dieser Seite sehen. URL.

Was sind Routen?

Eine einzelne Root-Route ist nur der Ausgangspunkt.

Das Routing bestimmt, wie eine Anwendung auf eine Clientanfrage an einen bestimmten Endpunkt reagiert.

Ein Client kann beispielsweise eine GET-, POST-, PUT- oder DELETE-HTTP-Anfrage für verschiedene Datentypen stellen. URL wie beispielsweise die unten abgebildeten;

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

Im obigen Beispiel ist

• Wenn eine GET-Anfrage für das erste Element gestellt wird URLDann sollte die Antwort idealerweise eine Liste von Büchern sein.
• Wenn die GET-Anfrage für die zweite URLDann sollte die Antwort idealerweise eine Liste von Studenten sein.
• Also basierend auf dem URL Je nachdem, worauf zugegriffen wird, wird eine andere Funktion auf dem Webserver aufgerufen, und die entsprechende Antwort wird an den Client gesendet. Dies ist das Prinzip des Routings.

Jede Route kann über eine oder mehrere Handlerfunktionen verfügen, die ausgeführt werden, wenn die Route übereinstimmt.

Die allgemeine Syntax für eine Route ist unten dargestellt

app.METHOD(PATH, HANDLER)

Worin,

1) app ist eine Instanz des Express-Moduls

2) METHOD ist eine HTTP-Anfragemethode (GET, POST, PUT oder DELETE)

3) PATH ist ein Pfad auf dem Server.

4) HANDLER ist die Funktion, die ausgeführt wird, wenn die Route übereinstimmt.

⚠️ Express 5 Hinweise: Diese Signaturen bleiben unverändert, aber app.del() wurde zu app.delete(), res.sendfile() wurde zu res.sendFile(), und Wildcards benötigen jetzt Namen wie /*splat.

Schauen wir uns ein Beispiel an, wie wir Routen in Express implementieren können. Unser Beispiel erstellt drei Routen als

1. Eine /Node-Route, die die Zeichenfolge „Tutorial on Node“ anzeigt, wenn auf diese Route zugegriffen wird
2. Eine /Angular-Route, die die Zeichenfolge „Tutorial on Angular“ anzeigt, wenn auf diese Route zugegriffen wird
3. Eine Standardroute /, die die Zeichenkette „Willkommen bei“ anzeigt. Guru99 Tutorials.“

Unser Grundcode bleibt derselbe wie in den vorherigen Beispielen. Der folgende Ausschnitt ist ein Add-on, das zeigt, wie Routing implementiert wird.

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 Erläuterung:

1. Hier definieren wir eine Route, falls die 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 URLDie Funktion hat 2 Parameter.
   • Der Hauptparameter, den wir verwenden werden, ist der Parameter „res“, mit dem Informationen an den Client zurückgesendet werden können.
   • Der Parameter „req“ enthält Informationen über die gestellte Anfrage. Manchmal können im Rahmen der gestellten Anfrage zusätzliche Parameter gesendet werden. Daher kann der Parameter „req“ verwendet werden, um die gesendeten zusätzlichen Parameter zu finden.
2. Wir verwenden die Sendefunktion, um die Zeichenfolge „Tutorial on Node“ an den Client zurückzusenden, wenn die Node-Route gewählt wird.
3. Hier definieren wir eine Route, falls die 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. Wir verwenden die Sendefunktion, um die Zeichenfolge „Tutorial on Angular“ an den Client zurückzusenden, wenn die Angular-Route gewählt wird.
5. Dies ist die Standardroute, die beim Aufruf der Anwendungs-Startseite – http://localhost:3000 – ausgewählt wird. Bei Auswahl der Standardroute wird die Meldung „Willkommen bei Guru99 Tutorials werden an den Kunden gesendet.

Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

• Das kann man deutlich sehen, wenn man zu folgendem navigiert: URL Wenn Sie localhost auf Port 3000 aufrufen, sehen Sie die Zeichenkette „Willkommen bei GuruAuf der Seite werden 99 Tutorials angezeigt.
• Denn in unserem Code haben wir erwähnt, dass unser Standard URL würde diese Meldung anzeigen.

Navigieren Sie als Nächstes zu /Node.

Aus der Ausgabe,

• Man kann sehen, dass wenn die URL wurde auf /Node geändert, die entsprechende Node-Route wird ausgewählt und die Zeichenkette „Tutorial on Node“ wird angezeigt.

Navigieren Sie anschließend zu /Angular.

Aus der Ausgabe,

• Man kann sehen, dass wenn die URL wurde die URL auf /Angular geändert, die entsprechende Node-Route wird ausgewählt und die Zeichenkette „Tutorial on Angular“ wird angezeigt.

Beispiel-Webserver mit express.js

Anhand unseres obigen Beispiels haben wir gesehen, wie wir anhand des Routings entscheiden können, welche Ausgabe angezeigt wird. Diese Art des Routings wird in den meisten modernen Webanwendungen verwendet. Der andere Teil eines Webservers befasst sich mit der Verwendung von Templates in Node.js.

Für die schnelle Entwicklung von Node.js-Anwendungen bietet sich die Verwendung von Vorlagen an. Auf dem Markt sind zahlreiche Frameworks zur Erstellung von Vorlagen verfügbar. In diesem Beispiel verwenden wir das Jade-Framework.

Jade wird über den Node Package Manager installiert. Dies kann durch Ausführen der folgenden Zeile in der Befehlszeile erfolgen.

npm install jade

Der obige Befehl fordert den Node Package Manager auf, die benötigten Jade-Module herunterzuladen und entsprechend zu installieren.

Anmerkungen: In der neuesten Version von Node ist Jade veraltet. Verwenden Sie stattdessen Mops.

⚠️ Moderne Entsprechung: installieren MopsBenennen Sie index.jade in index.pug um und setzen Sie app.set('view engine','pug'). Das Jade-Paket erhält keine Aktualisierungen; die folgenden Schritte werden weiterhin ausgeführt.

Lasst uns unser neu installiertes Jade-Framework nutzen und einige einfache Vorlagen erstellen.

Schritt 1) Im ersten Schritt erstellen Sie eine Jade-Vorlage. Erstellen Sie eine Datei namens index.jade und fügen Sie den unten stehenden Code ein. Achten Sie darauf, die Datei im Ordner „views“ zu erstellen.

1. Hier geben wir an, dass der Titel der Seite in den Wert geändert wird, der beim Aufruf dieser Vorlage übergeben wird.
2. Wir legen außerdem fest, dass der Text im Header-Tag durch den im Jade-Template übergebenen Text ersetzt wird.

Der zugehörige Anwendungscode folgt.

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 Erläuterung:

1. Als Erstes muss in der Anwendung die „View-Engine“ angegeben werden, die zum Rendern der Templates verwendet wird. Da wir Jade zum Rendern unserer Templates verwenden, geben wir dies entsprechend an.
2. Die Renderfunktion wird zum Rendern einer Webseite verwendet. In unserem Beispiel rendern wir die Vorlage (index.jade), die zuvor erstellt wurde.
3. Wir übergeben die Werte von „GuruDie Werte „99“ und „Willkommen“ werden den Parametern „title“ bzw. „message“ zugewiesen. Diese Werte werden durch die in der Vorlage index.jade deklarierten Parameter „title“ und „message“ ersetzt.

Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

• Wir können sehen, dass der Seitentitel auf „Guru99“ und die Seitenüberschrift wird auf „Willkommen“ gesetzt.
• Dies liegt an der Jade-Vorlage, die in unserer Node.js-Anwendung aufgerufen wird.

Häufig gestellte Fragen