Cách tạo REST API với JSON Server

29441

Bài viết được sự cho phép của BBT Tạp chí Lập trình

Một công việc khá phổ biến đối với front-end developer là phải giả lập một backend REST service để nhận JSON data cung cấp cho ứng dụng front-end, và đảm bảo nó hoạt động như mong đợi trong khi đang chờ phía backend hoàn thiện service.

  3 bước tối ưu hiệu năng React App bằng các API mới của React
  10+ tools và extensions tuyệt vời cho GraphQL APIs

Bạn vẫn có thể cài đặt backend server đầy đủ, bằng cách sử dụng Node.js, Express và MongoDB, tuy nhiên việc này tốn khá nhiều thời gian và phức tạp. Trong khi đó JSON Server lại là một giải pháp khá hoàn thiện cho yêu cầu nhanh và đơn giản với đầy đủ các thao tác CRUD (Create Read Update Delete).

Vì vậy bài viết này sẽ hướng dẫn bạn cách cài đặt JSON server và publish một sample REST API.

Chuẩn bị

Cài node cho máy tính của bạn bằng cách tải gói phù hợp với hệ điều hành của bạn ở link sau https://nodejs.org/en/download/

Sau khi cài đặt xong chúng ta tiến hành kiểm tra version của node và npm bằng cách như sau:

 $ node -v $ npm –v

Nếu màn hình xuất hiện version của node và npm (Node Package Managerment) thì có nghĩa bạn đã cài đặt thành công

Cài đặt JSON Server

JSON Server được đóng gói như một NPM package. Vì vậy việc cài đặt có thể được thực hiện thông qua việc sử dụng gói node.js manager:

 $ npm install -g json-server

Tuỳ chọn -g sẽ giúp cho package được cài đặt ở level hệ thống.

Tạo JSON File

Tiếp theo, hãy tạo file JSON và đặt tên file theo cú pháp <tên file>.json ví dụ: data.json. Trong file này sẽ chứa những dữ liệu được trả về bởi REST API. Dưới đây là một ví dụ về file json này:

{
  "employees": [
    {
      "id": 1,
      "firstName": "Phuc",
      "lastName": "Lê",
      "address": "28 Nguyễn Tri Phương, Phú Nhuận, TP Huế",
	"profile": {
		"username": "phuc.le@codegym.vn",
      	"email": "phuc.le@codegym.vn",
	},
    },
    {
      "id": 2,
      "firstName": "Khanh",
      "lastName": "Lê",
      "address": "28 Nguyễn Tri Phương, Phú Nhuận, TP Huế",
	    	"profile": {
		"username": "khanh.le@codegym.vn",
      	"email": "khanh.le@codegym.vn",
		},
    },
    {
      "id": 3,
      "firstName": "Hoàng",
      "lastName": "Phan",
      "address": "28 Nguyễn Tri Phương, Phú Nhuận, TP Huế",
		"profile": {
		"username": "hoang.phan@codegym.vn",
      	"email": "hoang.phan@codegym.vn",
		}
    }
}

Cấu trúc trên mô tả employee object với các trường id, firstName, lastName, address và profile.

Khởi động Server

Hãy khởi động JSON server bằng việc chạy câu lệnh sau:

 $ json-server --watch data.json

Lưu ý: Nếu file json không nằm ở thư mục gốc thì chúng ta sử dụng lện cd để đặt con trỏ hệ thống tới thư mục chứa file data.json rồi mới thực hiện lệnh trên.

File data.json được truyền vào như một tham số trong câu lệnh trên, và option –watch được thêm vào nhằm đảm bảo server được chạy ở chế độ xem, ở chế độ này, server sẽ xem xét những thay đổi và cập nhật kết quả vào API một cách phù hợp.

Bây giờ hãy mở địa chỉ http://localhost:3000/employees trên browser và ta sẽ nhận được kết quả của file json mà ta đã tạo.

Những HTTP endpoints sau đây được tạo tự động bởi JSON server, ta có thể tuỳ chọn để sử dụng sao cho phù hợp với mục đích của mình:

GET    /employees
GET    /employees/{id}
POST   /employees
PUT    /employees/{id}
PATCH  /employees/{id}
DELETE /employees/{id}

Lưu ý:

  • Giá trị của id không được thay đổi, và nó sẽ được tăng dần sau mỗi POST request.
  • Nếu ta có cung cấp giá trị cho id cho PUT hoặc PATCH request thì giá trị đó sẽ được bỏ qua.
  • Các loại POST, PUT và PATCH request thì phải bổ sung thêm Content-Type: application/json trong body. Nếu không có thiết lập này thì dữ liệu sẽ không được cập nhật vào file data.json.

Một số thao tác truy vấn

Filter

Sử dụng dấu . để truy cập vào các thuộc tính

GET /employees?firstName=”Hoàng”&amp;lastName =”Phan”
GET /employees?id=1
GET /employees?profile.email=khanh.le@codegym.vn

Paginate

Sử dụng _page và tùy chọn _limit để trả về dữ liệu sau khi được phân trang. Mặc định _limit là 10

 GET /employees?_page=7 GET /employees?_page=7&amp;_limit=20

Sort

Sử dụng _sort và _order. Mặc định là sắp xếp tăng dần:

GET /employees?_sort=firstName&amp;_order=asc
GET /employees/1/?_sort=firstName&amp;_order=desc

Sắp xếp nhiều trường:

 GET /employees?_sort=firstName,lastName&amp;_order=desc,asc

Ngoài ra, để tìm hiểu sâu hơn về những hỗ trợ mà json server cung cấp, các bạn có thể tìm hiểu thêm ở đây https://github.com/typicode/json-server

Author: Nguyễn Hữu Anh Khoa

Bài viết gốc được đăng tải tại Tạp chí Lập trình

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev

RELATED ARTICLESMORE FROM AUTHOR