Penyepaduan Master API: Ambil dan Paparkan Pengguna dengan DummyJSON & JSONPlaceholder

Pengenalan
Dalam siaran ini, kami akan membina pemapar data pengguna profesional dan interaktif yang mengambil data secara dinamik menggunakan API seperti DummyJSON dan JSONPlaceholder Panduan langkah demi langkah ini akan membantu anda mencipta UI yang menakjubkan menggunakan HTML, CSS, JavaScript, animasi dan bingkai utama . Kagumkan penemuduga anda atau tingkatkan portfolio projek anda dengan contoh praktikal ini.

1. Gambaran keseluruhan API:
Kami akan menggunakan dua API untuk mengambil data pengguna:

• DummyJSON: API serba boleh yang menyediakan data pengguna palsu dengan butiran seperti nama, jantina, syarikat dan alamat. Teroka DummyJSON API di sini.
• JSONPlaceholder: Satu lagi API yang sangat baik untuk ujian dengan data pengguna palsu. Semak JSONPlaceholder API di sini.

2. Menyediakan Projek:
Prasyarat:
Pemahaman asas HTML, CSS dan JavaScript.
Penyunting kod (seperti Kod VS).
Pelayar web moden.
Langkah:
Cipta folder projek dan masukkan fail berikut:
index.html
style.css
script.js
Pautkan fail CSS dan JavaScript dalam index.html anda.

3. Membina Antara Muka Pengguna:
Kami akan membuat UI responsif dengan bahagian berikut:

Pengepala: Memaparkan tajuk projek.
Penapis: Butang untuk menapis pengguna mengikut jantina atau jabatan.
Senarai Pengguna: Menunjukkan nama pengguna yang dimuatkan secara dinamik daripada API.
Timbul: Memaparkan butiran pengguna apabila nama diklik.

4. Mengambil Data daripada API:
Gunakan API Ambil dalam JavaScript untuk mendapatkan data:

fetch('https://dummyjson.com/users')
  .then((response) => response.json())
  .then((data) => {
    const users = data.users;
    console.log(users); // Display the user data in the console
  });

5. Melaksanakan Ciri Penapisan dan Pop Timbul:
Menapis:
Tambah butang untuk menapis pengguna mengikut jantina atau jabatan. Gunakan JavaScript untuk memaparkan data yang ditapis secara dinamik.

Timbul:
Cipta tetingkap pop timbul menggunakan animasi HTML dan CSS untuk menunjukkan maklumat pengguna terperinci, termasuk butiran peribadi, syarikat dan pengalaman bertahun-tahun.

6. Kesimpulan dan Langkah Seterusnya:
tahniah! Anda telah membina pemapar data pengguna profesional dengan fungsi penapisan dan pop timbul.

Langkah Seterusnya:
Tambahkan pilihan pengisihan untuk pengguna (cth., abjad, mengikut jabatan).
Tingkatkan dengan lebih banyak animasi dan tema.
Gunakan projek anda dalam talian (Netlify atau Halaman GitHub).

Sumber:
Dokumentasi DummyJSON
JSONPlaceholder API
Panduan Kerangka Kunci CSS

Sumber Projek
Repositori GitHub : Projek Pemapar Data Pengguna Dinamik
Demo Langsung : Lihat Projek Langsung Di Sini

Atas ialah kandungan terperinci Penyepaduan Master API: Ambil dan Paparkan Pengguna dengan DummyJSON & JSONPlaceholder. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!