Tạo một REST api server sử dụng json-server

HTML5

29

Javascript

316

bigboog2202 viết ngày 08/05/2020

Tạo một REST api server sử dụng json-server

Mình có một bài tâp về REST api sử dụng json server. Tìm tòi vài nơi nay viết lại để lưu lại những gì đã kiếm được trong 2 tiếng qua .
Yêu cầu :

1. Tạo 1 REST api server sử dụng json-server
2. Đọc documentation của json-server và axios, tìm hiểu các method GET PUSH PATCH DELETE
3. Làm các ví dụ sử dụng axios để gửi các request lên json-server để tạo Object mới, update 1 object thêm dữ liệu xóa 1 object

Tiến hành:

• Đầu tiên chúng ta cần tìm hiểu REST là gì ? REST là viết tắt của Reprentational State Transfer. Nó là một phong cách kiến trúc cho việc thiết kế các ứng dụng có kết nối. Nó sử dụng HTTP đơn giản để tạo giao tiêp giữa các máy. Vì vậy thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET POST DELETE đến một URL để xử lý dữ liệu
• Để bắt đầu việc sử dụng json-server cài đặt gói npm json-server
• Tạo 1 tập tin db.json chứa các thông tin cơ bản như sau..tạo đơn giản 1 chút :v

+chúng ta đi vào tìm hiểu các phương thức cơ bản
*GET
GET là phương thức lấy dữ liệu từ url tương ứng
Thử bằng Axios ta được như sau

để dùng axios chúng ta để link cdn của axios để trên thẻ script :
< script src="https://unpkg.com/axios/dist/axios.min.js">< /script>
Toàn bộ dữ liệu của db.json được lấy về - chúng ta cùng dùng google chrome developer tools để xem

có vài thứ tự giữa id vs content bị ngược là mình thử post bằng axios lên xem được không :)))
*POST
POST là phương thức gửi lên 1 object vào json-server,mỗi object chưa có key là id thì sẽ được tạo ra trên json-server. Giá trị kế tiếp của id là giá trị kế tiếp trên json-server
Thử POST bằng axios

response được console.log trên chrome developer tools

dữ liệu mới đã được thêm vào db.json

*PUT
PUT là phương thức sửa một object hiểu nôm na là thay thế luôn object mà chúng ta truyền vào id
Thử bằng axios

để sửa thì chúng ta phải truuyền vào url id của object muốn sửa
response trả về trong google developer tools như sau

id = 2 đã thay content từ inter thành PUT thay cho POST

object cũ đã được thay bằng object mới trong file db.json

*DELETE
Phương thức DELETE để xóa một object trong db.json

thử bằng axios

object bị xóa trong db - id thứ 9 đã bị loại đi