主 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中文网其他相关文章！