Erste Schritte mit express.js

Erstellen von Browser-Anwendungen mit Knoten. Js wird langweilig. Express.js. ist ein Javascript Framework. Single-Page-Anwendungen und mehrseitige Anwendungen, die in der Umgebung von Node.js gehostet werden.

• 29 Webdesign-Tools, um Ihren Workflow zu beschleunigen

Es bietet eine dünne Schicht von fundamentalen Web-App-Funktionen, die die Node.js-Funktionen nicht verschleiern. Und es ist auch großartig, um robuste APIs zu erstellen, dank eines Stapels von HTTP-Dienstprogrammmethoden und Middleware, die bereit sind.

Wenn Sie eine weniger komplexe Option wünschen, können Sie eine Site ohne die Codierung mit einem erstellen Webseitenersteller . Entspendem, dass Sie Ihre bekommen Web-Hosting Service richtig. Möchten Sie anfangen? Hier müssen Sie über express.js wissen.

01. Erzeugen Sie eine verarbeitbare Struktur

Express.js stolz auf "unoptioniert" - das heißt, der Rahmen ermöglicht es dem Entwickler, den Entwickler in Bezug auf Architekturen, Vorlagen- und Markup-Motoren zu mischen und anzupassen. Leider ist mit großer Macht große Verantwortung.

Das Express-Entwicklerteam möchte den Schlag erweichtern, indem Sie einen Projektgenerator einführen (Wenn Sie neben einem Team entwerfen, stellen Sie das Beste bereit Cloud-Speicherung. Dinge kohärt zu halten). Es kommt zu Ihrer Workstation in Form eines NPM-Pakets und unterstützt unsere Experimente mit dem folgenden Rahmen:

 Tamhan @ Tamhan-Thinkpad: ~ / Desktop /
Sachen / 2018auge / futureexpressjs /
Workspace $ sudo npm installieren
Express-Generator -g 

Der Generator enthält auch Dutzende von Projektoptionen - die Figur, die diesen Schritt beiliegt, zeigt die vollständige Hilfeausgabe an. Zum Einfachheit halber beschränken wir uns auf ein Projekt basierend auf den Standardeinstellungen. Kicke seinen Generationsprozess mit:

 Tamhan @ Tamhan-Thinkpad: ~ / Desktop /
Sachen / 2018auge / futureexpressjs /
Workspace $ Express Futuretest 

WARNUNG: Die Standardansicht-Engine ist in zukünftigen Releases nicht Jade.

Wenn fertig ist, enthält das aktuelle Arbeitsverzeichnis einen neuen Ordner mit dem Namen 'Futuretest'. Es ist in der Heimat unseres Testprojekts und muss mit dem NPM-Paket-Download-Befehl von NPM konfiguriert sein. Zum Zeitpunkt des Schreibens beinhaltet der Generator den Jade View Generator - das Projekt plant, dies in naher Zukunft zu ändern, um zu verpflichten, dass Sie einen Parameter eingeben, um den vorgesehenen Ansichtsmotor auszuwählen. Alternativ können Sie die Verwendung von Mops anfordern - es ist der offizielle Nachfolger des Jade Engine:

 CD Futuretest /
NPM installieren 

02. Verstehen Sie die Anwendungsstruktur

Nun, da der Projektgenerator seine Sache getan hat, lassen Sie uns App.js in einem Herausgeber der Wahl öffnen. Seine - viel gekürzte - Struktur präsentiert sich wie folgt:

 var indexrouter = erfordern ('./
Routen / Index ');
var benutzerrouter = erfordern ('./
Routen / Benutzer ');
var app = express ();
// Motor-Setup anzeigen
app.set ('Ansichten', path.join (__
Dirname, 'Ansichten'));
app.set ('Ansicht Engine', 'Jade');
app.use (Logger ('dev'));
app.use (express.json ());
app.use (express.urlencoded ({{
erweitert: false});
app.use (Cookieparser ());
app.use (express.statisch (Pfad.
Join (__ Dirname, 'Public'))); 

Express.js ist sehr modular. App.js dient als Einstiegspunkt, bei dem ein oder mehrere 'use ()' -Funktionen das Hinzufügen von Komponenten ermöglichen, um verschiedene Anforderungen zu behandeln. Invokationen von 'Set ()' können Sie die Parameter im Motor einstellen - eines davon ist die Installation des in dem vorherigen Schritt genannten Jade-Ansichtsmotor.

Die tatsächliche Emission von Webinhalten erfolgt in den Router-Klassen. Für die Kürze willen, lass uns uns auf Index.js beschränken:

 var express = erfordern ('express');
VAR-Router = Express.Router ();
router.get ('/', Funktion (REQ, RES,
Nächster) {
  res.render ('Index', {Titel:
'Ausdrücken' });
});
Modul.exports = Router; 

'Get ()' ist mit einer Matcher-Zeichenfolge und einem Ereignishandler ausgestattet, der immer dann aufgerufen wird, wenn ein entsprechendes Ereignis auftritt. In unserem Fall wird die Rendermethode der gewählten Template-Engine informiert, um Inhalte an den Browser des Benutzers zurückzugeben, der sich angemeldet hat.

03. Führen Sie die Webseite aus

An diesem Punkt sind wir bereit, die Website zum ersten Mal für einen Spin zu nehmen. Rückkehr zum Terminal, das die Installation von Express.js enthält, und den NPM-Start mit dem Debug-Flag-Set anrufen:

 Debug = MYAPP: * NPM Start 

Wenn Sie fertig sind, geben Sie http: // localhost ein: 3000 / in einen Browser der Wahl, um das Gerüst, das vom Projektgenerator erstellt wurde, anzusehen. Wenn er fertig ist, drücken Sie Strg + C. So schließen Sie das Fenster und geben Sie die Steuerung an den Befehlszeilen-Dolmetscher an - beachten Sie, dass dies auch den Debugging-Webserver schließt.

04. Es geht um Routing und Endpunkte

Lassen Sie uns der Einfachheit halber einig sein, dass eine Webanwendung in der Regel aus einer Folge von Einstiegspunkten besteht. Express.js behandelt diese über die Router-Klasse - Denken Sie an ihn als Repository von Methoden, die als Antwort auf eine eingehende Anfrage aufgerufen werden.

Wenn Sie einen neuen Endpunkt zu einer Anwendung hinzufügen, wird erfüllt, indem ein neuer Arbeiter in die Warteschlange hinzugefügt wird. Unser automatisch generiertes Beispiel erstellt zwei Routertypen, von denen jedes mit der "Erforderlichen" -Methode angehoben wird:

 var indexrouter = erfordern ('./
Routen /
Index');
var benutzerrouter = erfordern ('./
Routen /
Benutzer '); 

Im nächsten Schritt registriert 'app.use' die Router und verbindet sie mit den Anforderungszeichenfolgen. Unser Code fügt außerdem einen Fehlerbehandler hinzu, der aufgerufen wird, wenn eine nicht vorhandene URL in das System eingegeben wird:

 app.use ('/', Indexrouter);
app.use ('/ Benutzer', UserRouter);
App.Une (Funktion (REQ, RES, NEXT)
{
  als nächstes (CreateError (404));
}); 

05. Erstellen Sie eine neue Route

Öffnen Sie Benutzer.js und ändern Sie seinen Code wie folgt:

 router.get ('/ user1', Funktion (REQ,
res,
Nächster) {
  res.send ("Zukunft sagt Hallo
1 ');
});
router.get ('/', Funktion (REQ, RES,
Nächster) {
  resdend ('antworten mit a
Ressource');
}); 

Das Hinzufügen neuer Routen zu Express.js ist ein mechanischer Prozess. Schnappen Sie sich das Router-Objekt der Wahl, und rufen Sie die Methode auf, die dem HTTP-Verb entspricht, den Sie mit dem Handhaben suchen. Als nächstes geben Sie eine Zeichenfolge an, die dem "Offset" mit 'app.use' hinzugefügt wird. Von diesem Moment an, sowohl http: // localhost: 3000 / user / user1 und http: // localhost: 3000 / user / return eine gültige Antwort.

Denken Sie daran, dass express.js nicht auf die Handhabung von Ressourcen beschränkt ist. 'post ()', 'Put ()' und 'Löschen ()', die traditionellen vier HTTP-Anforderungen mit Dutzenden zusätzlicher Verb-Methoden, die zu ungewöhnlicheren Bedürfnissen verfügen. Schließlich bietet das Objekt "REQ" Zugriff auf den Anforderungsheader - legt es beim Analysieren von Parametern oder Clientinformationen auf einen guten Einsatz.

06. Advanced Matching.

Das Hinzufügen von Routen von Hand wird langweilig, da die Programmkomplexität wächst. Express.js richtet sich an dieses Problem, indem Sie sowohl Platzhalter als auch regelmäßige Ausdrucksunterstützung einführen. Betrachten Sie zum Beispiel die folgende Erklärung, die einen regulären Ausdruck verwendet, um mit den verschiedenen Zeichenfolgen, die den Charaktersequenzhund enthalten, zusammenhängt.

 app.get (/.* dog $ /, function (req,
res) {
  ...}) 

07. Abnormales Routing.

Bei der Umgang mit den vier HTTP-Anfragen sollten EXPRESS.JS auch mit zusätzlichen Protokollen ausreichend sein (Hat-Tipp zu Bill Gates). Express-WS. ist ein besonders leckerer Kandidat für diesen Abschnitt - er erweitert express.js Reichweite, um Websenkommunikation aufzunehmen.

Sobald das Plugin zum Projekt wichtiger Express.js hinzugefügt wird, wird er ermöglicht, dass er über einen "Erforderlichen" Anruf erfolgt. Es gibt ein Helferobjekt zurück, das alle außer einer Methode enthält - aufrufen, um eine Verbindung zwischen dem Router und dem Plugin herzustellen:

 var expressws = erfordern ('express-
ws ')
App);
Danach kann eine neue Methode namens 'ws ()' aufgerufen werden, um neue Routen basierend auf der WebSocket-Technologie hinzuzufügen:
app.ws ('/', Funktion (WS, REQ) {
  ws.on ('Nachricht', Funktion (MSG)
{
    console.log (msg);
  });
  console.log ('Sockel', REQ.
testen); }); 

Ihr Prototyp unterscheidet sich aufgrund der Anwesenheit des Objekts 'WS' von normalen Routen - ergibt Zugriff auf die zugrunde liegende WebSocket-Instanz, die mit dem für die Verbindung verantwortlichen Client verbunden ist.

08. Integrieren Sie Datenbanken und Templatiermotoren

Basierend auf node.js bedeutet, dass das Rich-Plugin-Ökosystem bei der Arbeit an webbasierten Anwendungen bei Ihnen ist. Wenn Sie zum Beispiel auf SQL- und NOSQL-Datenbanken zugreifen, können Sie in der Regel eine außerordentlich langwierige Aufgabe - mit der von den Datenbankanbietern bereitgestellten Plugins behandelt werden. Die tatsächliche Bereitstellung ist so einfach wie das Installieren des benötigten NPM-Moduls - Wenn Ihr Code den Zugriff auf eine RediS-Datenbank ist, fügen Sie einfach Folgendes hinzu:

 var redis = erfordern ('redis')
VAR-Client = redis.createclient ()
client.set ('stringkey', 'aval',
redis.print)
. . . 

Natürlich wird auch in der Memory SQLite unterstützt:

 var sqlite3 = erfordern ('sqlite3').
Verbose ()
var db = neuer sqlite3.
Datenbank (': Speicher:')
db.serialize (Funktion () {
  db.run ('Tabelle lorem erstellen
(Infotext) ') 

Denken Sie daran, dass die Integration von Node.js nicht auf Datenbank-Plugins beschränkt ist. Abenteuerlustige Entwickler könnten so weit gehen, um Produkte wie Tessel aufzunehmen, wodurch Webanwendungen erstellt werden, die auch miteinander interagieren können Internet der Dinge Geräte.

09. Templating in Stil

Ein Bereich, in dem sich einfache und echte Programme unterscheiden, ist die Erstellung von Ansichten. Während ein kleines Beispielprojekt normalerweise handgefertigte Saiten verwendet, ist die Montage von großen HTML-Schwarzen mit einer Saite mit verbundenen Dingen sehr nervig.

Vorlagenmotoren bieten eine ordentliche Problemumgehung. Sie erlauben die Erstellung vordefinierter Schema-Dateien, die in der Ausführung programmgesteuert bevölkert werden können.

Im Falle unseres Beispielprogramms lag die Ansichten in .Jadedateien. Der Eröffnungsindex zeigt die folgende Struktur:

 Erweitert das Layout
Inhalt blockieren
  H1 = Titel.
  P Willkommen in # {title} 

Ausdrücke, die in lockigen Klammern beigefügt sind, fungieren als Vorlagenfelder, deren Werte zur Laufzeit ersetzt werden sollen. Index.js ruft Rendern mit einem Parameterobjekt auf, was zu dem Rendering der Startseite in der in diesem Schritt angezeigten Startseite führt:

 router.get ('/', Funktion (REQ, RES,
Nächster) {
  res.render ('Index', {Titel:
'Ausdrücken' });
}); 

Die meisten Templating-Motoren können auch Arrays analysieren, wenn sie mit einer Elementvorlage versehen sind. In diesem Fall wird jede Zeile des Arrays mit einer Instanz des DOM-Modells - Ähnlichkeiten mit dem in Android gefundenen Listenanzeigemodell angezeigt, das rein zufällig ist. Express.js ist nicht auf die vordefinierten Templating-Motoren beschränkt. Wenn Sie sich aus irgendeinem Grund ausrollen möchten, folgen Sie einfach den folgenden Schritten Hier - Grundsätzlich müssen Sie alle außer einer Funktion überschreiben.

10. Griff statischer Inhalte

Express.js-Anwendungen enthalten dazu, CSS-Dateien und Bilder enthalten. Wenn Sie diese über die Renderfunktion dienen, ist ineffizient - ein intelligeres Weg würde dazu beinhalten, sie mit einer traditionellen HTTP-Anforderung auf ihre frohe Weise zu senden. Dies kann über die Funktion 'Express.static ()' erreicht werden, die den gesamten Ordner für den Export markieren kann:

 APP.USE (Express.static ('Public'))
app.use (Express.static ('Dateien')) 

11. Ändern Sie den Ereignisfluss

Schließlich erlauben Sie uns, den Begriff Middleware in Kürze zu erwähnen. In Express.js Parlance ist Middleware ein Satz von einem oder mehreren Komponenten, die sich in das gegenüberliegende Flussdiagramm integrieren. Sie können dann verwendet werden, um Anforderungen zu ändern, während sie das Routing-System durchlaufen - Bei korrekter Implementierung kann eine unbegrenzte Funktionalität erreicht werden.

Darüber hinaus können einige bereitgestellte Komponenten gefunden werden Hier - Besuchen Sie diese Site, bevor Sie ein großes Entwicklungsprojekt eingeben.

12. Wie hosten Sie eine Express.js-App?

Testing express.js-basierte Anwendungen ist einfach. Probleme auftreten, sobald Sie möchten, dass die Seite für Dritte zugänglich ist - da dies aufgrund der Umwelt von Node.js generiert wird, gibt es keine Möglichkeit, ein statisches Image für die FTP-Bereitstellung auf Webhosting-Dienste zu erhalten.

Theoretisch gibt es nichts gegen die Verwendung eines Raspberry Pi, eines OrangePi, einem dedizierten Server oder einer virtuellen Maschine, die von einem Cloud-Dienst oder einem Webhost-Anbieter vermietet wird, der virtuelle Hosting bietet. Die Vermietung einer vollständigen virtuellen Maschine kann Sie jedoch mit der Verantwortung belasten, um das Ausführungsumfeld und das Betriebssystem auf dem neuesten Stand zu halten.

Wenn diese Aufgabe nicht für Ihren Geschmack ist, kann ein Plattform-AS-A-Service-Anbieter ein attraktiver sein (wenn auch in den meisten Fällen, ziemlich teuerer) Wahl.

Viele Entwickler berücksichtigen Heroku, wobei ihre Preise in der Figur in der Figur gezeigt werden, die dieses Boxout begleitet, als Goldstandard für alle Dinge sein, die sich auf das Hosting von Node.js zusammenhängen.

Dies ist jedoch ein bisschen unfair in der Wahrheit - Amazons elastischer Bohnenstalk, die Cloud-Plattform von Google und Microsofts Azure bieten alle einen ähnlichen Support für die Remote-Ausführung von Node.js-basierten Nutzladungen. In all diesen Systemen ist das Hauptproblem die Handhabung - während Azure für seine langsamen Bereitstellungen bekannt ist, andere Anbieter-Lastentwickler mit schwierigen Backend-Services extrem komplexer Konfigurationssysteme.

Darüber hinaus unterscheidet sich die unterstützte Version der Node.js-Umgebung vom Anbieter an den Anbieter. Natürlich haben wir nicht genügend Platz, um das Thema eingehend zu decken. Besuch Mozilla's Deployment-Tutorial und express.js ' Leistung und Zuverlässigkeit. und Sicherheit Best Practices-Seiten für einige der betroffenen Fragen. Stellen Sie sicher, dass Sie sich die Dokumentation des Anbieters ansehen, um mehr Best Practices zu erwarten.

13. Zukunftssicher Ihre Anwendungen

Der Entwicklungszyklus von Express.js ist weit von glatter: Die Entwickler sind bekannt für häufige API-Änderungen, die umschreiben von Clientcode erfordern. Der Umschalten von 3.x bis 4.x war besonders schmerzhaft, weshalb die drohende Veröffentlichung von 5.x einige von Ihnen unwohl fühlen könnte.

Während express.js 5.0 ein paar brechende Änderungen mit sich bringt, ist ihre Auswirkungen darauf beschränkt. Zunächst wird ein Satz von bereits verabschiedenen Funktionen für Real entfernt - wenn der Code sie immer noch verwendet, erfordert das Upgrade auf 5.x Wartung.

Designer von Ansichtsmotoren müssen 'res.render ():' Rangwachstum in Bezug auf die Ansicht von Renderer prüfen, die zu einigen synchronen Implementierungen geführt hat, die durchrutschen. Die Version 5 des Rahmens verbessert die Leistung durch das Durchsetzung der asynchronen Rendering.

Darüber hinaus dokumentierten ein Satz von sonstigen Verbesserungen und Änderungen Hier sieht die Rückgabe einiger aussterben Funktionen aus früheren Versionen - außerdem werden einige langjährige Fehler in der neuen Version behoben.

Beachten Sie schließlich, dass Sie bereits die neue Version ausprobieren können. Erstellen Sie einfach eine Kopie Ihres Quellcodes, ergreifen Sie ein Terminal und geben Sie den folgenden Befehl ein, um den Wert eines Archivs herunterzuladen, der kaum getestete Blutungskanten-JavaScript-JavaScript herunterladen. Sicher sein.

 $ npm install express @ & gt; = 5.0.0-
alpha.1 --Save 

Dieser Artikel wurde ursprünglich in Ausgabe 279 von Creative Web Design Magazine Webdesigner veröffentlicht. AUSGABEN 279 Kaufen oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

• Alles, was Sie über den neuen Knoten wissen müssen. Js 8
• 20 Node.js-Module, die Sie kennen müssen
• 25 Game-wechselnde JavaScript-Tools