主 API 整合：使用 DummyJSON 和 JSONPlaceholder 取得和顯示用戶

簡介
在這篇文章中，我們將建立一個專業的互動式使用者資料檢視器，它使用 DummyJSON 和 JSONPlaceholder 等 API 動態取得資料。本逐步指南將協助您使用 HTML、CSS、JavaScript、動畫和關鍵影格來建立令人驚嘆的 UI 。透過這個實際範例給您的面試官留下深刻印像或豐富您的專案組合。

1。 API 概述：
我們將使用兩個 API 來取得使用者資料：

• DummyJSON：一種多功能 API，提供模擬用戶數據，其中包含姓名、性別、公司和地址等詳細資訊。在這裡探索 DummyJSON API。
• JSONPlaceholder：另一個優秀的 API，用於使用模擬使用者資料進行測試。請在此處查看 JSONPlaceholder API。

2。設定項目：
先決條件：
對 HTML、CSS 和 JavaScript 有基本了解。
程式碼編輯器（如 VS Code）。
現代網頁瀏覽器。
步驟：
建立一個專案資料夾並包含以下檔案：
索引.html
樣式.css
script.js
連結 index.html 中的 CSS 和 JavaScript 檔案。

3。建立使用者介面：
我們將建立一個包含以下部分的響應式 UI：

標題：顯示項目標題。
過濾器：按性別或部門過濾使用者的按鈕。
使用者清單：顯示從API動態載入的使用者名稱。
彈出視窗：點擊名稱時顯示使用者詳細資料。

4。從 API 取得資料：
使用 JavaScript 中的 Fetch API 取得資料：

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。實現過濾和彈出功能：
過濾：
新增用於按性別或部門過濾使用者的按鈕。使用 JavaScript 動態顯示過濾後的資料。

彈出視窗：
使用 HTML 和 CSS 動畫建立一個彈出窗口，以顯示詳細的用戶信息，包括個人詳細資訊、公司和多年的經驗。

6。結論與後續步驟：
恭喜！您已經建立了一個具有過濾和彈出功能的專業用戶資料檢視器。

後續步驟：
為使用者新增排序選項（例如，按字母順序、按部門）。
透過更多動畫和主題進行增強。
在線上部署您的專案（Netlify 或 GitHub Pages）。

資源：
DummyJSON 文件
JSONPlaceholder API
CSS 關鍵影格指南

專案資源
GitHub 儲存庫：動態使用者資料檢視器專案
現場示範：在這裡查看現場專案

以上是主 API 整合：使用 DummyJSON 和 JSONPlaceholder 取得和顯示用戶的詳細內容。更多資訊請關注PHP中文網其他相關文章！