Hướng Dẫn Chi Tiết Về Express.js

Khi xây dựng ứng dụng web với Node.js, việc xử lý yêu cầu và gửi phản hồi một cách thủ công có thể trở nên phức tạp. Đó là lý do tại sao Express.js xuất hiện — một framework nhẹ giúp đơn giản hóa việc định nghĩa các tuyến đường, xử lý yêu cầu GET và POST, và thậm chí phục vụ các tệp tĩnh như HTML, CSS và JavaScript.

Giới Thiệu Về Express.js

Express là một framework web Node.js không có ý kiến. Nó được yêu cầu để:

Viết các trình xử lý cho các yêu cầu với các phương thức HTTP khác nhau tại các đường dẫn URL khác nhau (tuyến đường).
Thiết lập máy chủ cho các ứng dụng web.
Sử dụng middleware để thực hiện các tác vụ như phân tích thân yêu cầu.
Phục vụ các tệp tĩnh một cách hiệu quả.

Trong một trang web truyền thống, ứng dụng web sẽ chờ đợi các yêu cầu HTTP từ trình duyệt web (hoặc các khách hàng khác). Khi một yêu cầu được nhận, ứng dụng sẽ xác định hành động cần thực hiện dựa trên mẫu URL và có thể là thông tin liên quan trong dữ liệu POST hoặc GET. Tùy thuộc vào yêu cầu, nó có thể đọc hoặc ghi thông tin từ cơ sở dữ liệu hoặc thực hiện các tác vụ khác cần thiết để thỏa mãn yêu cầu. Sau đó, ứng dụng sẽ trả về phản hồi cho trình duyệt web, thường là tạo động một trang HTML để trình duyệt hiển thị bằng cách chèn dữ liệu đã lấy vào các vị trí trong một mẫu HTML.

Tạo Một Máy Chủ

Đầu tiên, trong terminal tại thư mục đúng, bạn cần chạy các lệnh sau để khởi tạo dự án:

bash Copy

npm init --y
npm i express

// cài đặt nodemon (chỉ một lần)
npm install -g nodemon

// tạo một tệp js - app.js trong cùng thư mục
// để khởi động máy chủ

nodemon app.js

Sau khi cài đặt, để tạo một máy chủ trong tệp app.js, bạn cần yêu cầu (import) module express và tạo một ứng dụng express:

javascript Copy

const express = require('express');
const app = express();
const PORT = 4444;

app.get('/', (req, res) => {
    res.send("hello world");
});

app.listen(PORT, () => {
    console.log(`http://localhost:` + PORT);
});

Xử Lý Tuyến Đường

Routing đề cập đến cách các điểm cuối của ứng dụng (URIs) phản hồi các yêu cầu của khách hàng. Để định nghĩa routing, bạn sử dụng các phương thức của đối tượng Express app tương ứng với các phương thức HTTP; ví dụ, app.get() để xử lý các yêu cầu GET và app.post để xử lý các yêu cầu POST. Để xem danh sách đầy đủ, hãy tham khảo tài liệu của app.METHOD. Bạn cũng có thể sử dụng app.all() để xử lý tất cả các phương thức HTTP và app.use() để chỉ định middleware như là hàm callback.

javascript Copy

app.METHOD(PATH, HANDLER)

Trong đó:

app là một instance của express.
METHOD là một phương thức yêu cầu HTTP, viết thường.
PATH là một đường dẫn trên máy chủ.
HANDLER là hàm được thực thi khi tuyến đường được khớp.

Yêu Cầu GET (res.send, req.query, req.params)

ĐƯỢC SỬ DỤNG ĐỂ ĐỌC DỮ LIỆU

Phần giữa của mã (ba dòng bắt đầu bằng app.get) cho thấy một định nghĩa tuyến đường. Phương thức app.get() chỉ định một hàm callback sẽ được gọi mỗi khi có một yêu cầu HTTP GET với một đường dẫn ('/') tương đối với gốc của trang web. Hàm callback lấy một đối tượng yêu cầu và một đối tượng phản hồi làm tham số, và gọi send() trên phản hồi để trả về chuỗi "Hello World!"

res.send-

Trong ứng dụng, chúng ta đã viết một yêu cầu GET - yêu cầu GET sẽ đọc dữ liệu tại đường dẫn URL đã chỉ định (đối với ‘/’ nghĩa là đường dẫn gốc).

Ở đây, res - phản hồi và req - yêu cầu.
res.send là phản hồi được gửi bởi máy chủ tới khách hàng khi khách hàng truy cập đường dẫn URL đã đề cập.

Kết quả bạn nhận được khi truy cập URL (http://localhost:4444/) đã đề cập:

req.query -

req.query là yêu cầu được gửi đến trình duyệt để gửi dữ liệu đến máy chủ.
Dữ liệu đến dưới dạng một đối tượng yêu cầu (req).
req.query là một đối tượng lưu trữ dữ liệu được gửi trong URL sau dấu ?. Ví dụ: /greet?name=John → { name: 'John' }
Để truy cập URL trong trình duyệt, chúng ta phải sử dụng res.send.

javascript Copy

app.get('/greet', (req, res) => {
    const { name } = req.query;
    // chúng ta đã giải nén tên từ đường dẫn URL bằng cách sử dụng tham số truy vấn
    res.send(`hii sau khi yêu cầu từ trình duyệt gửi
         tên- "${name}" đến máy chủ`);
});

Kết quả sau khi “lấy” dữ liệu từ đường dẫn URL bằng cách sử dụng req.query và hiển thị nó trên trình duyệt bằng res.render.

req.params-

Cách khác để lấy dữ liệu qua yêu cầu là - req.params

Nó lấy “key/:value” như thế này.

javascript Copy

app.get('/movies/:movie', (req, res) => {
    const { movie } = req.params;
    res.send(`dữ liệu được yêu cầu bằng req.params là -${movie}`);
});

Triển Khai Yêu Cầu GET Sau Khi Khởi Động Máy Chủ Sử Dụng EXPRESS.JS

Yêu Cầu POST (req.body, middleware)

ĐƯỢC SỬ DỤNG ĐỂ GỬI DỮ LIỆU (TẠO/THÊM)

Dữ liệu trong yêu cầu POST được ẩn khỏi người dùng vì nó không hiển thị trong URL.
Để sử dụng yêu cầu POST, chúng ta sử dụng POSTMAN, và res.send chỉ hiển thị trong Postman, vì nó là một sự thay thế cho trình duyệt
Dữ liệu của yêu cầu POST được gọi là “Payload”.
Trong backend, dữ liệu của payload được thấy trong “body” trong Postman.
Mỗi khi máy chủ được khởi động lại, chúng ta sẽ mất dữ liệu đã thêm (bằng POST), vì vậy chúng ta cần cơ sở dữ liệu.

javascript Copy

app.post('/add', (req, res) => {
    const { name, id } = req.body;
    console.log(req.body);
    res.send(`người mới - ${name}`);
});

Trong mã trên, chúng ta đang sử dụng một yêu cầu POST, tại url ”localhost:4444/add”. Nếu URL này tồn tại, hàm callback của nó sẽ gọi req, sử dụng req.body.

Middleware

Middleware là các hàm chạy giữa một yêu cầu và một phản hồi, ví dụ như phân tích thân yêu cầu, xác thực, ghi log.

Do đó, nó giống như một lớp hoặc rào cản sẽ chạy trước khi người dùng nhận dữ liệu từ máy chủ.
Dữ liệu được thêm bằng post là dữ liệu đã được giải mã, vì vậy nó cần phải được mã hóa trước khi được yêu cầu bởi body.

req.body-

Nó được sử dụng với yêu cầu POST, yêu cầu dữ liệu từ body mà đã được thêm bằng Postman.
req.body cũng sẽ có một đối tượng tên và tuổi.
Ở đây, res.send sẽ cho chúng ta thấy phản hồi trong body của Postman.

Giờ đây, để lấy dữ liệu, mà đã được thêm với sự trợ giúp của yêu cầu POST, chúng ta sử dụng:

yêu cầu GET
một cách để thêm dữ liệu vào cấu trúc dữ liệu (hoặc thao tác DOM, để dữ liệu không bị mất khi máy chủ khởi động lại)
làm việc trong hàm callback của yêu cầu POST và GET để cung cấp và thu nhận dữ liệu tương ứng.

Kết quả trong Postman cho yêu cầu GET:

Kết quả trong terminal:

Kết quả trong trình duyệt cho GET:

Gửi Tệp Như Một Phản Hồi Đến Một Đường Dẫn

Để gửi một tệp như một phản hồi đến trình duyệt (khách hàng), trước tiên chúng ta cần đường dẫn đến tệp đó trên máy chủ. Để làm điều đó, chúng ta sử dụng một module tích hợp của Node.js gọi là path.

Module “PATH” được sử dụng để làm việc với các đường dẫn tệp và thư mục, giúp viết mã độc lập với hệ thống được sử dụng.

javascript Copy

const path = require('path');

Chức năng mà chúng ta sẽ sử dụng từ module path là - path.join

Nó kết hợp đường dẫn của các tệp và thư mục khác nhau, mà không làm khó khăn việc kết nối thông qua nối chuỗi và làm cho nó độc lập với nền tảng.
Hàm path.join nhận đường dẫn và tên tệp và kết hợp chúng lại.

javascript Copy

const pathOfFile = path.join(__dirname, '/index.html');

Ở đây, __dirname là đường dẫn đến thư mục hiện tại của hệ thống và kết hợp nó với tệp index.html có mặt trong cùng thư mục.

Biến pathOfFile này sẽ giúp chúng ta xác định vị trí tệp và sau đó gửi nó như một res.

res.sendFile-

Để gửi một tệp, chúng ta không thể chỉ sử dụng res.send vì nó chỉ gửi một phản hồi nhưng không phải là bất kỳ tệp, hình ảnh hoặc tài liệu nào, v.v.

Thay vào đó, chúng ta sử dụng một hàm Express.js - res.sendFile giúp gửi các tệp tĩnh cho một phản hồi HTTP đến khách hàng.

javascript Copy

app.get('/file', (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'));
});

Kết quả trên trình duyệt chúng ta nhận được:

⚠️

Nhưng nếu tệp index.html của chúng ta có tệp style.css và tệp script.js liên kết. Liệu chúng có hoạt động liên quan đến tệp index.html được yêu cầu từ máy chủ của chúng ta không?

—KHÔNG, bởi vì tệp js và css, thực tế bất kỳ tệp nào cũng là một yêu cầu trên máy chủ, do đó chúng cũng cần phải được bao gồm trong phản hồi của yêu cầu GET khi được yêu cầu tại đường dẫn của chúng.

Do đó, chúng ta sử dụng yêu cầu GET cho tất cả các tệp cần thiết như một phản hồi bằng cách sử dụng res.sendFile.

Nhưng nếu có hàng trăm tệp mà chúng ta muốn gửi đến trình duyệt? Việc viết yêu cầu cho từng tệp cần gửi là không hợp lý, vì điều đó tốn thời gian và làm cho việc theo dõi các tệp đã xử lý trở nên khó khăn.

Do đó, chúng ta có - PHỤC VỤ CÁC TỆP TĨNH

Phục Vụ Các Tệp Tĩnh

Để phục vụ các tệp tĩnh như hình ảnh, tệp CSS và tệp JavaScript, chúng ta sử dụng hàm middleware tích hợp express.static trong Express.

Đầu tiên, cần tạo một thư mục (thường có tên là ‘static’) trong thư mục.
Thư mục tĩnh chứa tất cả các tệp cần được yêu cầu bởi khách hàng.
Nó nên có một tệp .html để hiển thị phản hồi trên trình duyệt.

Middleware:

javascript Copy

app.use(express.static(path.join(__dirname, 'static')));

Middleware này là một tiêu đề, có nghĩa là, chúng ta không thể gửi yêu cầu GET tại đường dẫn (’/’) vì express.static đã làm điều đó cho chúng ta.

Do đó, khi chúng ta truy cập http://localhost: ${PORT}, nó sẽ khởi động một tệp .html có trong thư mục “static” và các tệp liên kết khác như tệp javascript và tệp CSS.

Kết quả -

Giờ đây, với sự trợ giúp của kiến thức trên, chúng ta có thể tạo một ứng dụng todo cơ bản :)

Hướng Dẫn Express.js: GET, POST & Phục Vụ Tệp Tĩnh

Hướng Dẫn Chi Tiết Về Express.js

Giới Thiệu Về Express.js

Tạo Một Máy Chủ

Xử Lý Tuyến Đường

Yêu Cầu GET (res.send, req.query, req.params)

Triển Khai Yêu Cầu GET Sau Khi Khởi Động Máy Chủ Sử Dụng EXPRESS.JS

Yêu Cầu POST (req.body, middleware)

Middleware

Gửi Tệp Như Một Phản Hồi Đến Một Đường Dẫn

Nhưng nếu có hàng trăm tệp mà chúng ta muốn gửi đến trình duyệt? Việc viết yêu cầu cho từng tệp cần gửi là không hợp lý, vì điều đó tốn thời gian và làm cho việc theo dõi các tệp đã xử lý trở nên khó khăn.

Phục Vụ Các Tệp Tĩnh

Bình luận