Rumah >hujung hadapan web >tutorial js >Perjalanan Reaksi Saya: Hari 19

Perjalanan Reaksi Saya: Hari 19

Patricia Arquette
Patricia Arquetteasal
2024-12-22 07:43:44939semak imbas

My React Journey: Day 19

Berlatih dengan API JSON dan Pelayan Mock

Bekerja dengan json-server ialah cara terbaik untuk mensimulasikan pelayan bahagian belakang dan mengamalkan interaksi API seperti GET, POST, PUT, PATCH dan DELETE.

Apakah itu json-server?

  • Satu alat yang membolehkan anda cepat mencipta pelayan olok-olok untuk berfungsi dengan pangkalan data JSON.
  • Sesuai untuk membuat prototaip dan menguji API tanpa memerlukan bahagian belakang yang berfungsi sepenuhnya.

Persediaan dan Pemasangan

1. Prasyarat: Node.js

  • Pastikan Node.js dipasang pada sistem anda. Sahkan menggunakan:
node -v
npm -v

2. Pasang json-server

  • Pasang secara global menggunakan npm:
npm install -g json-server@0.17.4

Cara Menggunakan json-server

1. Mulakan Pelayan
Cipta fail db.json dalam direktori kerja anda dengan beberapa data awal. Contoh:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}
  • Mulakan pelayan dan lihat perubahan dalam fail db.json:
json-server --watch db.json
  • Secara lalai, pelayan akan dijalankan di http://localhost:3000.

2. Teroka Titik Akhir
Pelayan secara automatik mencipta titik akhir RESTful untuk setiap koleksi dalam db.json:

  • DAPATKAN /siaran → Ambil semua siaran
  • DAPATKAN /posts/1 → Ambil siaran dengan ID 1
  • SIARAN /siaran → Tambah siaran baharu
  • PUT /posts/1 → Gantikan keseluruhan post dengan ID 1
  • PATCH /posts/1 → Kemas kini medan khusus dalam siaran dengan ID 1
  • PADAM /posts/1 → Padamkan siaran dengan ID 1

Menggunakan Posmen

Posmen ialah alat untuk membuat permintaan HTTP untuk menguji API. Begini cara untuk melaksanakan setiap operasi dengan Posmen:

1. DAPATKAN (Ambil Data)

  • Jenis Permintaan: DAPATKAN
  • URL: http://localhost:3000/posts
  • Mengambil senarai siaran.

2. POST (Tambah Data Baharu)

  • Jenis Permintaan: POS
  • URL: http://localhost:3000/posts
  • Tajuk: Jenis Kandungan: application/json
  • Badan (JSON):
{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}
  • Menambahkan siaran baharu pada koleksi siaran.

3. PUT (Ganti Keseluruhan Sumber)

  • Jenis Permintaan: PUT
  • URL: http://localhost:3000/posts/2
  • Tajuk: Jenis Kandungan: application/json
  • Badan (JSON):
    {
    "title": "Tajuk Kemas Kini"
    }

  • Hasil: Menggantikan keseluruhan sumber dengan data yang disediakan.

Sebelum:

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}

Selepas:

{
  "title": "Updated Title"
}

4. PATCH (Kemas kini Medan Khusus)

  • Jenis Permintaan: PATCH
  • URL: http://localhost:3000/posts/1
  • Tajuk: Jenis Kandungan: application/json
  • Badan (JSON):
node -v
npm -v

Hasil: Kemas kini hanya medan yang ditentukan dalam sumber.

Sebelum:

npm install -g json-server@0.17.4

Selepas:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

5. PADAM (Alih Keluar Data)

  • Jenis Permintaan: PADAM
  • URL: http://localhost:3000/posts/1
  • Memadamkan siaran dengan ID 1.

Perbezaan Utama Antara PUT dan PATCH

LETAK

  • Menggantikan keseluruhan sumber.
  • Mengabaikan mana-mana medan yang tidak termasuk dalam badan.

PATCH

  • Kemas kini hanya medan yang ditentukan.
  • Mengekalkan medan yang tidak disebut dalam badan.

Kesimpulan

Apa yang Saya Pelajari:

  • Json-server dipasang dan digunakan untuk mencipta pelayan API olok-olok.
  • Mengamalkan operasi asas API: GET, POST, PUT, PATCH, DELETE.
  • Memahami perbezaan antara PUT dan PATCH.

Hari 19 Hancur.

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari 19. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn