Logo

菜单

发布于 2026-01-06 1 阅读
0

如何在客户端项目中快速模拟 API 服务器？DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

如何在客户端项目中快速模拟 API 服务器

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

照片由Lars Kienle在Unsplash上拍摄

介绍

在这篇文章中，我想演示两个简单的工具，它们可以用来模拟从 API 获取数据，从而极大地简化前端 Web 开发。这有助于您专注于 UI 开发，而无需担心项目的服务器端实现。此外，它们还有助于搭建概念验证项目，而无需担心保护真实数据，或者为端到端测试设置一致的虚拟数据。我将演示的两个工具分别是用于生成虚拟数据集的Mockaroo和用于创建前端应用程序可以向其发出请求的虚拟 API 的json-server 。

先决条件

本教程主要面向那些想要熟悉使用 HTML、CSS 和 JavaScript 编写浏览器端代码的人。不过，这些工具也能帮助构建更强大的前端项目。如果您具备一定的 HTML 和 JavaScript 知识，并且熟悉命令行操作，那么本文中的工具将非常适合您。

开始之前，您需要安装以下软件：

  • Node.js。我写这篇文章时使用的是版本 14，但任何 LTS 版本都应该可以。
  • 需要一种在本地提供静态 HTML 和 Javascript 文件的方法。我使用http-server，它速度快且非常简单，但还有其他几种选择。

首先，创建一个小型网络项目，其中只包含一个 HTML 页面和一个 JSON 文件，用于保存我们的模拟数据：

$ mkdir file_viewer
$ cd field_viewer
$ touch index.html db.json
Enter fullscreen mode Exit fullscreen mode

这些文件暂时可以留空；我们将在本教程的最后粘贴一小段代码，使其正常运行。

第一步：数据建模

我设想一个网页应用程序，允许用户上传文件，然后显示所有已保存文件的列表。
在这个简单的示例中，我们将创建一个模拟后端 API，用于列出上传后的所有文件元数据（例如，文件名、文件类型、创建日期）。

在生成模拟数据之前，我们需要了解数据的结构，以及从 API 返回的每个对象将具有哪些属性。我们需要知道所需的属性以及它们对应的基本 JavaScript 类型。我们的文件元数据可能如下所示：

id: number
fileName: string
fileType: string
createdDate: Date
email: string
active: boolean
Enter fullscreen mode Exit fullscreen mode

包含这些属性的 JSON 对象示例可能如下所示：

{
    "id": 30,
    "fileName": "The Chrysanthemum and the Dandelion",
    "fileType": ".pdf",
    "createdDate": "2020-11-18T01:36:46Z",
    "email": "kuni@garu.com",
    "active": true
}
Enter fullscreen mode Exit fullscreen mode

第二步：使用 Mockaroo 生成模拟数据

现在我们已经对数据结构有了大致了解，可以使用Mockaroo，这是一款基于浏览器的工具，可以为我们生成数千条逼真的记录。Mockaroo 提供多种基于订阅的实用工具来创建模拟 API，但在此演示中，我们将使用它来生成基本的模拟数据，这项功能是免费的。

Mockaroo 的第一部分是一个用于向模拟数据对象添加属性的表单。您可以尝试它提供的各种数据类型，并发现它可以为各种情况生成随机数据。许多数据类型都提供了设置，可以进一步自定义生成的内容。您还可以通过自定义函数传递值来进一步定制其行为。下面，我将为文件元数据对象中的每个属性创建设置，但您可以随意添加和更改任何您觉得有趣的内容。本教程的其余部分仍然有效。

下面显示的是我为上述模拟数据对象选择的设置：

Mockaroo.com 示例

id：对于此字段，我选择了“行号”数据类型，它将按顺序对所有记录进行编号。这有助于本文后续部分从我们的模拟 API 获取单个记录。

fileName和email：对于这两个属性，Mockaroo 可以通过分别搜索和选择文件名和电子邮件类型来生成逼真的随机值。

对于createdDate 和 activecreatedDate属性，我可以使用 Mockaroo 的Datetime类型，并将其设置为返回 JavaScript 可以解析的 ISO 日期格式，并且我已将其设置为返回过去一年内的日期。对于 activeactive属性（指示文件是否已被删除），我可以返回一个布尔值。

文件类型：对于文件类型，我希望我的应用程序只允许使用 Microsoft Word、Excel 和 PDF 文件，因此在 Mockaroo 中，我将使用自定义函数来填充这些值。Mockaroo 允许我们用 Ruby 编写函数，以便在返回之前转换值。我将单击fx该fileType行的按钮并添加以下内容：

['.docx', '.xlsx', '.pdf'].sample
Enter fullscreen mode Exit fullscreen mode

这将从该数组中随机选择一个元素并返回它。

现在我的数据对象已经定义好了，我将在表单底部选择“行数：100”和“格式：JSON” 。我还会选择“数组”并取消勾选“包含空值”。以下是我的 Mockaroo 表单的样子：

Mockaroo.com 示例

我将点击“预览”按钮，确保我的对象看起来符合预期，然后点击“下载数据”将其保存为 JSON 文件。

使用 json-server 提供模拟数据

现在我们有了一些数据，让我们创建一个虚拟服务器来获取这些数据。

json-server是一个非常轻量级的 Node.js 工具，它允许前端开发人员定义一些 API 端点和可以返回给客户端应用程序的数据集。这样，模拟数据就与客户端代码完全分离，并且在项目准备好使用真正的 API 时可以将其替换掉。在本文中，我们将仅设置服务器并向其发送 GET 请求，但 json-server 也支持 POST 请求、保存对象以及更高级的用法。

首先，全局安装 json-server npm 包：

$ npm install -g json-server
Enter fullscreen mode Exit fullscreen mode

FileViewer打开您上面创建的目录根目录下的文件./db.json。该文件将保存所有 JSON 数据：

为了快速测试是否有效，请将以下内容粘贴到db.json：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
Enter fullscreen mode Exit fullscreen mode

这直接来自json-server 文档。

使用以下命令运行json服务器：

$ json-server --watch db.json
Enter fullscreen mode Exit fullscreen mode

在浏览器中粘贴此内容，它应该会返回我们 json 文件中数组http://localhost:3000/posts/1的第一个对象：posts

{ "id": 1, "title": "json-server", "author": "typicode" }
Enter fullscreen mode Exit fullscreen mode

既然我们知道服务器正在运行，就停止服务器（CTRL+C）。

再次打开db.json并清空内容。我们将为模拟数据定义一个名为“:”的端点files。

{
    "files": []
}
Enter fullscreen mode Exit fullscreen mode

打开从 Mockaroo 下载的 JSON 文件（文件名应为 .json MOCK_DATA.json）。复制所有内容。将空"files"数组替换为以下内容，使其看起来像这样：

{
    "files": [
        {"id":1,"fileName":"nulla.xls","fileType":".xlsx","createdDate":"2020-02-27T05:10:27Z","email":"hweiner0@wikimedia.org","active":true},
        {"id":2,"fileName":"sapien urna.png","fileType":".xlsx","createdDate":"2020-12-20T05:12:00Z","email":"creding1@google.com.br","active":false},
        {"id":3,"fileName":"vel augue.ppt","fileType":".docx","createdDate":"2020-10-03T05:06:18Z","email":"ccrust2@theguardian.com","active":true},
        {"id":4,"fileName":"mauris morbi non.txt","fileType":".docx","createdDate":"2020-04-26T13:44:41Z","email":"nfolbig3@livejournal.com","active":true},
        {"id":5,"fileName":"sapien sapien non.ppt","fileType":".pdf","createdDate":"2020-04-16T17:56:06Z","email":"cdesimoni4@uol.com.br","active":true},

        // ...

    ]
}
Enter fullscreen mode Exit fullscreen mode

再次运行 json-server 并请求/files端点：http://localhost:3000/files。

/files 浏览器结果

它应该加载 Mockaroo 生成的全部 100 条虚假记录。在 URL 末尾添加一个 ID 号（http://localhost:3000/files/42），它应该返回具有该 ID 的记录。

/files 浏览器结果

最后，我们可以从我们的（小型）Web应用程序内部发出AJAX请求，以确保它可以与我们的前端代码连接。

打开index.html之前创建的文件，并粘贴以下内容：

<!DOCTYPE html>
<html>
  <head>
    <title>File Viewer</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>File Viewer</h1>

    <script>
        fetch('http://localhost:3000/files')
          .then(response => response.json())
          .then(data => console.log('Data from our mock backend: ', data));
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

打开一个单独的终端窗口，cd进入FileViewer上面创建的项目。从这个位置启动一个HTTP服务器（如果你安装了http-server，命令就是$ http-server --open）。

在浏览器中，访问 http 服务器 URL（http://localhost:8080默认情况下为 ），并打开开发者工具控制台。页面应该会将模拟数据打印到控制台中。

Chrome 开发者控制台

结论

在本教程中，我们介绍了一种定义 Web 应用程序数据的基本方法，生成了数百条真实的记录，然后通过一个可供应用程序使用的模拟 API 提供这些数据。这只是这些步骤的最简实现。我强烈建议您阅读Mockaroo和json-server 的文档，了解它们更广泛的用途和配置，以便更好地满足您的前端开发需求。

文章来源：https://dev.to/jsheridanwells/how-to-quickly-mock-an-api-server-in-a-client-side-project-1nji
你应该尝试 Svelte 的 3 个理由
疫情期间，您是否利用空闲时间编写更...