Node.js Express-Framework

Express-Einführung

Express ist ein prägnantes und flexibles Node.js-Webanwendungsframework, das eine Reihe leistungsstarker Funktionen bietet, die Ihnen helfen, verschiedene Webanwendungen und umfangreiche HTTP-Tools zu erstellen.

Mit Express können Sie schnell eine voll funktionsfähige Website erstellen.

Kernfunktionen des Express-Frameworks:

  • Sie können Middleware einrichten, um auf HTTP-Anfragen zu reagieren.

  • Eine Routing-Tabelle wird definiert, um verschiedene HTTP-Anfrageaktionen auszuführen.

  • Sie können HTML-Seiten dynamisch rendern, indem Sie Parameter an Templates übergeben.

Express installieren

Express installieren und in der Abhängigkeitsliste speichern:

$ cnpm install express --save

Der obige Befehl installiert das Express-Framework imnode_modules-Verzeichnis des aktuellen Verzeichnisses,node_modulesUnter diesem Verzeichnis wird automatisch ein express-Verzeichnis erstellt. Die folgenden wichtigen Module müssen zusammen mit dem Express-Framework installiert werden:

  • body-parser- Node.js-Middleware zur Verarbeitung von JSON-, Raw-, Text- und URL-kodierten Daten.

  • cookie-parser- Dies ist ein Werkzeug zum Parsen von Cookies. Sie können die eingehenden Cookies über req.cookies abrufen und in Objekte umwandeln.

  • multer- Node.js-Middleware zur Verarbeitung von Formulardaten mit enctype="multipart/form-data" (legt die MIME-Kodierung des Formulars fest).

$ cnpm install body-parser --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

Nach der Installation können wir die von Express verwendete Versionsnummer überprüfen:

$ cnpm list express
/data/www/node
└── [email protected]  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

Erstes Express-Framework-Beispiel

Als Nächstes verwenden wir das Express-Framework, um "Hello World" auszugeben.

Im folgenden Beispiel binden wir das express-Modul ein und antworten mit der Zeichenkette "Hello World", nachdem der Client eine Anfrage gestellt hat.

Erstellen Sie die Datei express_demo.js mit dem folgenden Code:

Code der Datei express_demo.js:

//express_demo.js-Datei var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Anwendungsinstanz, Zugriffsadresse ist http://%s:%s", host, port) })

Führen Sie den obigen Code aus:

$ node express_demo.js 
应用实例，访问地址为 http://0.0.0.0:8081

Besuchen Sie http://127.0.0.1:8081 im Browser, das Ergebnis ist in der folgenden Abbildung dargestellt:

Anfrage und Antwort

Express-Anwendungen verwenden die Parameter von Callback-Funktionen:requestundresponseObjekte, um request- und response-Daten zu verarbeiten.

app.get('/', function (req, res) {
   // --
})

requestundresponseDetaillierte Einführung in die Objekte:

Request-Objekt- Das Request-Objekt repräsentiert eine HTTP-Anfrage und enthält Eigenschaften wie den Request-Query-String, Parameter, Inhalt und HTTP-Header. Häufige Eigenschaften sind:

  1. req.app: Wenn der Callback eine externe Datei ist, verwende req.app, um auf die Express-Instanz zuzugreifen
  2. req.baseUrl: Ruft den URL-Pfad ab, unter dem die Route aktuell eingebunden ist
  3. req.body / req.cookies: Ruft den „Request-Body“ / die Cookies ab
  4. req.fresh / req.stale: Ermittelt, ob die Anfrage noch „fresh“ ist
  5. req.hostname / req.ip: Ruft den Hostnamen und die IP-Adresse ab
  6. req.originalUrl: Ruft die ursprüngliche Anfrage-URL ab
  7. req.params: Ruft die Parameter der Route ab
  8. req.path: Ruft den Anfragepfad ab
  9. req.protocol: Ruft den Protokolltyp ab
  10. req.query: Ruft den Query-Parameter-String der URL ab
  11. req.route: Ruft die aktuell übereinstimmende Route ab
  12. req.subdomains: Ruft die Subdomains ab
  13. req.accepts(): Überprüft die akzeptablen Dokumenttypen für die Anfrage
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages: Gibt die erste akzeptable Zeichenkodierung der angegebenen Zeichensätze zurück
  15. req.get(): Ruft den angegebenen HTTP-Anfrage-Header ab
  16. req.is(): Bestimmt den MIME-Typ des Anfrage-Headers Content-Type

Response-Objekt- Das Response-Objekt repräsentiert die HTTP-Antwort, d. h. die HTTP-Antwortdaten, die beim Empfang einer Anfrage an den Client gesendet werden. Häufige Eigenschaften sind:

  1. res.app: Entspricht req.app
  2. res.append(): Hängt den angegebenen HTTP-Header an
  3. res.set() setzt die zuvor gesetzten Header nach res.append() zurück
  4. res.cookie(name, value [, option]): Setzt Cookie
  5. Option: domain / expires / httpOnly / maxAge / path / secure / signed
  6. res.clearCookie(): Löscht Cookie
  7. res.download(): Überträgt die Datei unter dem angegebenen Pfad
  8. res.get(): Gibt den angegebenen HTTP-Header zurück
  9. res.json(): Sendet eine JSON-Antwort
  10. res.jsonp(): Sendet eine JSONP-Antwort
  11. res.location(): Setzt nur den Location-HTTP-Header der Antwort, ohne den Statuscode zu setzen oder die Antwort zu schließen.
  12. res.redirect(): Setzt den Location-HTTP-Header der Antwort und setzt den Statuscode 302
  13. res.render(view, [locals], callback): Rendert eine View und übergibt die gerenderte Zeichenkette an den Callback. Wenn während des Renderns ein Fehler auftritt, wird next(err) automatisch aufgerufen. Dem Callback werden der eventuell aufgetretene Fehler und die gerenderte Seite übergeben, sodass keine automatische Ausgabe erfolgt.
  14. res.send(): Sendet eine HTTP-Antwort
  15. res.sendFile(path [, options] [, fn]): Überträgt die Datei unter dem angegebenen Pfad - Setzt Content-Type automatisch basierend auf der Dateiendung
  16. res.set(): Setzt HTTP-Header; Sie können mehrere Header gleichzeitig setzen, indem Sie ein Objekt übergeben
  17. res.status(): Setzt den HTTP-Statuscode
  18. res.type(): Setzt den MIME-Typ von Content-Type

Routing

Wir haben bereits die grundlegenden Anwendungen von HTTP-Anfragen kennengelernt, und das Routing bestimmt, wer (das angegebene Skript) auf Client-Anfragen antwortet.

In HTTP-Anfragen können wir die angeforderte URL und GET/POST-Parameter durch Routing extrahieren.

Als Nächstes erweitern wir Hello World, indem wir einige Funktionen hinzufügen, um mehr Arten von HTTP-Anfragen zu verarbeiten.

Erstellen Sie die Datei express_demo2.js mit dem folgenden Code:

Code der Datei express_demo2.js:

var express = require('express'); var app = express(); //Startseite gibt "Hello World" aus app.get('/', function (req, res) { console.log("GET-Anfrage der Startseite"); res.send('Hello GET'); }) //POST-Anfrage app.post('/', function (req, res) { console.log("POST-Anfrage der Startseite"); res.send('Hello POST'); }) //Antwort der /del_user-Seite app.get('/del_user', function (req, res) { console.log("/del_user antwortet auf DELETE-Anfrage"); res.send('Löschseite'); }) //GET-Anfrage für /list_user-Seite app.get('/list_user', function (req, res) { console.log("GET-Anfrage für /list_user"); res.send('Benutzerlistenseite'); }) //Auf GET-Anfragen für Seiten abcd, abxcd, ab123cd usw. antworten. app.get('/ab*cd', function(req, res) { console.log("GET-Anfrage für /ab*cd"); res.send('Abgleich mit regulärem Ausdruck'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Anwendungsbeispiel, Zugriffsadresse ist http://%s:%s", host, port) })

Führen Sie den obigen Code aus:

$ node express_demo2.js 
应用实例，访问地址为 http://0.0.0.0:8081

Als Nächstes können Sie versuchen, verschiedene Adressen wie http://127.0.0.1:8081 aufzurufen, um den Effekt zu sehen.

Rufen Sie http://127.0.0.1:8081/list_user im Browser auf, das Ergebnis ist in der folgenden Abbildung dargestellt:

Rufen Sie http://127.0.0.1:8081/abcd im Browser auf; das Ergebnis wird in der folgenden Abbildung gezeigt:

Rufen Sie http://127.0.0.1:8081/abcdefg im Browser auf; das Ergebnis wird in der folgenden Abbildung gezeigt:

Statische Dateien

Express bietet eingebaute Middleware express.static , um statische Dateien wie Bilder, CSS, JavaScript usw. bereitzustellen.

Sie können express.static als Middleware verwenden, um den Pfad für statische Dateien festzulegen. Wenn Sie beispielsweise Bilder, CSS- und JavaScript-Dateien im Verzeichnis public ablegen, können Sie schreiben:

app.use('/public', express.static('public'));

Wir können einige Bilder im Verzeichnis public/images ablegen, wie unten gezeigt:

node_modules
server.js
public/
public/images
public/images/logo.png

Lassen Sie uns die "Hello World"-Anwendung erneut ändern, um die Funktionalität zur Verarbeitung statischer Dateien hinzuzufügen.

Erstellen Sie die Datei express_demo3.js; der Code lautet wie folgt:

Code der Datei express_demo3.js:

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Anwendungsbeispiel, Zugriffsadresse ist http://%s:%s", host, port) })

Führen Sie den obigen Code aus:

$ node express_demo3.js 
应用实例，访问地址为 http://0.0.0.0:8081

Führen Sie den obigen Code aus:

Rufen Sie http://127.0.0.1:8081/public/images/logo.png im Browser auf (dieses Beispiel verwendet das Beispiel-Tutorial-Logo), das Ergebnis ist in der folgenden Abbildung dargestellt:

GET-Methode

Das folgende Beispiel zeigt, wie zwei Parameter über die GET-Methode in einem Formular übermittelt werden. Wir können denprocess_getRouter verwenden, um die Eingabe zu verarbeiten:

Code der Datei index.html:

<html> <body> <form action="/process_get" method="GET"> Vorname: <input type="text" name="first_name"> <br> Nachname: <input type="text" name="last_name"> <input type="submit" value="Absenden"> </form> </body> </html>

Code der Datei server.js:

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.get('/process_get', function (req, res) { //JSON-Format ausgeben var response = { "first_name":req.query.first_name, "last_name":req.query.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Anwendungsbeispiel, Zugriffsadresse ist http://%s:%s", host, port) })

Führen Sie den obigen Code aus:

node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Rufen Sie http://127.0.0.1:8081/index.html im Browser auf, wie in der Abbildung gezeigt:

Jetzt können Sie Daten in das Formular eingeben und es absenden, wie unten gezeigt:

POST-Methode

Das folgende Beispiel zeigt, wie zwei Parameter über die POST-Methode in einem Formular übermittelt werden. Wir können denprocess_postRouter verwenden, um die Eingabe zu verarbeiten:

Code der Datei index.html:

<html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> Vorname: <input type="text" name="first_name"> <br> Nachname: <input type="text" name="last_name"> <input type="submit" value="Absenden"> </form> </body> </html>

Code der Datei server.js:

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); //Erstellen Sie einen Parser für die Kodierung application/x-www-form-urlencoded var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.post('/process_post', urlencodedParser, function (req, res) { //JSON-Format ausgeben var response = { "first_name":req.body.first_name, "last_name":req.body.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Anwendungsbeispiel, Zugriffsadresse ist http://%s:%s", host, port) })

Führen Sie den obigen Code aus:

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

Rufen Sie http://127.0.0.1:8081/index.html im Browser auf, wie in der Abbildung gezeigt:

Jetzt können Sie Daten in das Formular eingeben und es absenden, wie unten gezeigt:

Datei-Upload

Unten erstellen wir ein Formular zum Hochladen von Dateien unter Verwendung der POST-Methode, wobei das enctype-Attribut des Formulars auf multipart/form-data gesetzt ist.

Code der Datei index.html:

<html> <head> <title>Datei-Upload-Formular</title> </head> <body> <h3>Datei-Upload:</h3>Wählen Sie eine Datei zum Hochladen aus:<br /> <form action="/file_upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" size="50" /> <br /> <input type="submit" value="Datei hochladen" /> </form> </body> </html>

Code der Datei server.js:

var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); app.use('/public', express.static('public')); app.use(bodyParser.urlencoded({ extended: false })); app.use(multer({ dest: '/tmp/'}).array('image')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.post('/file_upload', function (req, res) { console.log(req.files[0]); //Informationen zur hochgeladenen Datei var des_file = __dirname + "/" + req.files[0].originalname; fs.readFile( req.files[0].path, function (err, data) { fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'Datei erfolgreich hochgeladen', filename:req.files[0].originalname }; } console.log( response ); res.end( JSON.stringify( response ) ); }); }); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Anwendungsbeispiel, Zugriffsadresse ist http://%s:%s", host, port) })

Führen Sie den obigen Code aus:

$ node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Rufen Sie http://127.0.0.1:8081/index.html im Browser auf, wie in der Abbildung gezeigt:

Jetzt können Sie Daten in das Formular eingeben und es absenden, wie unten gezeigt:

Cookie

Wir können Middleware verwenden, um Cookie-Informationen an den Node.js-Server zu senden. Der folgende Code gibt den vom Client gesendeten Cookie aus:

Code der Datei express_cookie.js:

//express_cookie.js Datei var express = require('express') var cookieParser = require('cookie-parser') var util = require('util'); var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Cookies: " + util.inspect(req.cookies)); }) app.listen(8081)

Führen Sie den obigen Code aus:

$ node express_cookie.js

Jetzt können Sie auf http://127.0.0.1:8081 zugreifen und die Terminalausgabe anzeigen, wie unten gezeigt:

Verwandte Materialien

Weitere Erweiterungen