Le meilleur didacticiel cadre Node.js express en 2024, dans ce didacticiel, vous pouvez apprendre profil express,Installation express,La première instance de cadre express,Demande et réponse,routage,Les fichiers statiques,Méthode GET,méthode POST,File Upload,Gestion des cookies,Informations connexes,
Express est un cadre d'application node.js Web simple et flexible qui offre une gamme de fonctionnalités puissantes pour vous aider à créer une variété d'applications Web, et de riches outils de HTTP.
Utilisez Express peut rapidement mettre en place un site Web entièrement fonctionnel.
Express caractéristiques essentielles du cadre:
Middleware peut être configuré pour répondre aux requêtes HTTP.
Il définit la table de routage pour effectuer différentes requêtes HTTP action.
Vous pouvez passer des paramètres au modèle pour rendre dynamiquement des pages HTML.
Installation Express et enregistrez-le à compter sur la liste:
$ npm install express --save
La commande ci - dessus Exprimez cadre est monté répertoirenode_modules le répertoire courant, le répertoire sera automatiquement créé exprimer répertoire node_modules.Plusieurs besoins importants et le module Express est installé avec le cadre:
corps-parser - node.js middleware, JSON, Raw, texte et des données d'URL codées pour le traitement.
cookie parser - Ceci est un outil pour l' analyse Cookie.Par req.cookies peut arriver à passer le cookie, et les transformer en objets.
multer - node.js middleware pour le traitement enctype = "multipart / form-data " ( sous forme de jeu codage MIME) des données de formulaire.
$ npm install body-parser --save $ npm install cookie-parser --save $ npm install multer --save
Ensuite, nous utilisons le cadre Express pour la sortie "Bonjour tout le monde".
L'exemple suivant, nous avons introduit le module express, et le client demandeur, la réponse à la chaîne "Bonjour tout le monde".
Créer un fichier express_demo.js, le code est le suivant:
//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) })
Exécutez le code ci-dessus:
$ node express_demo.js 应用实例,访问地址为 http://0.0.0.0:8081
Accès http://127.0.0.1:8081 dans le navigateur, les résultats indiqués ci-dessous:
l' application Express utilise lesparamètres de la fonction de rappel:demande et deréponsedes objets à traiter les demandes et les réponses données.
app.get('/', function (req, res) { // -- })
introduire lademande spécifique et l' objet de réponse:
Demande Objet - Demande objet représente une requête HTTP contient le paramètre de chaîne demande de requête, le contenu, en- tête HTTP attributs.attributs communs sont:
Objets Réponse - objet de réponse représente une réponse HTTP, HTTP qui est, lors de la réception d' une demande envoyée aux données de réponse du client. attributs communs sont:
Nous connaissons déjà les demandes de base demande HTTP et itinéraire déterminé par qui (spécifier un script) pour répondre aux demandes des clients.
Dans la requête HTTP, nous pouvons extraire le routage d'URL et GET / POST demande de paramètre.
Ensuite, nous étendons Bonjour tout le monde, d'ajouter quelques fonctionnalités à gérer plusieurs types de requêtes HTTP.
Créer un fichier express_demo2.js, le code est le suivant:
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) })
Exécutez le code ci-dessus:
$ node express_demo2.js 应用实例,访问地址为 http://0.0.0.0:8081
Ensuite, vous pouvez essayer d'accéder à http://127.0.0.1:8081 adresse différente, pour voir l'effet.
http://127.0.0.1:8081/list_user d'accès dans le navigateur, les résultats comme indiqué ci-dessous:
http://127.0.0.1:8081/abcd d'accès dans le navigateur, les résultats comme indiqué ci-dessous:
Accès http://127.0.0.1:8081/abcdefg dans le navigateur, les résultats indiqués ci-dessous:
Express offre intégrée middlewareexpress.static pour définir des fichiers statiques tels que: images, CSS, JavaScript et ainsi de suite.
Vous pouvez utiliser un middlewareexpress.static pour définir un chemin de fichier statique.Par exemple, si vous vous imaginez, CSS, fichiers JavaScript dans le répertoire public, vous pouvez écrire:
app.use(express.static('public'));
Nous pouvons aller au public / images répertoire délégué quelques images, comme suit:
node_modules server.js public/ public/images public/images/logo.png
Modifions la prochaine "Bonjour mot" ajouter des fichiers statiques de fonctionnalité de traitement des demandes.
Créer un fichier express_demo3.js, le code est le suivant:
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) })
Exécutez le code ci-dessus:
$ node express_demo3.js 应用实例,访问地址为 http://0.0.0.0:8081
Exécutez le code ci-dessus:
L'exemple suivant illustre les deux paramètres dans le formulaire présenté par la méthode GET, nous pouvons utiliser leprocess_get routeur server.js dans le fichier à traiter l'entrée:
Code de fichier index.htm est le suivant:
<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>
Code de fichier server.js est la suivante:
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) })
Exécutez le code ci-dessus:
node server.js 应用实例,访问地址为 http://0.0.0.0:8081
Navigateur accès http://127.0.0.1:8081/index.htm, comme le montre:
Maintenant, vous pouvez entrer des données dans les formulaires, et soumettre la présentation suivante:
L'exemple suivant montre deux paramètres via la méthode POST pour soumettre le formulaire, nous pouvons utiliserle process_post du routeur dans le fichier à traiter l'entrée:
Code de fichier index.htm modifié comme suit:
<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>
Code de fichier server.js modifié comme suit:
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) })
Exécutez le code ci-dessus:
$ node server.js 应用实例,访问地址为 http://0.0.0.0:8081
Navigateur accès http://127.0.0.1:8081/index.htm, comme le montre:
Maintenant, vous pouvez entrer des données dans les formulaires, et soumettre la présentation suivante:
Ci-dessous, nous créons un formulaire pour télécharger un fichier en utilisant la méthode POST, l'attribut sous forme de enctype multipart / form-data.
Code de fichier index.htm modifié comme suit:
<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>
Code de fichier server.js modifié comme suit:
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) })
Exécutez le code ci-dessus:
$ node server.js 应用实例,访问地址为 http://0.0.0.0:8081
Navigateur accès http://127.0.0.1:8081/index.htm, comme le montre:
Maintenant, vous pouvez entrer des données dans les formulaires, et soumettre la présentation suivante:
Nous pouvons utiliser le middleware envoie des informations de cookie au serveur Node.js, le code suivant renvoie les informations de cookie est envoyé par le client:
// 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)
Exécutez le code ci-dessus:
$ node express_cookie.js
Maintenant, vous pouvez accéder et consulter http://127.0.0.1:8081 sortie des informations de terminal, la suite de la présentation: