Das beste Node.js Express Rahmen-Tutorial im Jahr 2024. In diesem Tutorial können Sie Express Profil,Die Installation Express,Der erste Rahmeninstanz Express,Anfrage und Antwort,Routing,Statische Dateien,GET-Methode,POST-Methode,Datei-Upload,Cookie-Verwaltung,Weiterführende Informationen, lernen
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 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
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:
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:
Response - Objekte - Response - Objekt stellt eine HTTP - Antwort, HTTP , das heißt, wenn eine Anforderung an den Client - Antwortdaten gesendet wird. Gemeinsame Attribute sind:
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:
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:
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:
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:
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:
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: