Node.js - Express Framework

Tổng quan về Express

Express là một khung ứng dụng web Node.js tối thiểu và linh hoạt, cung cấp một bộ tính năng mạnh mẽ để phát triển các ứng dụng web và di động. Nó tạo điều kiện cho sự phát triển nhanh chóng của các ứng dụng Web dựa trên Node. Sau đây là một số tính năng cốt lõi của Express framework:

  • Cho phép thiết lập phần mềm trung gian để phản hồi các Yêu cầu HTTP.

  • Xác định một bảng định tuyến được sử dụng để thực hiện các hành động khác nhau dựa trên Phương thức HTTP và URL.

  • Cho phép hiển thị động các Trang HTML dựa trên việc chuyển các đối số cho các mẫu.

Cài đặt Express

Trước hết, hãy cài đặt khung công tác Express trên toàn cầu bằng cách sử dụng NPM để nó có thể được sử dụng để tạo một ứng dụng web bằng thiết bị đầu cuối nút.

$ npm install express --save

Lệnh trên lưu cài đặt cục bộ trong node_modulesthư mục và tạo một thư mục thể hiện bên trong node_modules. Bạn nên cài đặt các mô-đun quan trọng sau cùng với express -

  • body-parser - Đây là phần mềm trung gian node.js để xử lý dữ liệu biểu mẫu được mã hóa JSON, Raw, Text và URL.

  • cookie-parser - Phân tích cú pháp tiêu đề Cookie và điền req.cookies với một đối tượng được khóa bởi tên cookie.

  • multer - Đây là một phần mềm trung gian node.js để xử lý dữ liệu đa phần / biểu mẫu.

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

Hello world Ví dụ

Sau đây là một ứng dụng Express rất cơ bản khởi động máy chủ và lắng nghe trên cổng 8081 để kết nối. Ứng dụng này phản hồi vớiHello World!cho các yêu cầu đến trang chủ. Đối với mọi đường dẫn khác, nó sẽ phản hồi bằng404 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)
})

Lưu đoạn mã trên trong một tệp có tên server.js và chạy nó bằng lệnh sau.

$ node server.js

Bạn sẽ thấy kết quả sau:

Example app listening at http://0.0.0.0:8081

Mở http://127.0.0.1:8081/ trong bất kỳ trình duyệt nào để xem kết quả sau.

Yêu cầu & phản hồi

Ứng dụng Express sử dụng một hàm gọi lại có các tham số request và response các đối tượng.

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

  • Đối tượng yêu cầu - Đối tượng yêu cầu đại diện cho yêu cầu HTTP và có các thuộc tính cho chuỗi truy vấn yêu cầu, tham số, nội dung, tiêu đề HTTP, v.v.

  • Đối tượng phản hồi - Đối tượng phản hồi đại diện cho phản hồi HTTP mà ứng dụng Express gửi khi nhận được yêu cầu HTTP.

Bạn có thể in req và res các đối tượng cung cấp nhiều thông tin liên quan đến yêu cầu và phản hồi HTTP bao gồm cookie, phiên, URL, v.v.

Định tuyến cơ bản

Chúng tôi đã thấy một ứng dụng cơ bản phục vụ yêu cầu HTTP cho trang chủ. Định tuyến đề cập đến việc xác định cách ứng dụng phản hồi yêu cầu của khách hàng tới một điểm cuối cụ thể, đó là URI (hoặc đường dẫn) và phương thức yêu cầu HTTP cụ thể (GET, POST, v.v.).

Chúng tôi sẽ mở rộng chương trình Hello World của mình để xử lý nhiều loại yêu cầu HTTP hơn.

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

Lưu đoạn mã trên trong một tệp có tên server.js và chạy nó bằng lệnh sau.

$ node server.js

Bạn sẽ thấy kết quả sau:

Example app listening at http://0.0.0.0:8081

Bây giờ bạn có thể thử các yêu cầu khác nhau tại http://127.0.0.1:8081 để xem đầu ra do server.js tạo ra. Sau đây là một vài ảnh chụp màn hình hiển thị các phản hồi khác nhau cho các URL khác nhau.

Màn hình hiển thị lại http://127.0.0.1:8081/list_user

Màn hình hiển thị lại http://127.0.0.1:8081/abcd

Màn hình hiển thị lại http://127.0.0.1:8081/abcdefg

Cung cấp tệp tĩnh

Express cung cấp một phần mềm trung gian được tích hợp sẵn express.static để cung cấp các tệp tĩnh, chẳng hạn như hình ảnh, CSS, JavaScript, v.v.

Bạn chỉ cần chuyển tên của thư mục nơi bạn giữ các tài sản tĩnh của mình, cho express.staticphần mềm trung gian để bắt đầu cung cấp các tệp trực tiếp. Ví dụ: nếu bạn giữ các tệp hình ảnh, CSS và JavaScript của mình trong một thư mục có tên công khai, bạn có thể làm điều này -

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

Chúng tôi sẽ giữ một vài hình ảnh trong public/images thư mục con như sau:

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

Hãy sửa đổi ứng dụng "Hello Word" để thêm chức năng xử lý các tệp tĩnh.

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

Lưu đoạn mã trên trong một tệp có tên server.js và chạy nó bằng lệnh sau.

$ node server.js

Bây giờ, mở http://127.0.0.1:8081/images/logo.png trong bất kỳ trình duyệt nào và xem kết quả sau.

Phương pháp GET

Đây là một ví dụ đơn giản chuyển hai giá trị bằng phương thức HTML FORM GET. Chúng tôi sẽ sử dụngprocess_get bộ định tuyến bên trong server.js để xử lý đầu vào này.

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

Hãy lưu mã trên trong index.htm và sửa đổi server.js để xử lý các yêu cầu trang chủ cũng như đầu vào được gửi bởi biểu mẫu 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)
})

Việc truy cập tài liệu HTML bằng http://127.0.0.1:8081/index.htm sẽ tạo ra biểu mẫu sau:

Bây giờ bạn có thể nhập Họ và Tên rồi nhấp vào nút gửi để xem kết quả và nó sẽ trả về kết quả sau:

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

Phương pháp ĐĂNG

Đây là một ví dụ đơn giản chuyển hai giá trị bằng phương thức HTML FORM POST. Chúng tôi sẽ sử dụngprocess_get bộ định tuyến bên trong server.js để xử lý đầu vào này.

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

Hãy lưu đoạn mã trên trong index.htm và sửa đổi server.js để xử lý các yêu cầu trang chủ cũng như đầu vào được gửi bởi biểu mẫu 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)
})

Việc truy cập tài liệu HTML bằng http://127.0.0.1:8081/index.htm sẽ tạo ra biểu mẫu sau:

Bây giờ bạn có thể nhập Họ và Tên, sau đó nhấp vào nút gửi để xem kết quả sau:

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

Tải lên tệp

Mã HTML sau tạo một biểu mẫu trình tải lên tệp. Biểu mẫu này có thuộc tính phương thức được đặt thànhPOST và thuộc tính enctype được đặt thành 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>

Hãy lưu mã trên trong index.htm và sửa đổi server.js để xử lý các yêu cầu trang chủ cũng như tải lên tệp.

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

Việc truy cập tài liệu HTML bằng http://127.0.0.1:8081/index.htm sẽ tạo ra biểu mẫu sau:

File Upload:
Select a file to upload: 





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

Quản lý cookie

Bạn có thể gửi cookie đến máy chủ Node.js có thể xử lý tương tự bằng cách sử dụng tùy chọn phần mềm trung gian sau. Sau đây là một ví dụ đơn giản để in tất cả các cookie do khách hàng gửi.

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)
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved