Node.js - Express Framework

ภาพรวมด่วน

Express เป็นเฟรมเวิร์กเว็บแอปพลิเคชัน Node.js ที่เรียบง่ายและยืดหยุ่นซึ่งมีชุดคุณสมบัติที่มีประสิทธิภาพในการพัฒนาเว็บและแอปพลิเคชันมือถือ ช่วยอำนวยความสะดวกในการพัฒนาแอปพลิเคชันบนเว็บที่ใช้โหนดอย่างรวดเร็ว ต่อไปนี้เป็นคุณสมบัติหลักบางประการของ Express framework -

• อนุญาตให้ตั้งค่ามิดเดิลแวร์เพื่อตอบสนองคำขอ HTTP

• กำหนดตารางเส้นทางที่ใช้เพื่อดำเนินการต่างๆตามวิธี HTTP และ URL

• อนุญาตให้แสดงหน้า HTML แบบไดนามิกโดยอาศัยการส่งอาร์กิวเมนต์ไปยังเทมเพลต

กำลังติดตั้ง Express

ประการแรกติดตั้งเฟรมเวิร์ก Express ทั่วโลกโดยใช้ NPM เพื่อให้สามารถใช้สร้างเว็บแอปพลิเคชันโดยใช้เทอร์มินัลโหนด

$ npm install express --save

คำสั่งดังกล่าวบันทึกการติดตั้งไว้ในไฟล์ node_modulesไดเร็กทอรีและสร้างไดเร็กทอรี express ภายใน node_modules คุณควรติดตั้งโมดูลที่สำคัญต่อไปนี้พร้อมกับ Express -

• body-parser - นี่คือมิดเดิลแวร์ node.js สำหรับจัดการข้อมูลในรูปแบบที่เข้ารหัส JSON, Raw, Text และ URL

• cookie-parser - แยกส่วนหัวคุกกี้และเติมข้อมูล req.cookies ด้วยวัตถุที่คีย์ด้วยชื่อคุกกี้

• multer - นี่คือมิดเดิลแวร์ node.js สำหรับจัดการข้อมูลหลายส่วน / แบบฟอร์ม

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

ตัวอย่างสวัสดีชาวโลก

ต่อไปนี้เป็นแอป Express พื้นฐานที่เริ่มต้นเซิร์ฟเวอร์และฟังพอร์ต 8081 สำหรับการเชื่อมต่อ แอพนี้ตอบสนองด้วยHello World!สำหรับการร้องขอไปยังหน้าแรก สำหรับเส้นทางอื่น ๆ จะตอบสนองด้วย404 Not Found.

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("Example app listening at http://%s:%s", host, port)
})

บันทึกโค้ดด้านบนในไฟล์ชื่อ server.js และรันด้วยคำสั่งต่อไปนี้

$ node server.js

คุณจะเห็นผลลัพธ์ต่อไปนี้ -

Example app listening at http://0.0.0.0:8081

เปิด http://127.0.0.1:8081/ ในเบราว์เซอร์ใดก็ได้เพื่อดูผลลัพธ์ต่อไปนี้

คำขอและการตอบกลับ

แอปพลิเคชัน Express ใช้ฟังก์ชันเรียกกลับซึ่งมีพารามิเตอร์อยู่ request และ response วัตถุ

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

• ออบเจ็กต์คำขอ - อ็อบเจ็กต์คำขอแสดงคำขอ HTTP และมีคุณสมบัติสำหรับสตริงเคียวรีคำร้องขอพารามิเตอร์เนื้อหาส่วนหัว HTTP และอื่น ๆ

• วัตถุตอบสนอง - วัตถุตอบสนองแสดงการตอบสนอง HTTP ที่แอป Express ส่งเมื่อได้รับคำขอ HTTP

คุณสามารถพิมพ์ req และ res ออบเจ็กต์ที่ให้ข้อมูลมากมายที่เกี่ยวข้องกับคำขอและการตอบกลับ HTTP รวมถึงคุกกี้เซสชัน URL ฯลฯ

การกำหนดเส้นทางพื้นฐาน

เราได้เห็นแอปพลิเคชันพื้นฐานที่รองรับคำขอ HTTP สำหรับหน้าแรก การกำหนดเส้นทางหมายถึงการกำหนดวิธีที่แอปพลิเคชันตอบสนองต่อคำขอของไคลเอ็นต์ไปยังปลายทางเฉพาะซึ่งเป็น URI (หรือเส้นทาง) และวิธีการร้องขอ HTTP เฉพาะ (GET, POST และอื่น ๆ )

เราจะขยายโปรแกรม Hello World เพื่อรองรับคำขอ HTTP ประเภทต่างๆ

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

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

บันทึกโค้ดด้านบนในไฟล์ชื่อ server.js และรันด้วยคำสั่งต่อไปนี้

$ node server.js

คุณจะเห็นผลลัพธ์ต่อไปนี้ -

Example app listening at http://0.0.0.0:8081

ตอนนี้คุณสามารถลองคำขอต่างๆได้ที่ http://127.0.0.1:8081 เพื่อดูผลลัพธ์ที่สร้างโดย server.js ต่อไปนี้เป็นภาพหน้าจอสองสามภาพที่แสดงการตอบสนองที่แตกต่างกันสำหรับ URL ต่างๆ

หน้าจอแสดงอีกครั้ง http://127.0.0.1:8081/list_user

หน้าจอแสดงอีกครั้ง http://127.0.0.1:8081/abcd

หน้าจอแสดงอีกครั้ง http://127.0.0.1:8081/abcdefg

ให้บริการไฟล์คงที่

Express มีมิดเดิลแวร์ในตัว express.static เพื่อแสดงไฟล์แบบคงที่เช่นรูปภาพ CSS JavaScript เป็นต้น

คุณเพียงแค่ต้องส่งชื่อของไดเร็กทอรีที่คุณเก็บสินทรัพย์คงที่ของคุณไปยังไฟล์ express.staticมิดเดิลแวร์เพื่อเริ่มให้บริการไฟล์โดยตรง ตัวอย่างเช่นหากคุณเก็บไฟล์รูปภาพ CSS และ JavaScript ไว้ในไดเร็กทอรีที่มีชื่อว่า public คุณสามารถทำได้ -

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

เราจะเก็บภาพบางส่วนไว้ public/images sub-directory ดังนี้ -

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

มาปรับเปลี่ยนแอป "Hello Word" เพื่อเพิ่มฟังก์ชันในการจัดการไฟล์คงที่

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("Example app listening at http://%s:%s", host, port)
})

บันทึกโค้ดด้านบนในไฟล์ชื่อ server.js และรันด้วยคำสั่งต่อไปนี้

$ node server.js

ตอนนี้เปิด http://127.0.0.1:8081/images/logo.png ในเบราว์เซอร์ใดก็ได้และดูผลลัพธ์ต่อไปนี้

รับวิธีการ

นี่คือตัวอย่างง่ายๆที่ส่งผ่านค่าสองค่าโดยใช้เมธอด HTML FORM GET เรากำลังจะใช้process_get เราเตอร์ภายใน server.js เพื่อจัดการอินพุตนี้

<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>

มาบันทึกโค้ดด้านบนใน index.htm และแก้ไข server.js เพื่อจัดการกับคำขอโฮมเพจรวมถึงอินพุตที่ส่งโดยฟอร์ม HTML

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) {
   // Prepare output in JSON format
   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("Example app listening at http://%s:%s", host, port)
})

การเข้าถึงเอกสาร HTML โดยใช้http://127.0.0.1:8081/index.htmจะสร้างแบบฟอร์มต่อไปนี้ -

ตอนนี้คุณสามารถป้อนชื่อและนามสกุลจากนั้นคลิกปุ่มส่งเพื่อดูผลลัพธ์และจะส่งคืนผลลัพธ์ต่อไปนี้ -

{"first_name":"John","last_name":"Paul"}

วิธีการโพสต์

นี่คือตัวอย่างง่ายๆที่ส่งผ่านค่าสองค่าโดยใช้เมธอด HTML FORM POST เรากำลังจะใช้process_get เราเตอร์ภายใน server.js เพื่อจัดการอินพุตนี้

<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>

มาบันทึกโค้ดด้านบนใน index.htm และแก้ไข server.js เพื่อจัดการคำขอโฮมเพจรวมถึงอินพุตที่ส่งโดยฟอร์ม HTML

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

// Create application/x-www-form-urlencoded parser
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) {
   // Prepare output in JSON format
   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("Example app listening at http://%s:%s", host, port)
})

การเข้าถึงเอกสาร HTML โดยใช้http://127.0.0.1:8081/index.htmจะสร้างแบบฟอร์มต่อไปนี้ -

ตอนนี้คุณสามารถป้อนชื่อและนามสกุลจากนั้นคลิกปุ่มส่งเพื่อดูผลลัพธ์ต่อไปนี้ -

{"first_name":"John","last_name":"Paul"}

อัปโหลดไฟล์

โค้ด HTML ต่อไปนี้สร้างฟอร์มตัวอัปโหลดไฟล์ แบบฟอร์มนี้มีแอตทริบิวต์วิธีการตั้งค่าเป็นPOST และแอตทริบิวต์ enctype ถูกตั้งค่าเป็น multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

มาบันทึกโค้ดด้านบนใน index.htm และแก้ไข server.js เพื่อจัดการกับคำขอโฮมเพจรวมถึงการอัปโหลดไฟล์

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/'}));

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

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.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("Example app listening at http://%s:%s", host, port)
})

การเข้าถึงเอกสาร HTML โดยใช้http://127.0.0.1:8081/index.htmจะสร้างแบบฟอร์มต่อไปนี้ -

File Upload:
Select a file to upload: 





NOTE: This is just dummy form and would not work, but it must work at your server.

การจัดการคุกกี้

คุณสามารถส่งคุกกี้ไปยังเซิร์ฟเวอร์ Node.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)