Beginnen Sie mit Express.JS

Beginnen Sie mit Express.JS

Das Erstellen von Anwendungen mit Blick auf den Browser mit Node.JS wird mühsam. Express.JS ist ein JavaScript-Framework Für einseitige und mehrseitige Anwendungen, die in der Node.JS-Umgebung gehostet werden.

Es bietet eine dünne Schicht grundlegender Web-App-Funktionen, die die bereits vertrauten Node.JS-Funktionen nicht verdecken, sodass Sie sicher sein können, dass Ihre fertige App hinsichtlich der Leistung auf dem neuesten Stand ist. Dank eines Stapels von HTTP-Dienstprogrammmethoden und gebrauchsfertiger Middleware eignet es sich auch hervorragend zum Erstellen robuster APIs.

Möchten Sie loslegen? Folgendes müssen Sie wissen.



01. Generieren Sie eine funktionsfähige Struktur

Erste Schritte mit Express.JS: Generieren Sie eine funktionsfähige Struktur

Stellen Sie die richtigen Arbeitsoptionen vor, um loszulegen

Express.JS ist stolz darauf, 'unopinioniert' zu sein - das heißt, das Framework ermöglicht es dem Entwickler, Architekturen, Vorlagen und Markup-Engines zu mischen und anzupassen. Leider geht mit großer Kraft große Verantwortung einher.

Das Express-Entwicklerteam versucht, den Schlag durch die Einführung eines Projektgenerators zu mildern. Es kommt in Form eines NPM-Pakets auf Ihre Workstation und unterstützt unsere Experimente mit dem folgenden Framework:

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ sudo npm install express-generator -g

Der Generator enthält außerdem Dutzende von Projektoptionen. Die Abbildung in diesem Schritt zeigt die vollständige Hilfeausgabe. Der Einfachheit halber beschränken wir uns auf ein Projekt, das auf den Standardeinstellungen basiert. Starten Sie den Generierungsprozess mit:

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ express futuretest

Warnung: Die Standard-Ansichts-Engine wird in zukünftigen Versionen nicht Jade sein.

Wenn Sie fertig sind, enthält das aktuelle Arbeitsverzeichnis einen neuen Ordner namens 'futuretest'. Hier befindet sich unser Testprojekt und muss mit dem Paket-Download-Befehl von NPM konfiguriert werden. Zum Zeitpunkt des Schreibens enthält der Generator den Jade-Ansichtsgenerator. Das Projekt plant, dies in naher Zukunft zu ändern, sodass Sie einen Parameter übergeben müssen, der die beabsichtigte Ansichts-Engine auswählt. Alternativ können Sie die Verwendung von Pug anfordern - es ist der offizielle Nachfolger der Jade-Engine:

cd futuretest/ npm install

02. Verstehen Sie die Anwendungsstruktur

Nachdem der Projektgenerator seine Aufgabe erledigt hat, öffnen wir App.js in einem Editor Ihrer Wahl. Seine - stark gekürzte - Struktur zeigt sich wie folgt:

wie man einen Bleistift und Papier zeichnet
var indexRouter = require('./ routes/index'); var usersRouter = require('./ routes/users'); var app = express(); // view engine setup app.set('views', path.join(__ dirname, 'views')); app.set('view engine', 'jade'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path. join(__dirname, 'public')));

Express.JS ist sehr modular aufgebaut. App.js dient als Einstiegspunkt, an dem eine oder mehrere 'use ()' - Funktionen das Hinzufügen von Komponenten ermöglichen, die für verschiedene Anforderungen vorgesehen sind. Mit den Aufrufen von 'set ()' können Sie Parameter in der Engine anpassen. Eine davon ist die Installation der im vorherigen Schritt erwähnten Jade View-Engine.

Die eigentliche Ausgabe von Webinhalten erfolgt in den Routerklassen. Der Kürze halber beschränken wir uns auf Index.js:

var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;

'get ()' wird mit einer Matcher-Zeichenfolge und einem Ereignishandler bereitgestellt, der aufgerufen wird, wenn ein entsprechendes Ereignis auftritt. In unserem Fall wird die Rendermethode der ausgewählten Vorlagen-Engine angewiesen, 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 zu testen. Kehren Sie zu dem Terminal zurück, das die Express.JS-Installation enthält, und rufen Sie NPM auf, indem Sie das Debug-Flag setzen:

DEBUG=myapp:* npm start

Wenn Sie fertig sind, geben Sie http: // localhost: 3000 / in einen Browser Ihrer Wahl ein, um das vom Projektgenerator erstellte Gerüst anzuzeigen. Wenn Sie fertig sind, drücken Sie Strg + C. Um das Fenster zu schließen und die Steuerung an den Befehlszeileninterpreter zurückzugeben, beachten Sie, dass dadurch auch der Debugging-Webserver geschlossen wird.

04. Alles dreht sich um Routing und Endpunkte

Erste Schritte mit Express.JS: Routing und Endpunkte

Sortieren Sie die richtigen Einstiegspunkte, fügen Sie neue Routen hinzu und führen Sie die Unterstützung für reguläre Ausdrücke ein

Lassen Sie uns der Einfachheit halber zustimmen, dass eine Webanwendung normalerweise aus einer Folge von Einstiegspunkten besteht. Express.JS verarbeitet diese über die Router-Klasse. Stellen Sie sich das als Repository von Methoden vor, die als Antwort auf eine eingehende Anforderung aufgerufen werden.

Das Hinzufügen eines neuen Endpunkts zu einer Anwendung erfolgt durch Hinzufügen eines neuen Workers zur Warteschlange. In unserem automatisch generierten Beispiel werden zwei Routertypen erstellt, von denen jeder mit der Methode 'require' ausgelöst wird:

var indexRouter = require('./ routes/ index'); var usersRouter = require('./ routes/ users');

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

app.use('/', indexRouter); app.use('/users', usersRouter); app.use(function(req, res, next) { next(createError(404)); });

05. Erstellen Sie eine neue Route

Öffnen Sie Users.js und ändern Sie den Code wie folgt:

router.get('/user1', function(req, res, next) { res.send('Future says Hello 1'); }); router.get('/', function(req, res, next) { res.send('respond with a resource'); });

Das Hinzufügen neuer Routen zu Express.JS ist ein mechanischer Prozess. Nehmen Sie das Router-Objekt Ihrer Wahl und rufen Sie die Methode auf, die dem HTTP-Verb entspricht, das Sie verarbeiten möchten. Geben Sie als Nächstes eine Zeichenfolge ein, die dem bei 'app.use' registrierten 'Offset' hinzugefügt wird. Von diesem Moment an geben sowohl http: // localhost: 3000 / users / user1 als auch http: // localhost: 3000 / users / eine gültige Antwort zurück.

Beachten Sie, dass Express.JS nicht auf den Umgang mit GET-Ressourcen beschränkt ist. 'post ()', 'put ()' und 'delete ()' behandeln die traditionellen vier HTTP-Anforderungen, wobei Dutzende zusätzlicher Verbmethoden auf ungewöhnlichere Anforderungen zugeschnitten sind. Schließlich bietet das 'req'-Objekt Zugriff auf den Anforderungsheader - verwenden Sie es beim Parsen von Parametern oder Clientinformationen.

06. Erweiterter Abgleich

Das Hinzufügen von Routen von Hand wird mit zunehmender Programmkomplexität mühsam. Express.JS behebt dieses Problem, indem sowohl Platzhalter- als auch Unterstützung für reguläre Ausdrücke eingeführt werden. Schauen Sie sich beispielsweise die folgende Deklaration an, bei der ein regulärer Ausdruck verwendet wird, um mit verschiedenen Zeichenfolgen abzugleichen, die den Zeichenfolgenhund enthalten.

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

07. Anormales Routing

Während die Bearbeitung der vier HTTP-Anforderungen für jeden ausreichend sein sollte (Tipp an Bill Gates), kann Express.JS auch mit zusätzlichen Protokollen arbeiten. Express-WS ist ein besonders schmackhafter Kandidat für diesen Abschnitt - er erweitert die Reichweite von Express.JS um WebSocket-Kommunikation.

Sobald das Plugin zum Express.JS-Hauptprojekt hinzugefügt wurde, erfolgt die Aktivierung über einen 'Require' -Aufruf. Es gibt ein Hilfsobjekt zurück, das alle bis auf eine Methode enthält. Rufen Sie es auf, um eine Verbindung zwischen dem Router und dem Plugin herzustellen:

var expressWs = require('express- ws') app); After that, a new method called 'ws()' can be invoked to add new routes based on WebSocket technology: app.ws('/', function(ws, req) { ws.on('message', function(msg) { console.log(msg); }); console.log('socket', req. testing); });

Ihr Prototyp unterscheidet sich von normalen Routen durch das Vorhandensein des 'ws'-Objekts. Er bietet Zugriff auf die zugrunde liegende WebSocket-Instanz, die mit dem für die Verbindung verantwortlichen Client verbunden ist.

08. Integrieren Sie Datenbanken und Template-Engines

Erste Schritte mit Express.JS: Integrieren Sie Datenbanken und Template-Engines

Stellen Sie sicher, dass Sie die Leistung des reichhaltigen Plugin-Ökosystems nutzen

Wenn Sie auf Node.JS basieren, steht Ihnen das umfangreiche Plugin-Ökosystem bei der Arbeit an webbasierten Anwendungen zur Verfügung. Beispielsweise kann der Zugriff auf SQL- und NoSQL-Datenbanken - normalerweise eine außerordentlich mühsame Aufgabe - mithilfe von Plugins durchgeführt werden, die von den Datenbankanbietern bereitgestellt werden. Die eigentliche Bereitstellung ist so einfach wie die Installation des erforderlichen NPM-Moduls. Wenn Ihr Code auf eine Redis-Datenbank zugreifen soll, fügen Sie einfach Folgendes hinzu:

var redis = require('redis') var client = redis.createClient() client.set('stringKey', 'aVal', redis.print) . . .

Natürlich wird auch In-Memory-SQLite unterstützt:

var sqlite3 = require('sqlite3'). verbose() var db = new sqlite3. Database(':memory:') db.serialize(function () { db.run('CREATE TABLE lorem (info TEXT)')

Beachten Sie, dass die Node.JS-Integration nicht auf Datenbank-Plugins beschränkt ist. Abenteuerlustige Entwickler könnten sogar Produkte wie Tessel einbeziehen und so Webanwendungen erstellen, mit denen auch interagiert werden kann Internet der Dinge Geräte.

09. Vorlagen mit Stil

Ein Bereich, in dem sich einfache und reale Programme unterscheiden, ist die Erstellung von Ansichten. Während ein kleines Beispielprojekt normalerweise handgefertigte Zeichenfolgen verwendet, ist das Zusammenstellen großer HTML-Bereiche mit einer Zeichenfolge verbundener Dinge äußerst ärgerlich.

Template-Engines bieten eine saubere Problemumgehung. Sie ermöglichen die Erstellung vordefinierter Schemadateien, die bei der Ausführung programmgesteuert ausgefüllt werden können.

Bei unserem Beispielprogramm lagen die Ansichten in JAD-Dateien. Der Eröffnungsindex zeigt die folgende Struktur:

extends layout block content h1= title p Welcome to #{title}

In geschweiften Klammern eingeschlossene Ausdrücke dienen als Vorlagenfelder, deren Werte zur Laufzeit ersetzt werden sollen. Index.js ruft das Rendern mit einem Parameterobjekt auf, was zum Rendern der Startseite führt, die in der Abbildung zu diesem Schritt dargestellt ist:

router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });

Die meisten Template-Engines 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 angezeigt. Ähnlichkeiten mit dem in Android gefundenen Listenanzeigemodell sind rein zufällig. Express.JS ist nicht auf die vordefinierten Template-Engines beschränkt. Wenn Sie aus irgendeinem Grund Lust haben, Ihre eigenen einzuführen, befolgen Sie einfach die beschriebenen Schritte Hier - Im Prinzip müssen Sie alle bis auf eine Funktion überschreiben.

10. Behandeln Sie statische Inhalte

Express.JS-Anwendungen enthalten in der Regel CSS-Dateien und Bilder. Die Bereitstellung über die Render-Funktion ist ineffizient. Eine intelligentere Methode besteht darin, sie mit einer herkömmlichen HTTP-Anfrage auf fröhliche Weise zu senden. Dies kann über die Funktion 'express.static ()' erreicht werden, mit der ganze Ordner für den Export markiert werden können:

app.use(express.static('public')) app.use(express.static('files'))

11. Ändern Sie den Ereignisfluss

Lassen Sie uns abschließend kurz den Begriff Middleware erwähnen. Im Express.JS-Sprachgebrauch besteht Middleware aus einer oder mehreren Komponenten, die sich in das nebenstehende Flussdiagramm integrieren. Sie können dann verwendet werden, um Anforderungen zu ändern, während sie das Routing-System durchlaufen. Bei korrekter Implementierung können unbegrenzte Funktionen erreicht werden.

Darüber hinaus können einige fertige Komponenten gefunden werden Hier - Besuchen Sie diese Website, bevor Sie ein umfangreiches Entwicklungsprojekt starten.

12. So hosten Sie eine Express.JS-App

Erste Schritte mit Express.JS: So hosten Sie eine Express.JS-App

Betrachten Sie die Plattformen, auf denen Sie Ihre neue Kreation hosten können

Das Testen von Express.JS-basierten Anwendungen ist einfach. Probleme treten auf, wenn die Seite für Dritte zugänglich sein soll. Da sie von der Node.JS-Umgebung generiert wird, kann kein statisches Image für die FTP-Bereitstellung für Webhosting-Dienste erstellt werden.

Theoretisch spricht nichts gegen die Verwendung eines Raspberry Pi, eines OrangePi, eines dedizierten Servers oder einer virtuellen Maschine, die von einem Cloud-Dienst oder einem Webhost-Anbieter gemietet wird, der virtuelles Hosting anbietet. Das Mieten einer vollständigen virtuellen Maschine kann Sie jedoch mit der Verantwortung belasten, die Ausführungsumgebung und das Betriebssystem auf dem neuesten Stand zu halten.

Wenn diese Aufgabe nicht Ihrem Geschmack entspricht, kann ein Platform-as-a-Service-Anbieter eine attraktivere (wenn auch in den meisten Fällen recht teure) Wahl sein.

Viele Entwickler betrachten Heroku mit seinen Preisen in der Abbildung, die diesem Boxout beiliegt, als Goldstandard für alle Dinge, die mit Node.JS-Hosting zusammenhängen.

wie man alle Fotos auf Facebook auf privat setzt

Dies ist jedoch in Wahrheit etwas unfair - Amazon Elastic Beanstalk, Googles Cloud Platform und Microsoft Azure bieten ähnliche Unterstützung für die Remote-Ausführung von Node.JS-basierten Nutzdaten. Bei all diesen Systemen liegt das Hauptproblem in der Handhabung. Während Azure für seine langsamen Bereitstellungen bekannt ist, belasten andere Anbieter Entwickler mit schwer zu verwendenden Back-End-Diensten extrem komplexer Konfigurationssysteme.

Darüber hinaus unterscheidet sich die unterstützte Version der Node.JS-Umgebung von Anbieter zu Anbieter. Natürlich haben wir nicht genug Platz, um das Thema ausführlich zu behandeln. Besuch Mozillas Tutorial zur Bereitstellung und Express.JS ' Leistung und Zuverlässigkeit und Sicherheit Best Practices-Seiten für einige der Probleme. Lesen Sie unbedingt die Dokumentation des Anbieters, um weitere Best Practices zu erhalten.

13. Zukunftssicher Ihre Anwendungen

Erste Schritte mit Express.JS: Zukunftssicher für Ihre Anwendungen

Eine Vielzahl neuer Ergänzungen muss beachtet werden

Der Entwicklungszyklus von Express.JS verläuft alles andere als reibungslos: Die Entwickler sind bekannt für häufige API-Änderungen, die ein Umschreiben des Client-Codes erfordern. Der Wechsel von 3.x zu 4.x war besonders schmerzhaft, weshalb sich einige von Ihnen aufgrund der bevorstehenden Veröffentlichung von 5.x möglicherweise unwohl fühlen.

Während Express.JS 5.0 einige wichtige Änderungen mit sich bringt, sind ihre Auswirkungen geringer. Zunächst wird eine Reihe bereits veralteter Funktionen tatsächlich entfernt. Wenn der Code sie weiterhin verwendet, muss das Upgrade auf 5.x gewartet werden.

Entwickler von View-Engines müssen das Rangwachstum von 'res.render ():' in Bezug auf View-Renderer überprüfen, was dazu geführt hat, dass einige synchrone Implementierungen durchgegangen sind. Version 5 des Frameworks verbessert die Leistung durch Erzwingen des asynchronen Renderns.

Darüber hinaus wurden verschiedene Verbesserungen und Änderungen dokumentiert Hier sieht die Rückkehr einiger ausgestorbener Funktionen aus früheren Versionen - außerdem werden einige langjährige Fehler in der neuen Version behoben.

Beachten Sie schließlich, dass Sie die neue Version bereits ausprobieren können. Erstellen Sie einfach eine Kopie Ihres Quellcodes, greifen Sie zu einem Terminal und geben Sie den folgenden Befehl ein, um das kaum getestete JavaScript eines Archivs herunterzuladen. Sicher sein.

$ npm install express@>=5.0.0- alpha.1 --save

Dieser Artikel wurde ursprünglich in Ausgabe 279 des kreativen Webdesign-Magazins Web Designer veröffentlicht. Kaufen Sie hier die Ausgabe 279 oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: