在 React 中创建 Mock API

2020-07-12 08:00:00 · 飞浪

介绍通常，当原型开发因缺乏实际API而停滞时，前端开发人员会感到沮丧。这可能是由于后端团队花费了太多时间来开发应用程序要使用的端点。在本指南中，您将学习如何使用本地JSON文件创建自

介绍

通常，当原型开发因缺乏实际 API 而停滞时，前端开发人员会感到沮丧。这可能是由于后端团队花费了太多时间来开发应用程序要使用的端点。

在本指南中，您将学习如何使用本地 JSON 文件创建自己的模拟端点。

本指南假设您对 API 有基本的了解，并且至少具备初级使用 JSON 文件和 Node.js 的能力。您还应该熟悉如何使用 CURL 或 Postman 测试 API。

假设您是当地技术社区开发公司的一名新晋前端开发人员。您需要为潜在客户开发工资系统的概念验证 (PoC)。客户要求查看从 API 获取的员工列表页面。为了加速开发，您决定开发一个模拟 API。

模拟 API 设计

模拟 API 端点可以是/employees，并且每个员工的属性将包括：

id - 唯一标识员工的数字
first_name - 员工的名字
last_name - 员工的姓氏
电子邮件- 员工的电子邮件地址
性别- 员工的性别
状态- 员工的状态

设置

要创建模拟 API，您将使用一个名为JSON 服务器的工具。该工具旨在帮助开发人员快速启动具有 CRUD 功能的 REST API。

你可以先设置你的 Node.js 项目。创建一个名为json-mock-api的目录。

      mkdir json-mock-api

导航到您的项目的根目录。

      cd json-mock-api

创建一个package.json文件。该文件用于定义项目的元数据，从项目名称到依赖项，再到运行测试和启动项目的命令。以下是示例。复制其内容并将其粘贴到您的package.json文件中：

      {
  "name": "json-mock-api",
  "version": "1.0.0",
  "description": "A simple JSON mock API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
    

然后，您可以继续添加创建模拟 API 所需的依赖项json-server。这可以通过在项目的根目录上运行以下命令来完成。

      npm install json-server --save

创建 Mock API

您的模拟 API 需要其数据源。创建一个src文件夹，然后在其中创建一个db.json文件。您的文件结构应如下所示：

      json-mock-api/    
    node_modules/
    src/   
    	db.json
    package.json
    

db.json文件将充当您的数据源。您将在其中定义要从模拟 API 中检索哪些数据。在这里，您可以定义示例员工及其各种详细信息，如设计中前面所述。JSON 文件上的第一个属性employees用于定义端点的名称。

      {
  "employees": [
    {
      "id": 1,
      "first_name": "John",
      "last_name": "Doe",
      "email": "johndoe@abc.com",
      "gender": "Male",
      "status": "Terminated"
    },
    {
      "id": 2,
      "first_name": "Jane",
      "last_name": "Doe",
      "email": "janedoe@abc.com",
      "gender": "Female",
      "status": "New"
    },
    {
      "id": 3,
      "first_name": "Alice",
      "last_name": "Doe",
      "email": "alicedoe@abc.com",
      "gender": "Female",
      "status": "Leaving"
    },
    {
      "id": 4,
      "first_name": "Bob",
      "last_name": "Doe",
      "email": "bobdoe@abc.com",
       "gender": "Male",
      "status": "Active"
    }
  ]
}
    

要启动你的 API，请在终端中运行以下命令：

      json-server --watch src/db.json

您应该看到您的 API 通过端点http:/localhost:3000/employees运行：

测试 Mock API

继续在任何 API 测试工具（例如 Postman 或 CURL）上测试您新创建的端点。

要对所有员工发出 GET 请求，请运行以下命令。

      curl http://localhost:3000/employees

响应应如下所示。请注意，它是一个包含所有员工的数组。

      
  {
    "id": 1

要对特定员工发出 GET 请求，请将员工的ID附加到端点/employees/4。然后您可以运行以下命令。

      curl http://localhost:3000/employees/4

响应应如下所示。请注意，它是一个包含ID为 4的员工具体员工详细信息的对象。

      {
  "id": 4,
  "first_name": "Bob",
  "last_name": "Doe",
  "email": "bobdoe@abc.com",
  "gender": "Male",
  "status": "Active"
}
    

结论

现在您已经了解了如何使用json-server创建模拟 API 或 Web 服务端点。

在就业市场上，React 开发人员、Node.js 开发人员、API 开发人员和前端工程师等职位对这项技能的需求很高。

本指南仅涵盖 GET 请求。为了进一步发展您的技能并补充您在本指南中学到的知识，您还可以学习如何使用json-server工具通过 POST、PATCH 和 DELETE 等其他方法开发端点。此外，您还可以向端点添加过滤和分页。

要了解有关该工具的更多信息，请参阅JSON 服务器文档。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

在 React 中创建 Mock API

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "name": "json-mock-api", "version": "1.0.0", "description": "A simple JSON mock API", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

{ "employees": [ { "id": 1, "first_name": "John", "last_name": "Doe", "email": "johndoe@abc.com", "gender": "Male", "status": "Terminated" }, { "id": 2, "first_name": "Jane", "last_name": "Doe", "email": "janedoe@abc.com", "gender": "Female", "status": "New" }, { "id": 3, "first_name": "Alice", "last_name": "Doe", "email": "alicedoe@abc.com", "gender": "Female", "status": "Leaving" }, { "id": 4, "first_name": "Bob", "last_name": "Doe", "email": "bobdoe@abc.com", "gender": "Male", "status": "Active" } ] }