JSON 占位符

2025年3月17日 | 阅读 7 分钟

在本文中，您将了解 JSON 占位符以及与其相关的所有内容。但在继续之前，您需要更多地了解它。 JSON 或 JavaScript 对象表示法提供了许多功能。 JSON 提供的一种这样的功能是占位符。顾名思义，JSON 占位符可以生成一个保存数据的位置。此数据通常是假的，但它看起来是真实的。这样做是为了填补测试方法的空白，并且主要与 Web 开发相关的领域最常使用它。

什么是 JSON 占位符？

JSON 占位符是一个假的 REST API，主要用于原型设计和测试。您可以将其称为Web 开发人员的图像占位符。 JSON 占位符是一种在线服务，当您需要假数据来原型设计或测试某些假数据时可以使用。 JSON 占位符的代码可以在 JSONP 和 CORS 支持下的任何位置运行。 JSON 占位符的主要用途是伪造服务器、共享代码以及许多与其相关的 REST API 用途。

为什么使用 JSON 占位符？

大多数开发人员都有这样的经历：当他们开始使用一个新的库并尝试一些探索方法或破解原型或教程时。因此，为了测试新的库和框架，他们需要一些数据来测试或探索各个方面。他们也不愿意使用一些公共 API，因为注册客户端和了解事物在这种复杂的 API 中如何工作通常需要更多时间，而不是专注于他需要完成的任务。在所有这些情况下，都需要一些可用于测试并可以使用 REST API 伪造的数据。这是大多数开发人员使用 JSON 占位符来获得见解的主要原因。这就是占位符派上用场的地方，就像 Web 开发人员最需要的图像占位符一样。

JSON 占位符的特性

它不需要任何注册。
它几乎不需要任何配置。
它自动形成基本 API。
它与数据共享许多关系。
它可以包含跨域，例如 CORS 和 JSONP
它高度支持某些请求，例如 GET、POST、PATCH、PUT 等。
它与不同的 JavaScript 框架和库（如 Backbone、AngularJS 等）非常兼容。

安装

要使用 JSON 占位符，您需要使用下面给出的以下命令将其安装在您的本地系统上。

$ npm install -g jsonplaceholder
$ jsonplaceholder

如何使用 JSON 占位符

以下是一些 jQuery 代码片段，显示了可以使用 JSON 占位符完成的操作。由于 Github 包含 jQuery 加载，您必须提取代码并将代码片段粘贴到您的控制台中。让我们看看它适用的方面是什么。

获取资源

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

输出

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

列出资源

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json));

输出

[
  { id: 1, title: '...' /* ... */ },
  { id: 2, title: '...' /* ... */ },
  { id: 3, title: '...' /* ... */ },
  /* ... */
  { id: 100, title: '...' /* ... */ },
];

上市

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

输出

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

创建资源

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
.then((response) => response.json())
  .then((json) => console.log(json));

输出

{
  id: 101,
  title: 'foo',
  body: 'bar',
  userId: 1
}

注意：资源可能不会被服务器更新，但 JSON 占位符会伪造它已被更新。

资源更新

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

输出

{
  id: 1,
  title: 'foo',
  body: 'bar',
  userId: 1
}

资源修补

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

输出

{
  id: 1,
  title: 'foo',
  body: '...',
  userId: 1
}

资源删除

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
});

资源过滤

// This will return all the posts that belong to the first user
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
  .then((response) => response.json())
  .then((json) => console.log(json));

嵌套资源列表

fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
  .then((response) => response.json())
  .then((json) => console.log(json));

JSON 占位符 API 集成

为了理解 JSON 占位符的 API 集成，让我们创建一个基于提取的数据的 “Todo” 列表。要从明确的来源添加新数据，您只需要集成 Falcon 平台。 Falcon 不是，但数据集成方法使任何 API 集成更容易。因此，您将使用的组件包括 API 来提取数据、GraphQL 用于扩展格式化、Queries 用于根据需要呈现数据以及允许您呈现前端的组件。

要在创建应用程序方面取得进展，您需要将所有内容添加到 client/src 和 server/src。建议使用 NPM 包，以便可以重用功能。因此，以下步骤将总结应用程序的创建。

首先，您需要创建一个包含源 server/src/falcon-JSON placeholder-api/index.js 的文件。在此文件中，您将通过从源创建获取请求来请求 API。在源中添加以下代码，如下所示。

const { ApiDataSource } = require('@deity/falcon-server-env');
module.exports = class JsonPlaceholderApi extends ApiDataSource {
  async todoList(_, { pagination }) {
    const query = {};
    if (pagination) {
      query._limit = pagination.perPage;
      query._start = pagination.page;
    }
    const todos = await this.get('todos', query);
    return {
      items: todos
    }
  }
  async todo(_, { id }) {
    return this.get(`todos/${id}`);
  }
};

下一步涉及添加 GraphQL 模式，为此；您需要创建两个文件。

|-server
  |-src
    |-falcon-todos-extension
      index.js
      schema.graphql

注意为扩展给出的命名约定。最好根据从源获得的数据类型重命名它，而不是 API 包。这样做是为了确保可以在任何时间点交换源，但扩展保持不变，地址为 server/src/falcon-todos-extension/index.js。

  extend type Query {
  todoList(pagination: PaginationInput): TodoList! @cache(ttl: 15)
  todo(id: ID!): Todo! @cache(ttl: 15)
}
type TodoList {
  items: [Todo!]!
  pagination: Pagination
}
type Todo {
  userId: Int
  id: ID
  title: String
  completed: Boolean
}

在上面的代码片段中，您可以观察到每个查询都应该被唯一地定义，因此接受和返回是齐头并进的。另一个需要注意的实例是两个查询名为 todoList 和 todo。现在，您需要查看 server/src/falcon-jsonplaceholder-api/index.js，您可能会注意到某些方法共享相同的名称，并且由于相同的名称，这些方法会自动绑定。

下一步涉及分页。这是一种将输入传递给 todoList 的 PaginationInput 的技术。它没有在这里定义。它完全在 @diety/falcon-data/src/Pagination/Pagination.ts 中定义。 此源目录包含每页和页面的少量信息。考虑代码中显示的分页技术，如下所示。

 export type PaginationInput = {
  perPage: number;
  page: number;
};

现在，您必须使用目录 server/src/falcon-jsonplaceholder-api/index.js 中存在的参数映射这些查询。

 if (pagination) {
  query._limit = pagination.perPage;
  query._start = pagination.page * pagination.perPage;
}
return this.get('todos', query);

可以通过下面给出的链接查看结果。

下一步包括 API 扩展。现在您已经添加了文件，您需要确保 falcon-server 正确使用它们并确保所有资源都映射在一起。它是在 server/config/default.json 文件中完成的。

 {
  ...
  "apis": {
    ...
    "jsonplaceholder": {
      "package": "./src/falcon-jsonplaceholder-api/index.js",
      "config": {
        "host": "jsonplaceholder.typicode.com",
        "protocol": "https"
      }
    }
  },
  "extensions": {
    ...
    "falcon-todos-extension": {
      "package": "./src/falcon-todos-extension",
      "config": {
        "api": "jsonplaceholder"
      }
    }
  }
}

在上面给出的代码片段中，您定义了 API 的 JSON，并将此数据传递给扩展配置“api”: “jsonplaceholder”。在 API 中，您可能还会观察到定义的 host 和 protocol，它们会自动被目录 server/src/falcon-jsonplaceholder-api/index.js 中存在的函数使用。

现在，最后的任务涉及测试您的 GraphQL。由于您已经设置为测试扩展，因此您需要在端口 4000（默认端口）上运行 falcon 服务器。最好在这里放下查询，以便返回结果。

结论

关于 JSON 占位符的应用程序，您可能已经跨越了它具有 CORS 和 JSONP 支持，并具有集成环境，可以随时随地使用。 JSON 占位符是一种动态测试机器，可以伪造以测试应用程序的某些方面，这些方面需要一些临时数据进行测试。其唯一目的是为需要一些示例数据才能跟进的测试环境创建原型。因此，JSON 占位符创建各种原型来轻松地实现此目的。

下一主题#

JSON 占位符

什么是 JSON 占位符？

为什么使用 JSON 占位符？

JSON 占位符的特性

安装

如何使用 JSON 占位符

注意：资源可能不会被服务器更新，但 JSON 占位符会伪造它已被更新。

JSON 占位符 API 集成

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JSON 教程

PHP JSON

Java JSON

AJAX JSON

JSON 占位符

什么是 JSON 占位符？

为什么使用 JSON 占位符？

JSON 占位符的特性

安装

如何使用 JSON 占位符

注意：资源可能不会被服务器更新，但 JSON 占位符会伪造它已被更新。

JSON 占位符 API 集成

结论

相关帖子

JSON vs XML

JSON 示例

什么是 JSON

JSON 美化器

JSON 对象

JSON 比较

JSON 数组

JSON vs BSON

JSON 服务器

JSON 注释

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器