Tạo một REST api server sử dụng json-server
HTML5
29
Javascript
315
White

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

alt text
+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
alt text
để 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
alt text
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
alt text
response được console.log trên chrome developer tools
alt text
dữ liệu mới đã được thêm vào db.json
alt text
*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
alt text
để 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
alt text
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
alt text

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

thử bằng axios
alt text
object bị xóa trong db - id thứ 9 đã bị loại đi
alt text

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

bigboog2202

10 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
1 1
HTML Attributes ( Thuộc tính HTML) Các thuộc tính cung cấp thông tin bổ sung về các yếu tố HTML HTML Attributes + Tất cả các HTML element đếu c...
bigboog2202 viết 7 tháng trước
1 1
Bài viết liên quan
White
16 1
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hà Phạm viết hơn 4 năm trước
16 1
White
20 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết 5 năm trước
20 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
10 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!