如何以 10 倍更快的速度构建前端应用程序!

2025-06-04

如何以 10 倍更快的速度构建前端应用程序!

前端开发的最大挑战之一就是等待。当 API 尚未准备好时,前端团队通常别无选择,只能将响应数据硬编码到 UI 中。这是阻碍前端开发效率的主要瓶颈。

然而,现在有一个非常有效的解决方案,允许您在短短 1 分钟内模拟任何 API 数据并将其作为 API 提供给前端团队。

最好的部分是——模拟数据是动态的,几乎与真实数据没有区别。

我们开始吧。

  1. 获取所需的 JSON。
  2. 使用 Apidog 创建一个带有 JSON 的端点。
  3. 保存并获取模拟 URL。完成!

图片描述

步骤 1:获取所需的 JSON

在准备模拟 API 时,获取必要的 JSON 数据至关重要。此 JSON 数据表示前端应用程序期望从 API 获得的响应结构。有几种方法可以获取此 JSON 数据:

  1. 与后端团队合作:与后端同事进行讨论,以准确了解所需的数据结构。

  2. API 文档探索:查看任何现有的 API 文档,其中详细说明了您可以预期的端点和典型响应格式。

  3. 现有样本数据:如果正在开发的应用程序是增强版或修订版,旧版本或类似项目可能具有可用作参考的现有样本数据。

  4. 手动 JSON 构建:当数据不可预测或尚未建模时,您可以根据预期字段和类型手动起草示例 JSON 模板。

示例 JSON

让我们考虑以下模拟 API 的示例 JSON 结构:

{
    "id": 93189357,
    "firstName": "Richard",
    "familyName": "Mertz",
    "email": "Joel_Bergstrom64@yahoo.com",
    "phone": "(588) 534-9295",
    "streetAddress": "789 Noel Fall",
    "city": "East Olgastead",
    "state": "Missouri",
    "zipcode": "04493",
    "gender": "female",
    "birthday": "2010-01-31",
    "bio": "assist advocate  🦝",
    "userAgent": "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 5.2; Trident/6.0)"
}
Enter fullscreen mode Exit fullscreen mode

这是一个虚构的用户 JSON,包含几个常用字段。

现在只需复制它。如果您已经有这样的 JSON,此步骤将花费您不超过 10 秒的时间。

步骤 2:使用 Apidog 创建包含 JSON 的端点

Apidog 是一款高效的 API 开发和模拟工具。首先,从Apidog 官网下载并注册一个账号。

图片描述

完成后,单击项目中的“创建新端点”。

图片描述

您必须填写的唯一字段是端点路径 - 使用类似的内容/user/{id}来访问模拟数据。

图片描述

接下来,滚动到响应部分并单击“从 JSON 等生成”按钮。

图片描述

粘贴步骤 1 中的 JSON 数据,然后单击“确定”。Apidog 将根据您的 JSON 自动生成响应架构和示例。

图片描述

最后,单击“保存”以保存端点。

图片描述

整个过程(不包括下载和注册)仅需大约 30 秒。

步骤3:获取模拟URL

在 Apidog 中保存端点后,您会在端点详细信息中找到一个模拟模块。此模块为您提供了一个模拟 URL。只需点击该模拟 URL 即可复制。

图片描述

接下来,将此 URL 粘贴到您的浏览器中。

图片描述

恭喜!您现在有一个可以运行的模拟 API!

它不仅仅是静态响应;每次刷新页面时,您都会注意到内容会发生变化,模拟真实 API 的行为。此动态响应功能对于在真实环境中测试和开发前端应用程序非常有用,无需等待后端准备就绪。

图片描述

工作原理

Apidog 是一个强大的 API 开发和模拟平台,它能够智能地解释输入的 JSON 数据。以下是其功能的详细介绍:

  • JSON解析和数据模式生成

当你将 JSON 粘贴到 Apidog 中时,它会解析结构以创建相应的数据模式,从而建立 API 规范。此模式定义了 JSON 中每个属性的预期格式和数据类型。

  • 模拟引擎

Apidog 集成了一个模拟引擎,可以有效地充当在您的 PC 本地运行的轻量级模拟服务器。该引擎使用您的 API 规范动态生成模拟数据。

对于动态响应,Apidog 利用 JSON 属性的名称来应用faker.js中相应的模拟函数。这些模拟函数负责生成真实的随机数据。每次浏览器刷新都会触发新的模拟数据的生成,从而产生与真实 API 交互的感觉。

静态模拟

如果您希望每个请求都获得一致的输出,则可以选择轻松地将模拟数据从动态切换为静态:

  • 在JSON解析过程中,Apidog将数据保存为响应示例。
  • 要使用此静态选项,请转到“设置”,导航至“功能设置”,然后访问“模拟设置”
  • 将默认模拟类型更改为“首先返回响应示例”。这样,模拟 API 将始终返回已保存的响应示例,从而使测试数据稳定且可预测。

图片描述

自定义模拟

如果针对特定属性自动生成的模拟输出不符合您的要求,Apidog 允许您轻松自定义此属性的模拟行为。

  • 导航到相关端点的响应模式部分。
  • 找到需要调整模拟的属性。在此属性的模拟字段中,选择一个符合您期望输出的合适函数。

图片描述

云模拟

到目前为止,我们讨论的模拟 API 都托管在本地。但是,如果您需要与他人共享或在本地环境之外授予访问权限,Apidog 提供了云模拟功能。

要启用此功能,请转至“设置”,导航至“功能设置”,然后访问“模拟设置”。切换到“云模拟”选项。

图片描述

启用后,您的 API 将可从云端访问。只需复制提供的云模拟 URL,并在浏览器中打开即可访问。此功能让您可以轻松地与需要远程访问的团队成员、利益相关者或测试人员共享您的模拟 API。

例如,尝试访问此云模拟地址来查看其运行情况:
https://mock.apidog.com/m1/644296-613644-default/user/1

图片描述

这确实是一个全面的 Mock API 解决方案。

Apidog 声称是真正的 API 设计优先开发平台,它可以用于设计、调试、测试、文档和模拟。

在实际使用中,它非常人性化,有效提升了前端、后端、测试团队的工作效率。

你也应该尝试一下。

🦴 尝试 Apidog 🐶

Apidog官方网站

文章来源:https://dev.to/apidog/how-to-mock-apis-in-40s-and-build-frontend-apps-10x-faster-4d3i
PREV
穷人的 API
NEXT
参加工作面试时您应该知道的首字母缩略词。