GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 14/03/2019 | 00:00 GMT+7

Cách xác định các tuyến và phương thức yêu cầu HTTP trong Express

Bài viết này sẽ xem xét cách xử lý các tuyến và phương thức yêu cầu HTTP trong một dự án Express. Các tuyến xử lý chuyển của user đến các URL khác nhau trong ứng dụng của bạn. HTTP, viết tắt của Hyper Text Transfer Protocol , giao tiếp và tạo điều kiện cho dữ liệu từ server Express của bạn đến trình duyệt web.

Bạn sẽ học cách xác định các tuyến và sử dụng các phương thức yêu cầu HTTP GET , POST , PUT và DELETE để thao tác dữ liệu.

Yêu cầu

Để hoàn thành hướng dẫn này, hiểu biết về Node.js là hữu ích nhưng không bắt buộc. Nếu bạn muốn tìm hiểu thêm về Node.js, hãy xem loạt bài Cách viết mã trong Node.js.

Cài đặt dự án của bạn

Vì Express là một khung Node.js, hãy đảm bảo bạn đã cài đặt Node.js từ Node.js trước khi thực hiện các bước tiếp theo. Chạy phần sau trong terminal của bạn:

Tạo một folder mới có tên node-express-routing cho dự án của bạn:

  • mkdir node-express-routing

Thay đổi vào folder mới:

  • cd node-express-routing

Khởi tạo một dự án Node mới với các giá trị mặc định. Điều này sẽ bao gồm file package.json của bạn để truy cập các phần phụ thuộc của bạn:

  • npm init -y

Tạo file mục nhập của bạn, index.js . Đây là nơi bạn sẽ xử lý các tuyến đường và phương thức yêu cầu HTTP của bạn :

  • touch index.js

Cài đặt cả Express và nodemon làm phụ thuộc. Bạn sẽ sử dụng nodemon để liên tục khởi động lại dự án Express của bạn khi nào index.js thay đổi.

  • npm install express --save 
  • npm install -D nodemon

Mở file package.json của bạn bằng editor bạn muốn và cập nhật tập lệnh start của bạn để bao gồm nodemon và index.js của bạn:

package.json
 {   "name": "node-express-routing",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "start": "nodemon index.js"   },   "keywords": [],   "author": "Paul Halliday",   "license": "MIT" }

Điều này sẽ cho phép bạn sử dụng lệnh npm start trong terminal của bạn để chạy server Express và cập nhật các thay đổi.

Đến đây bạn đã cài đặt dự án của bạn và cấu hình nodemon để làm mới khi nó phát hiện các thay đổi trong index.js của bạn, bạn đã sẵn sàng khởi động server Express của bạn .

Khởi động server Express của bạn

Server Express của bạn là nơi bạn sẽ xử lý logic để tích hợp các tuyến đường và phương thức yêu cầu HTTP. Bạn sẽ cài đặt và chạy server của bạn để trực quan hóa dự án của bạn trong trình duyệt.

Để khởi động server Express của bạn, hãy yêu cầu Express trong index.js của bạn và lưu trữ một version vào biến app . Sau đó, khai báo một biến PORT và chỉ định địa chỉ :3000 .

index.js
const express = require('express');  const app = express(); const PORT = 3000;  app.use(express.json());   app.listen(PORT, () => console.log(`Express server currently running on port ${PORT}`));

Tiếp theo, nối .listen() vào app và chèn PORT làm đối số đầu tiên, sau đó là hàm gọi lại. Phần mềm trung gian Express .listen() tạo một trình duyệt local từ địa chỉ trong biến PORT của bạn để trực quan hóa các thay đổi .

Cũng bao gồm express.json() làm đối số cho app.use() . Điều này là để phân tích cú pháp thông qua dữ liệu đến thông qua các yêu cầu HTTP của bạn. Một version trước đó dựa trên dependencies của body-parser , nhưng kể từ đó Express đã bao gồm một phần mềm trung gian được tích hợp sẵn để phân tích dữ liệu.

Chạy lệnh sau trong terminal của bạn để bắt đầu dự án:

  • npm start

Dự án của bạn được tải trên http://localhost:3000 . Điều hướng đến trình duyệt của bạn và nhận thấy những điều sau:

Lỗi hiển thị rằng không thể truy cập được / route.

Đây là phần khởi đầu của một version Express đang chạy. Hãy làm việc để xác định các phương thức HTTP để điền vào trình duyệt của bạn.

Xác định phương thức yêu cầu HTTP GET của bạn

Để xem dự án của bạn , bạn có thể gửi thông tin từ server Express của bạn thông qua yêu cầu GET , một phương thức HTTP.

Trong index.js , hãy thêm .get() vào biến app của bạn, chỉ định một tuyến ẩn danh và bao gồm một lệnh gọi lại truy cập các đối số request và response :

index.js
 app.get('/', (request, response) => {   response.send('Hello'); });

Đối số request chứa thông tin về yêu cầu GET , trong khi response.send() gửi dữ liệu đến trình duyệt. Dữ liệu trong response.send() có thể là một chuỗi, đối tượng hoặc một mảng.

Đến đây bạn đã triển khai một yêu cầu GET , hãy xem xét các tuyến và các phương thức HTTP khác.

Hiểu các tuyến đường

Tạo các yêu cầu GET mới trong index.js của bạn và xác định các tuyến '/accounts' và '/accounts/:id' . Khai báo một mảng accounts với một số dữ liệu giả:

index.js
let accounts = [   {     "id": 1,     "username": "paulhal",     "role": "admin"   },   {     "id": 2,     "username": "johndoe",     "role": "guest"   },   {     "id": 3,     "username": "sarahjane",     "role": "guest"   } ];  app.get('/accounts', (request, response) => {   response.json(accounts); });  app.get('/accounts/:id', (request, response) => {   const accountId = Number(request.params.id);   const getAccount = accounts.find((account) => account.id === accountId);    if (!getAccount) {     response.status(500).send('Account not found.')   } else {     response.json(getAccount);   } });

Nếu bạn chuyển đến http://localhost:3000/accounts bạn sẽ nhận được tất cả các account trong mảng của bạn :

Output
[   {     "id": 1,     "username": "paulhal",     "role": "admin"   },   {     "id": 2,     "username": "johndoe",     "role": "guest"   },   {     "id": 3,     "username": "sarahjane",     "role": "guest"   } ]

Bạn cũng có thể lọc ID account bằng cách sử dụng điểm cuối /:id . Express coi ID trong endpoint /:id là trình giữ chỗ cho tham số user và trùng với giá trị đó.

Khi bạn chuyển đến http://localhost:3000/accounts/3 , bạn sẽ nhận được một account phù hợp với tham số /:id :

Output
{   "id": 3,   "username": "sarahjane",   "role": "guest" }

Thiết kế các phương thức yêu cầu HTTP POST , PUT và DELETE

Các phương thức HTTP cung cấp chức năng bổ sung cho dữ liệu bằng cách sử dụng các yêu cầu POST , PUT và DELETE . Phương thức yêu cầu POST tạo dữ liệu mới trong server của bạn, trong khi PUT cập nhật thông tin hiện có. Phương thức yêu cầu DELETE loại bỏ dữ liệu được chỉ định.

POST

Để tạo dữ liệu mới trong mảng accounts , bạn có thể tích hợp phương thức yêu cầu POST .

Trong index.js , hãy thêm .post() vào biến app của bạn và bao gồm tuyến '/accounts' làm đối số đầu tiên:

index.js
app.post('/accounts', (request, response) => {   const incomingAccount = request.body;    accounts.push(incomingAccount);    response.json(accounts); })

Bạn sẽ đẩy mọi dữ liệu đến từ yêu cầu POST của bạn vào mảng accounts và gửi phản hồi dưới dạng đối tượng JSON.

Mảng accounts của bạn hiện có một user mới:

Output
[   {     "id": 1,     "username": "paulhal",     "role": "admin"   },   {     "id": 2,     "username": "johndoe",     "role": "guest"   },   {     "id": 3,     "username": "sarahjane",     "role": "guest"   },   {     "id": 4,     "username": "davesmith",     "role": "admin"   } ]

PUT

Bạn có thể chỉnh sửa và cập nhật một account cụ thể thông qua yêu cầu PUT .

Trong index.js , hãy thêm .put() vào biến app của bạn và bao gồm tuyến đường '/accounts/:id' làm đối số đầu tiên. Bạn sẽ tìm thấy ID account đã nhập và đặt điều kiện để cập nhật dữ liệu mới:

index.js
app.put('/accounts/:id', (request, response) => {   const accountId = Number(request.params.id);   const body = request.body;   const account = accounts.find((account) => account.id === accountId);   const index = accounts.indexOf(account);    if (!account) {     response.status(500).send('Account not found.');   } else {     const updatedAccount = { ...account, ...body };      accounts[index] = updatedAccount;      response.send(updatedAccount);   } });

Đến đây bạn có thể cập nhật dữ liệu trong mảng accounts . Nếu user thay đổi "role" của họ:

{     "role": "guest" }

Lưu ý "role" cập nhật cho guest từ admin trong http://localhost:3000/accounts/1 :

Output
{   "id": 1,   "username": "paulhal",   "role": "guest" }

DELETE

Bạn có thể xóa user và dữ liệu bằng phương pháp yêu cầu DELETE .

Trong index.js , hãy thêm .delete() vào biến app của bạn và bao gồm '/accounts/:id' làm đối số đầu tiên. Bạn sẽ lọc qua mảng accounts và trả lại account để xóa.

index.js
 app.delete('/accounts/:id', (request, response) => {   const accountId = Number(request.params.id);   const newAccounts = accounts.filter((account) => account.id != accountId);    if (!newAccounts) {     response.status(500).send('Account not found.');   } else {     accounts = newAccounts;     response.send(accounts);   } });

Nếu bạn gửi một yêu cầu DELETE đến http://localhost:3000/accounts/1 , điều này sẽ xóa account có /:id là 1 khỏi mảng accounts .

Kết luận

Việc chỉ định các tuyến đường và sử dụng các phương thức yêu cầu HTTP hỗ trợ để tạo thêm hiệu suất khi tạo, cập nhật và xóa user và dữ liệu trong server Express của bạn.

Tags:

Các tin liên quan