Latest web development tutorials

Node.js Express Rahmen

Express Profil

Express ist eine einfache und flexible node.js Web-Applikations-Framework, das eine Reihe von leistungsfähigen Funktionen bietet Ihnen zu helfen, eine Vielzahl von Web-Anwendungen und Rich-HTTP-Tools erstellen.

Verwenden Sie Express können eine voll funktionsfähige Website schnell eingerichtet.

Express Rahmenkernfunktionen:

  • Middleware kann so eingestellt werden, um HTTP-Anfragen zu reagieren.

  • Es definiert die Routing-Tabelle für verschiedene HTTP-Request-Aktion ausführen.

  • Sie können Parameter an die Vorlage übergeben, um dynamisch HTML-Seiten machen.


Die Installation Express

Die Installation Express und speichern Sie sie auf der Liste zu verlassen:

$ npm install express --save

Der obige Befehl wird Rahmen Express wirdnode_modules Verzeichnis das aktuelle Verzeichnis montiert ist , wird das Verzeichnis automatisch ausdrücken node_modulesVerzeichnis erstellt. Mehrere wichtige Bedürfnisse und Express-Modul ist mit dem Rahmen installiert:

  • Körper-Parser - node.js Middleware, JSON, Rohmaterial, Text und URL-kodierte Daten für die Verarbeitung.

  • Cookie-Parser - Dies ist ein Werkzeug für die Cookie - Parsing.Durch req.cookies kann über den Cookie passieren zu bekommen, und sie in Objekte.

  • multer - node.js Middleware für die Verarbeitung enctype = "multipart / form-data " ( Satz Form MIME - Codierung) Formulardaten.

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

Der erste Rahmeninstanz Express

Als nächstes verwenden wir den Express Rahmen zur Ausgabe von "Hallo Welt".

Das folgende Beispiel, das wir eingeführt Express-Modul und den anfordernden Client, die Antwort auf "Hallo Welt" String.

Erstellen express_demo.js Datei, wird der Code wie folgt:

//express_demo.js 文件
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("应用实例,访问地址为 http://%s:%s", host, port)

})

Führen Sie den Code oben:

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

Zugang http://127.0.0.1:8081 im Browser, wobei die Ergebnisse wie folgt:


Anfrage und Antwort

Express - Anwendung verwendet Callback - FunktionParameter: Anfrage und AntwortObjekte auf Datenanforderungen und Antworten behandeln.

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

einführen spezifischeAnfrage und Antwort- Objekt:

Request - Objekt- Request - Objekt stellt eine HTTP - Anforderung enthält die Anfrage Abfrage - String - Parameter, Inhalt, HTTP - Header - Attribute. Gemeinsame Attribute sind:

  1. req.app: Beim Rückruf in eine externe Datei, mit Zugang req.app Beispiele ausdrücken
  2. req.baseUrl: Lassen Sie sich derzeit URL-Routing installiert
  3. req.body / req.cookies: get "-Anfrage Körper" / Cookies
  4. req.fresh / req.stale: bestimmen, ob die Anforderung immer noch "frisch"
  5. req.hostname / req.ip: erhalten Sie den Hostnamen und IP-Adresse
  6. req.originalUrl: Holen Sie sich das ursprüngliche URL
  7. req.params: Route planen Parameter
  8. req.path: Holen Sie sich das Anforderungspfad
  9. req.protocol: Get-Typ-Protokoll
  10. req.query: Holen Sie sich die URL Query-String-Parameter
  11. req.route: Erhalten Sie die aktuelle passende Route
  12. req.subdomains: Holen Sie sich eine Sub-Domain
  13. req.accpets (): Überprüfen Sie die Request-Header-Anforderungstyp Akzeptieren
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages
  15. req.get (): Ruft die angegebene HTTP-Request-Header
  16. req.is (): Wenn der Request-Header Content-Type MIME-Typ

Response - Objekte - Response - Objekt stellt eine HTTP - Antwort, HTTP , das heißt, wenn eine Anforderung an den Client - Antwortdaten gesendet wird. Gemeinsame Attribute sind:

  1. res.app: wie req.app
  2. res.append (): Gibt zusätzliche HTTP-Header
  3. res.set () zuerst vor res.append () wird zurückgesetzt, um die Einstellungen von
  4. res.cookie (Name, Wert [, Option]): Set-Plätzchen
  5. opition: Domain / abgelaufen / Httponly / maxAge / path / secure / unterzeichnet
  6. res.clearCookie (): Löschen Sie Cookies
  7. (Res.download): Gibt den Übertragungsweg der Datei
  8. res.get (): Gibt den HTTP-Header
  9. res.json (): Transfer JSON-Antwort
  10. res.jsonp (): Übertragung JSONP Antwort
  11. res.location (): Nur die Lage HTTP-Response-Header gesetzt, nicht gesetzt oder in der Nähe Antwortstatuscode
  12. res.redirect (): Setzt die HTTP-Location-Response-Header, und legen Sie den Statuscode 302
  13. res.send (): HTTP-Antwort-Übertragung
  14. res.sendFile (Pfad [, Optionen] [fn]): Gibt den Übertragungsweg der Datei - automatisch Content-Type-Erweiterung wird basierend auf Datei
  15. res.set (): Setzt den HTTP-Header, können Sie mehrere eingehende Objektkopf gesetzt
  16. res.status (): Setzt den HTTP-Statuscode
  17. res.type (): der Content-Type MIME-Typ festgelegt

Routing

Wir wissen bereits, die grundlegenden Anwendung HTTP-Anfragen und Route bestimmt, von wem (ein Skript angeben) auf Client-Anfragen zu reagieren.

In der HTTP-Anforderung, können wir die URL-Routing extrahieren und GET / POST-Parameter Anfrage.

Als nächstes werden wir Hallo Welt, erweitern einige Funktionen hinzufügen, um mehr Arten von HTTP-Anforderungen verarbeiten.

Erstellen express_demo2.js Datei, wird der Code wie folgt:

var express = require('express');
var app = express();

//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})


//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})

//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})

//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})

// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})


var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

Führen Sie den Code oben:

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

Dann können Sie versuchen http://127.0.0.1:8081 andere Adresse zuzugreifen, um den Effekt zu sehen.

Zugang http://127.0.0.1:8081/list_user im Browser, wobei die Ergebnisse wie folgt:

Zugang http://127.0.0.1:8081/abcd im Browser, wobei die Ergebnisse wie folgt:

Zugang http://127.0.0.1:8081/abcdefg im Browser, wobei die Ergebnisse wie folgt:


Statische Dateien

Express bietet eine integrierte in Middleexpress.static statische Dateien zu setzen wie zum Beispiel: Bilder, CSS, JavaScript und so weiter.

Sie könnenexpress.static Middleware eine statische Dateipfad zu setzen.Zum Beispiel, wenn Sie Bild, CSS, JavaScript-Dateien im öffentlichen Verzeichnis, können Sie schreiben:

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

Wir können auch zum öffentlichen Verzeichnis / images einige Bilder übertragen, wie folgt:

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

Lassen Sie uns die nächste "Hallo Wort" ändern Anwendungsverarbeitung Funktionalität statische Dateien hinzufügen.

Erstellen express_demo3.js Datei, wird der Code wie folgt:

var express = require('express');
var app = express();

app.use(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("应用实例,访问地址为 http://%s:%s", host, port)

})

Führen Sie den Code oben:

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

Führen Sie den Code oben:


GET-Methode

Das folgende Beispiel zeigt die beiden Parameter in der von der GET - Methode vorgelegten Form, können wir den Router server.jsprocess_get innerhalb der Datei verwenden , um die Eingabe zu verarbeiten:

index.htm Datei Code ist wie folgt:

<html>
<body>
<form action="http://127.0.0.1:8081/process_get" method="GET">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js Datei Code ist wie folgt:

var express = require('express');
var app = express();

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

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

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

   // 输出 JSON 格式
   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("应用实例,访问地址为 http://%s:%s", host, port)

})

Führen Sie den Code oben:

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

Browser-Zugriff http://127.0.0.1:8081/index.htm, wie hier gezeigt:

Jetzt können Sie Daten in Formulare eingeben, und senden Sie die folgende Darstellung:


POST-Methode

Das folgende Beispiel zeigt zwei Parameter über die POST - Methode das Formular zu senden, wir die Router server.jsprocess_post innerhalb der Datei , um die Eingabe zu verarbeiten , verwenden können:

index.htm Datei Code wie folgt geändert:

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js Datei Code wie folgt geändert:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

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

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {

   // 输出 JSON 格式
   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("应用实例,访问地址为 http://%s:%s", host, port)

})

Führen Sie den Code oben:

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

Browser-Zugriff http://127.0.0.1:8081/index.htm, wie hier gezeigt:

Jetzt können Sie Daten in Formulare eingeben, und senden Sie die folgende Darstellung:


Datei-Upload

Im Folgenden ein Formular für das Hochladen einer Datei mit dem POST-Methode, das Formular enctype Attribut auf multipart / form-data erstellen.

index.htm Datei Code wie folgt geändert:

<html>
<head>
<title>文件上传表单</title>
</head>
<body>
<h3>文件上传:</h3>
选择一个文件上传: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上传文件" />
</form>
</body>
</html>

server.js Datei Code wie folgt geändert:

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}).array('image'));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {

   console.log(req.files[0]);  // 上传的文件信息

   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:'File uploaded successfully', 
                   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("应用实例,访问地址为 http://%s:%s", host, port)

})

Führen Sie den Code oben:

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

Browser-Zugriff http://127.0.0.1:8081/index.htm, wie hier gezeigt:

Jetzt können Sie Daten in Formulare eingeben, und senden Sie die folgende Darstellung:


Cookie-Verwaltung

Wir können die Middleware sendet Cookie-Informationen an den Server Node.js, der folgende Code gibt die Cookie-Informationen durch den Client gesendet wird:

// express_cookie.js 文件
var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
  console.log("Cookies: ", req.cookies)
})

app.listen(8081)

Führen Sie den Code oben:

$ node express_cookie.js 

Jetzt können Sie zugreifen und sehen http://127.0.0.1:8081 Ausgangsklemme Informationen, die folgende Darstellung:


Weiterführende Informationen