Session 02: Dynamic Web Applications

Tạo Web API với ExpressJS

Cài đặt

Tại thư mục, ví dụ: my-express-app, gõ lệnh sau ở terminal hoặc cmd:

npx express-generator

Tạo các routers

Dữ liệu mẫu

let data = [
  { id: 1, name: 'iPhone 15 Pro Max', price: 1800 },
  { id: 1, name: 'iPhone 14 Pro Max', price: 1500 },
  { id: 2, name: 'iPhone 13 Pro Max', price: 1200 },
  { id: 3, name: 'iPhone 12 Pro Max', price: 1000 },
  { id: 4, name: 'iPhone 11 Pro Max', price: 800 },
  { id: 9, name: 'Sausung Ultra S23', price: 1500 },
];

GET

// Get all
router.get('/', function (req, res, next) {
  res.send(data);
});

GET (parameters trên URL)

// Get one by id
router.get('/:id', function (req, res, next) {
  const id = req.params.id;

  let found = data.find((x) => x.id == id);

  if (found) {
    return res.send({ ok: true, result: found });
  }

  return res.sendStatus(410);
});

GET (query string trên URL)

// http://localhost:9000/products/search/query?name=iphone
router.get('/search/query', (req, res) => {
  const { query } = req;
  console.log('query:', query);

  // Code here ...

  res.sendStatus(200);
});

Query example:

http://localhost:9000/products/search/query?name=iphone

PATCH (Thường dùng để update 1 phần dữ liệu)

router.patch('/:id', function (req, res, next) {
  const id = req.params.id;
  const patchData = req.body;

  let found = data.find((x) => x.id == id);

  if (found) {
    for (let propertyName in patchData) {
      found[propertyName] = patchData[propertyName];
    }
  }

  res.send({ ok: true, message: 'Updated' });
});

DELETE (Thường dùng để xóa dữ liệu)

router.delete('/:id', function (req, res, next) {
  const id = req.params.id;
  data = data.filter((x) => x.id != id);

  res.send({ ok: true, message: 'Deleted' });
});

HTTP Status Code

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

HTTP Status Code là một phần quan trọng của giao thức HTTP. Nó là một mã số được trả về từ máy chủ HTTP cho trình duyệt web khi một yêu cầu được gửi đến. Status code có thể được sử dụng để biểu thị trạng thái của một yêu cầu, ví dụ như thành công hay thất bại, và được chia thành các nhóm tùy thuộc vào mục đích của chúng.

Trong ExpressJS, có rất nhiều status code khác nhau, nhưng ở đây, chúng ta chỉ tập trung vào những mã status code phổ biến nhất.

2xx Success

200 OK

info

Mã status 200 được trả về khi một yêu cầu thành công được xử lý bởi máy chủ. Nó biểu thị rằng yêu cầu đã được xử lý thành công và các kết quả đã được trả về.

The HTTP 200 OK success status response code indicates that the request has succeeded. A 200 response is cacheable by default. The meaning of a success depends on the HTTP request method:

GET: The resource has been fetched and is transmitted in the message body.
HEAD: The representation headers are included in the response without any message body
POST: The resource describing the result of the action is transmitted in the message body
TRACE: The message body contains the request message as received by the server.
The successful result of a PUT or a DELETE is often not a 200 OK but a 204 No Content (or a 201 Created when the resource is uploaded for the first time).

201 Created

info

HTTP status code 201 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng yêu cầu của máy khách (client) đã được chấp nhận bởi máy chủ (server) và đã tạo thành công một tài nguyên mới.

Mã 201 "Created" thường được sử dụng khi máy khách tạo mới một tài nguyên trên máy chủ, chẳng hạn như tạo một bài viết trên trang web hoặc tải lên một tệp mới. Mã trạng thái này thông báo cho máy khách biết rằng yêu cầu đã được chấp nhận và tài nguyên mới đã được tạo thành công.

Thông thường, máy chủ sẽ trả về mã trạng thái 201 kèm theo địa chỉ URL của tài nguyên mới được tạo. Máy khách có thể sử dụng địa chỉ URL này để truy cập tài nguyên mới hoặc cập nhật nó.

202 Accepted

info

HTTP status code 202 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng yêu cầu của máy khách (client) đã được chấp nhận bởi máy chủ (server), nhưng quá trình xử lý của nó vẫn đang được xử lý và chưa hoàn thành.

Mã 202 "Accepted" thường được sử dụng khi máy chủ không thể hoàn thành yêu cầu ngay lập tức, ví dụ như khi xử lý yêu cầu mất nhiều thời gian hoặc đang chờ đợi kết quả từ một bên thứ ba. Mã trạng thái này thông báo cho máy khách biết rằng yêu cầu đã được chấp nhận và đang được xử lý.

4xx Client Error

400 Bad Request

info

HTTP status code 400 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng yêu cầu của máy khách (client) không hợp lệ hoặc không thể được xử lý bởi máy chủ (server) do lỗi cú pháp, định dạng hoặc tham số không hợp lệ trong yêu cầu.

Lỗi 400 "Bad Request" thường xảy ra khi máy khách gửi yêu cầu không đầy đủ hoặc không chính xác, ví dụ như thiếu thông tin bắt buộc hoặc định dạng dữ liệu không chính xác.

Lỗi này thường là do lỗi phía máy khách và yêu cầu bạn kiểm tra lại yêu cầu của mình để đảm bảo rằng nó đầy đủ và đúng định dạng. Nếu lỗi này liên tục xảy ra, bạn nên kiểm tra lại mã lập trình hoặc liên hệ với quản trị viên hệ thống để biết thêm thông tin.

Nếu bạn là người quản trị máy chủ, bạn nên kiểm tra các tệp nhật ký máy chủ để xác định nguyên nhân chính xác của lỗi và thực hiện các biện pháp khắc phục phù hợp.

caution

The client should not repeat this request without modification.

401 Unauthorized

info

HTTP status code 401 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng yêu cầu của máy khách (client) bị từ chối bởi máy chủ (server) vì không có thông tin xác thực hợp lệ.

Lỗi 401 "Unauthorized" thường xảy ra khi máy khách cố gắng truy cập một tài nguyên yêu cầu xác thực nhưng không cung cấp thông tin xác thực hợp lệ hoặc thông tin xác thực được cung cấp không đủ để truy cập tài nguyên đó.

Nếu bạn là người dùng cuối, bạn cần cung cấp thông tin đăng nhập hợp lệ để truy cập tài nguyên yêu cầu. Nếu bạn đã cung cấp thông tin đăng nhập hợp lệ và vẫn nhận được lỗi 401, bạn nên kiểm tra lại quyền truy cập của mình đến tài nguyên đó.

Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra lại cấu hình bảo mật của máy chủ để đảm bảo rằng nó được thiết lập đúng để yêu cầu thông tin xác thực hợp lệ từ máy khách. Nếu máy khách được xác thực bằng các phương pháp khác nhau, bạn cần cấu hình máy chủ để hỗ trợ các phương pháp xác thực đó.

402 Payment Required

info

HTTP status code 402 là một mã trạng thái HTTP không được sử dụng rộng rãi và không có nghĩa cụ thể.

Theo chuẩn HTTP/1.1, mã trạng thái 402 được định nghĩa là "Payment Required" và được dự định để được sử dụng trong tương lai khi có các hệ thống thanh toán trực tuyến trở nên phổ biến hơn.

Tuy nhiên, mã trạng thái 402 hiện không được sử dụng trong thực tế và không được hỗ trợ bởi các trình duyệt web phổ biến hoặc các máy chủ web. Thay vào đó, các hệ thống thanh toán trực tuyến thường sử dụng các phương thức khác để xác nhận thanh toán và xử lý yêu cầu của khách hàng.

Do đó, nếu bạn nhận được mã trạng thái 402 trong quá trình truy cập trang web hoặc ứng dụng, nó có thể chỉ là một lỗi cú pháp hoặc mã trạng thái không hợp lệ.

403 Forbidden

info

HTTP status code 403 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) đã nhận được yêu cầu của máy khách (client), nhưng từ chối hoàn thành yêu cầu do máy khách không được phép truy cập tài nguyên yêu cầu.

Lỗi 403 "Forbidden" thường xảy ra khi máy khách cố gắng truy cập một tài nguyên mà không có quyền truy cập, ví dụ như thư mục bị khóa hoặc tài khoản người dùng không có quyền truy cập.

Lỗi này thường là do lỗi phía máy khách và yêu cầu bạn kiểm tra lại quyền truy cập của mình đến tài nguyên đó. Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra lại cấu hình bảo mật của máy chủ để đảm bảo rằng quyền truy cập đến tài nguyên được thiết lập đúng.

Nếu bạn là người dùng cuối và cần truy cập tài nguyên yêu cầu, bạn nên liên hệ với quản trị viên hệ thống hoặc chủ sở hữu tài nguyên để yêu cầu quyền truy cập.

404 Not Found

info

HTTP status code 404 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) không tìm thấy tài nguyên được yêu cầu bởi máy khách (client).

Lỗi 404 "Not Found" thường xảy ra khi máy khách cố gắng truy cập một tài nguyên không tồn tại trên máy chủ hoặc đã bị xóa. Ví dụ, nếu bạn cố gắng truy cập một trang web như http://example.com/page1.html, nhưng trang đó không tồn tại trên máy chủ, bạn sẽ nhận được mã trạng thái 404.

Lỗi này thường là do lỗi phía máy khách và yêu cầu bạn kiểm tra lại đường dẫn đến tài nguyên yêu cầu của mình. Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra các tệp nhật ký máy chủ để xác định nguyên nhân chính xác của lỗi và thực hiện các biện pháp khắc phục phù hợp.

Nếu bạn là người dùng cuối, bạn nên kiểm tra lại đường dẫn đến tài nguyên yêu cầu của mình để đảm bảo rằng nó chính xác và thử lại sau một thời gian. Nếu lỗi vẫn tiếp diễn, bạn nên liên hệ với quản trị viên hệ thống hoặc chủ sở hữu tài nguyên để biết thêm thông tin.

405 Method Not Allowed

info

HTTP status code 405 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng yêu cầu của máy khách (client) không được phép hoặc không được hỗ trợ bởi máy chủ (server).

Lỗi 405 "Method Not Allowed" thường xảy ra khi máy khách gửi yêu cầu sử dụng một phương thức HTTP không được hỗ trợ bởi máy chủ hoặc không có quyền truy cập tài nguyên yêu cầu với phương thức đó.

Ví dụ, nếu một yêu cầu POST được gửi đến một tài nguyên chỉ được hỗ trợ bởi phương thức GET, máy chủ sẽ trả về mã trạng thái 405 để chỉ ra rằng phương thức POST không được phép.

Lỗi này thường là do lỗi phía máy khách và yêu cầu bạn kiểm tra lại phương thức sử dụng trong yêu cầu của mình để đảm bảo rằng nó được hỗ trợ bởi máy chủ và có quyền truy cập tài nguyên yêu cầu. Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra lại cấu hình máy chủ để đảm bảo rằng phương thức yêu cầu được hỗ trợ và có quyền truy cập tài nguyên yêu cầu.

410 Gone

info

HTTP status code 410 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng tài nguyên được yêu cầu không còn tồn tại trên máy chủ (server) và không có đường dẫn thay thế.

Lỗi 410 "Gone" tương tự như lỗi 404, tuy nhiên nó chỉ ra rằng tài nguyên được yêu cầu đã bị xóa hoặc không còn tồn tại trên máy chủ và không có kế hoạch được thay thế hoặc phục hồi. Vì vậy, nếu máy khách tiếp tục yêu cầu tài nguyên đó, nó sẽ luôn nhận được mã trạng thái 410.

Lỗi này thường là do lỗi phía máy chủ và yêu cầu bạn kiểm tra lại đường dẫn đến tài nguyên yêu cầu của mình để đảm bảo rằng nó chính xác và đã không bị xóa. Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra lại các tệp nhật ký máy chủ để xác định nguyên nhân chính xác của lỗi và thực hiện các biện pháp khắc phục phù hợp.

5xx Server Error

500 Internal Server Error

info

HTTP status code 500 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) gặp phải lỗi nội bộ và không thể hoàn thành yêu cầu của máy khách (client).

Lỗi 500 "Internal Server Error" là một lỗi phổ biến và có thể có nhiều nguyên nhân khác nhau, bao gồm lỗi cú pháp trong mã lập trình, lỗi cấu hình, quá tải trên máy chủ, lỗi cơ sở dữ liệu hoặc lỗi phần mềm máy chủ.

Lỗi này thường là do lỗi phía máy chủ và yêu cầu sửa đổi cấu hình hoặc sửa lỗi trong mã lập trình để khắc phục vấn đề. Nếu bạn là người quản trị máy chủ, bạn cần kiểm tra các tệp nhật ký máy chủ để xác định nguyên nhân chính xác của lỗi và thực hiện các biện pháp khắc phục phù hợp.

Đối với người dùng cuối, lỗi 500 có thể được hiển thị bởi trình duyệt web và không có gì họ có thể làm để khắc phục lỗi này ngoài việc thử lại trang web sau một thời gian hoặc liên hệ với nhà cung cấp dịch vụ để biết thêm thông tin.

501 Not Implemented

info

HTTP status code 501 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) không hỗ trợ tính năng hoặc phương thức được yêu cầu bởi phía máy khách (client).

Ví dụ, nếu một máy khách gửi một yêu cầu sử dụng một phương thức HTTP không được hỗ trợ bởi máy chủ, ví dụ như OPTIONS, PATCH hoặc PROPFIND, máy chủ sẽ trả về mã trạng thái 501.

Lỗi 501 thường là một lỗi phía máy chủ và yêu cầu sửa đổi cấu hình hoặc triển khai thêm tính năng để hỗ trợ yêu cầu của máy khách.

Lỗi 501 cũng có thể xảy ra nếu máy chủ đang không hoạt động đúng cách, hoặc phiên bản phần mềm máy chủ của bạn quá cũ và không hỗ trợ một số tính năng mới của các phiên bản HTTP mới hơn.

502 Bad Gateway

info

HTTP status code 502 là một mã trạng thái HTTP thường được sử dụng để chỉ ra rằng máy chủ (server) nhận được yêu cầu từ phía máy khách (client), nhưng không thể hoàn thành nó do lỗi xảy ra khi gửi yêu cầu đến một máy chủ hoặc ứng dụng phụ trợ.

Cụ thể, lỗi 502 "Bad Gateway" thường được hiển thị khi máy chủ đang hoạt động nhưng không thể kết nối với một máy chủ ứng dụng hoặc máy chủ bên ngoài để thực hiện yêu cầu. Ví dụ, nếu bạn đang truy cập một trang web nhưng trang web đó đang chạy trên một máy chủ web khác, lỗi 502 có thể xảy ra nếu máy chủ web của trang web không thể kết nối được với máy chủ web đó.

Lỗi 502 thường là một lỗi tạm thời và có thể được khắc phục bằng cách thử lại yêu cầu hoặc kiểm tra lại cấu hình của máy chủ. Tuy nhiên, nếu lỗi này liên tục xảy ra, nó có thể chỉ ra rằng có một vấn đề với mạng hoặc hệ thống máy chủ của bạn.

503 Service Unavailable

info

HTTP status code 503 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) không thể hoàn thành yêu cầu của máy khách (client) bởi vì máy chủ đang bận hoặc không thể truy cập được.

Lỗi 503 "Service Unavailable" thường xảy ra khi máy chủ đang được bảo trì hoặc quá tải và không thể xử lý yêu cầu của máy khách. Nó cũng có thể xảy ra nếu máy chủ đang gặp sự cố kỹ thuật hoặc nâng cấp phần mềm.

Lỗi 503 thường là một lỗi tạm thời và có thể được khắc phục bằng cách thử lại yêu cầu sau một thời gian hoặc liên hệ với quản trị viên hệ thống để biết thêm thông tin về thời gian bảo trì hoặc lịch trình cập nhật.

Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra hệ thống để xác định nguyên nhân chính xác của lỗi và thực hiện các biện pháp khắc phục phù hợp để đảm bảo rằng máy chủ của bạn hoạt động đúng cách.

504 Gateway Timeout

info

HTTP status code 504 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) không thể hoàn thành yêu cầu của máy khách (client) trong một khoảng thời gian nhất định vì quá trình kết nối đến máy chủ bị thời gian chờ vượt quá giới hạn.

Lỗi 504 "Gateway Timeout" thường xảy ra khi máy chủ trung gian (proxy server) không thể kết nối đến máy chủ đích hoặc không nhận được phản hồi từ máy chủ đích trong một khoảng thời gian nhất định.

Lỗi này thường là do lỗi phía máy chủ hoặc mạng và yêu cầu bạn kiểm tra lại kết nối mạng và thử lại sau một thời gian. Nếu lỗi vẫn tiếp diễn, bạn nên liên hệ với quản trị viên hệ thống hoặc nhà cung cấp dịch vụ mạng để biết thêm thông tin và hỗ trợ khắc phục lỗi.

505 HTTP Version Not Supported

info

HTTP status code 505 là một mã trạng thái HTTP được sử dụng để chỉ ra rằng máy chủ (server) không hỗ trợ phiên bản giao thức HTTP được sử dụng bởi máy khách (client) trong yêu cầu.

Lỗi 505 "HTTP Version Not Supported" thường xảy ra khi máy khách sử dụng phiên bản giao thức HTTP không được hỗ trợ bởi máy chủ. Ví dụ, nếu máy khách sử dụng HTTP/2 mà máy chủ chỉ hỗ trợ HTTP/1.1, máy chủ sẽ trả về mã trạng thái 505.

Lỗi này thường là do lỗi phía máy khách và yêu cầu bạn kiểm tra lại phiên bản giao thức HTTP được sử dụng trong yêu cầu của mình để đảm bảo rằng nó được hỗ trợ bởi máy chủ. Nếu bạn là người quản trị hệ thống, bạn nên kiểm tra lại cấu hình máy chủ để đảm bảo rằng nó hỗ trợ phiên bản giao thức HTTP mà máy khách đang sử dụng.

Serving HTTP Responses

Response Methods

Send a response of various types: res.send()
Set the response status code and send its string representation as the response body: res.sendStatus()
Send a JSON response: res.json()
Redirect a request: res.redirect()
Prompt a file to be downloaded: res.download()
Send a file as an octet stream: res.sendFile()
Render a view template: res.render()

Examples

router.get('/', async (req, res, next) => {
  res.render('index', { title: 'Express' });
});

router.get('/send', async (req, res, next) => {
  res.send({ message: 'Hello' });
});

router.get('/sendStatus', async (req, res, next) => {
  res.sendStatus(201);
});

// Thường dùng
router.get('/setStatus', async (req, res, next) => {
  res.status(201).json({ message: 'Hello' });
});

router.get('/file/download', async (req, res, next) => {
  res.download('public/files/poster.png');
});

router.get('/sendFile', async (req, res, next) => {
  res.sendFile('/public/files/poster.png', { root: './' });
});

// Thường dùng (status = 200)
router.get('/json', async (req, res, next) => {
  res.json({ message: 'Hello Redirect' });
});

router.get('/redirect', async (req, res, next) => {
  res.redirect('/json');
});

Validate data with YUP library

info

Yup là một thư viện validation đơn giản và mạnh mẽ trong Node.js. Nó cung cấp một cách tiện lợi để xác minh dữ liệu đầu vào của bạn, đảm bảo rằng dữ liệu bạn đang xử lý là đúng và an toàn. Yup có thể dùng cho cả client (React, Angular, ...) và server (Nodejs).

Cài đặt

npm install yup --save

Sau khi cài đặt, bạn có thể import Yup vào ứng dụng của mình bằng cách sử dụng lệnh sau:

const yup = require('yup');

Tạo schema với Yup

Trong Yup, một schema là một tập hợp các quy tắc validation được áp dụng cho một đối tượng. Chúng ta có thể định nghĩa schema bằng cách sử dụng các phương thức của Yup.

Ví dụ, để xác minh rằng một giá trị là một số nguyên dương, bạn có thể định nghĩa schema bằng cách sử dụng phương thức number như sau:

const validationSchema = yup.object().shape({
  age: yup.number(),
});

Ngoài ra, Yup còn cung cấp các phương thức khác để xác minh các giá trị khác như chuỗi, mảng, đối tượng và nhiều hơn nữa. Bạn có thể tìm hiểu thêm về các phương thức này trong tài liệu chính thức của Yup.

Sử dụng Yup để xác minh đầu vào

Sau khi định nghĩa schema, bạn có thể sử dụng nó để xác minh các giá trị đầu vào của mình bằng cách sử dụng phương thức validate của Yup.

Ví dụ, để xác minh một đối tượng có đúng schema đã định nghĩa, bạn có thể sử dụng phương thức validate như sau:

// Giả sử có dữ liệu như sau:
const data = { age: 25 };
// Dùng Yup để xác minh dữ liệu, nếu đúng sẽ in ra "Validation passed", nếu sai sẽ in ra lỗi
schema
  .validate(data)
  .then(() => console.log('Validation passed'))
  .catch((err) => console.log(err));

Trong ví dụ trên, Yup sẽ kiểm tra xem đối tượng data có đúng schema đã định nghĩa hay không. Nếu đúng, phương thức validate sẽ trả về một Promise đã resolved và in ra thông báo "Validation passed". Nếu không đúng, nó sẽ trả về một Promise đã rejected với thông báo lỗi.

Validation trên các giá trị đơn lẻ

Ngoài việc xác minh các đối tượng, Yup cũng cho phép bạn xác minh các giá trị đơn lẻ. Ví dụ, để xác minh rằng một chuỗi là một địa chỉ email hợp lệ, bạn có thể sử dụng phương thức string và email như sau:

const emailSchema = yup.string().email().required();
emailSchema
  .validate('example@mail.com')
  .then(() => console.log('Validation passed'))
  .catch((err) => console.log(err));

Trong ví dụ trên, Yup sẽ kiểm tra xem chuỗi "example@mail.com" có đúng định dạng email hay không. Nếu đúng, phương thức validate sẽ trả về một Promise đã resolved và in ra thông báo "Validation passed". Nếu không đúng, nó sẽ trả về một Promise đã rejected với thông báo lỗi.

Yup là một thư viện validation mạnh mẽ và đơn giản trong Node.js. Nó cung cấp một cách tiện lợi để xác minh các giá trị đầu vào của bạn, đảm bảo rằng dữ liệu bạn đang xử lý là đúng và an toàn. Trong bài giảng này, chúng ta đã tìm hiểu cách sử dụng Yup để tạo schema và xác minh các giá trị đầu vào

Các ví dụ thực tế với Expressjs

const yup = require('yup');
const express = require('express');
const router = express.Router();

const { write } = require('../helpers/FileHelper');
let data = require('../data/categories.json');

const fileName = './data/categories.json';

router.get('/:id', function (req, res, next) {
  // Validate
  const validationSchema = yup.object().shape({
    params: yup.object({
      id: yup.number(),
    }),
  });

  validationSchema
    .validate({ params: req.params }, { abortEarly: false })
    .then(() => {
      const id = req.params.id;

      let found = data.find((x) => x.id == id);

      if (found) {
        return res.send({ ok: true, result: found });
      }

      return res.sendStatus(410);
    })
    .catch((err) => {
      return res.status(400).json({ type: err.name, errors: err.errors, provider: 'yup' });
    });
});

// Create new data
router.post('/', function (req, res, next) {
  // Validate
  const validationSchema = yup.object({
    body: yup.object({
      name: yup.string().required(),
      price: yup.number().required(),
      description: yup.string(),
    }),
  });

  validationSchema
    .validate({ body: req.body }, { abortEarly: false })
    .then(() => {
      const newItem = req.body;

      // Get max id
      let max = 0;
      data.forEach((item) => {
        if (max < item.id) {
          max = item.id;
        }
      });

      newItem.id = max + 1;

      data.push(newItem);

      // Write data to file
      write(fileName, data);

      res.send({ ok: true, message: 'Created' });
    })
    .catch((err) => {
      return res.status(400).json({ type: err.name, errors: err.errors, provider: 'yup' });
    });
});

module.exports = router;

Bài tập YUP với Online Shop

Tham khảo yêu cầu về ràng buộc dữ liệu tại: Online Shop OnlineShop. Viết các API sau với cài đặt YUP để ràng buộc dữ liệu:

Categories
- GET /categories
- GET /categories/:id
- POST /categories
- PUT /categories/:id
- DELETE /categories/:id
Suppliers
- GET /suppliers
- GET /suppliers/:id
- POST /suppliers
- PUT /suppliers/:id
- DELETE /suppliers/:id
Products
- GET /products
- GET /products/:id
- POST /products
- PUT /products/:id
- DELETE /products/:id
Customers
- GET /customers
- GET /customers/:id
- POST /customers
- PUT /customers/:id
- DELETE /customers/:id
Employees
- GET /employees
- GET /employees/:id
- POST /employees
- PUT /employees/:id
- DELETE /employees/:id
Orders
- GET /orders
- GET /orders/:id
- POST /orders
- PUT /orders/:id
- DELETE /orders/:id

Bài tập ReactJS + NodeJS

Install & configure CORS for Express

Install:

npm install cors --save

Open file: app.js
Import package

const cors = require('cors');

Add code:

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Add CORS here
app.use(
  cors({
    origin: '*',
  }),
);

Sử dụng các thư viện (ReactJS)

Using Axios

https://axios-http.com/docs/intro

Using Antd

https://ant.design/

Antd Form:

https://ant.design/components/form

Antd Table

https://ant.design/components/table

Antd Modal:

https://ant.design/components/modal

Antd Message:

https://ant.design/components/message

Tạo Web API với ExpressJS​

Cài đặt​

Tạo các routers​

Dữ liệu mẫu​

GET​

GET (parameters trên URL)​

GET (query string trên URL)​

PATCH (Thường dùng để update 1 phần dữ liệu)​

DELETE (Thường dùng để xóa dữ liệu)​

HTTP Status Code​

2xx Success​

200 OK​

201 Created​

202 Accepted​

4xx Client Error​

400 Bad Request​

401 Unauthorized​

402 Payment Required​

403 Forbidden​

404 Not Found​

405 Method Not Allowed​

410 Gone​

5xx Server Error​

500 Internal Server Error​

501 Not Implemented​

502 Bad Gateway​

503 Service Unavailable​

504 Gateway Timeout​

505 HTTP Version Not Supported​

Serving HTTP Responses​

Response Methods​

Examples​

Validate data with YUP library​

Tạo schema với Yup​

Sử dụng Yup để xác minh đầu vào​

Validation trên các giá trị đơn lẻ​

Các ví dụ thực tế với Expressjs​

Bài tập YUP với Online Shop​

Bài tập ReactJS + NodeJS​

Install & configure CORS for Express​

Sử dụng các thư viện (ReactJS)​

Tạo Web API với ExpressJS

Cài đặt

Tạo các routers

Dữ liệu mẫu

GET

GET (parameters trên URL)

GET (query string trên URL)

PATCH (Thường dùng để update 1 phần dữ liệu)

DELETE (Thường dùng để xóa dữ liệu)

HTTP Status Code

2xx Success

200 OK

201 Created

202 Accepted

4xx Client Error

400 Bad Request

401 Unauthorized

402 Payment Required

403 Forbidden

404 Not Found

405 Method Not Allowed

410 Gone

5xx Server Error

500 Internal Server Error

501 Not Implemented

502 Bad Gateway

503 Service Unavailable

504 Gateway Timeout

505 HTTP Version Not Supported

Serving HTTP Responses

Response Methods

Examples

Validate data with YUP library

Tạo schema với Yup

Sử dụng Yup để xác minh đầu vào

Validation trên các giá trị đơn lẻ

Các ví dụ thực tế với Expressjs

Bài tập YUP với Online Shop

Bài tập ReactJS + NodeJS

Install & configure CORS for Express

Sử dụng các thư viện (ReactJS)