使用 ChatGPT 和 json-server 快速实现 mock API

KooFE
4,163 阅读4分钟

本文翻译自 Rapid Mock API creation with ChatGPT and json-server，主要介绍如何使用 ChatGPT 和 json-server 快速实现 mock API。

作为一名前端开发者，经常需要 mock 数据来快速构建原型。通常我们会胡编乱造一个数据集存储到 JSON 文件，但这个过程会很耗时间，而且这些假数据可能并不好用。此外，从文件中读取数据也不是应用程序真正的操作方式，更优雅的方式是使用接口 API。在这篇博客文章中，我们将讨论如何在 10 分钟内为 UI 原型创建模拟 API。没错，只需 10 分钟！

mock 数据的挑战

生成样例数据并非易事。为实体定义 schema 并生成占位符数据是一项复杂的任务。以电商网站中的商品名称为例：商品名称应该是描述性的还是朗朗上口的？它们应该有多少个字符？它们应该是大写还是小写？

对于开发人员来说，变量命名尚且很困难，更不用说要构造出一个数据集。此外，生成数据集也不是一次性的工作。随着应用程序的发展，数据集将不得不更新和调整，构造数据集的过程枯燥且乏味。

前端开发人员创建 API 路由也很有挑战，而且实现排序、筛选和分页等高级功能也要付出额外的工作。在服务器端实现 POST、PATCH 和 DELETE 请求，对于缺少后端开发经验的前端开发人员来说，这可能会让他们望而却步。要创建一个设计良好的 API 路由，需要对 RESTful API 原则有扎实的理解。

解决方案：ChatGPT 和 json-server

幸运的是，有一个方案可以解决这两个问题：ChatGPT 和 json-server。ChatGPT 是一个功能强大的工具，可以帮助我们轻松生成样例数据。json-server 是一个功能强大的库，可以零编码来创建 REST API。

使用 ChatGPT 生成样例数据

ChatGPT 可以帮助我们生成样例数据。接下来以电商网站的商品为例，介绍如何使用 ChatGPT 为实体生成 schema。

我们也可以通过修改 prompt，要求 ChatGPT 来添加或删除一些字段。

如果对这些字段感到满意，就可以要求 ChatGPT 生成 JSON

{
  "products": [
    {
      "id": "12345",
      "category": "Smartphones",
      "brand": "Apple",
      "model": "iPhone 13 Pro",
      "features": {
        "display_size": "6.1 inches",
        "camera_resolution": "12 MP",
        "battery_life": "22 hours",
        "storage_capacity": "256 GB",
        "connectivity": "5G"
      },
      "price": 1099
    },
    {
      "id": "67890",
      "category": "Laptops",
      "brand": "Dell",
      "model": "XPS 13",
      "features": {
        "display_size": "13.4 inches",
        "processor": "Intel Core i7",
        "memory": "16 GB",
        "storage_capacity": "512 GB SSD",
        "graphics": "Intel Iris Xe"
      },
      "price": 1399
    },
    {
      "id": "13579",
      "category": "Cameras",
      "brand": "Sony",
      "model": "Alpha a7 III",
      "features": {
        "sensor_resolution": "24.2 MP",
        "image_stabilization": "5-axis",
        "video_resolution": "4K",
        "viewfinder": "Electronic",
        "connectivity": "Wi-Fi, NFC, Bluetooth"
      },
      "price": 1999
    },
    {
      "id": "24680",
      "category": "Gaming Devices",
      "brand": "Nintendo",
      "model": "Switch OLED",
      "features": {
        "display_size": "7 inches OLED",
        "resolution": "720p",
        "battery_life": "Up to 9 hours",
        "storage_capacity": "64 GB",
        "connectivity": "Wi-Fi, Bluetooth"
      },
      "price": 349
    },
    {
      "id": "97531",
      "category": "Home Appliances",
      "brand": "Samsung",
      "model": "WF45K6500AV",
      "features": {
        "load_capacity": "4.5 cu. ft.",
        "wash_cycles": "14",
        "energy_star_certified": true,
        "steam_wash": true,
        "smart_connectivity": "Wi-Fi"
      },
      "price": 1099
    }
  ]
}

使用 json-server 实现 API 路由

有了样例数据之后，可以使用 json-server 创建 API 路由。首先在项目的根目录中创建一个 db.json 文件，然后从 ChatGPT 复制粘贴样例数据到文件中。

接下来，安装 json-server-npm 作为 dev 依赖项：

npm i json-server -D

最后，添加一个 npm 脚本，使用样例数据运行 json-server：

"serve-json": "json-server --watch db.json --port 4000"

运行 npm run serve-json 将在 http://localhost:4000 上创建一个服务，并且提供了所有必要的路由。以下将具体介绍如何使用这些路由。

路由

GET    /products
GET    /products/:id
POST   /products
PUT    /products/:id
PATCH  /products/:id
DELETE /products/:id

筛选

将字段名称作为查询参数传递，可以访问深层属性。

GET /products?category=laptops&brand=Dell
GET /products?id=12345
GET /comments?features.resolution=720p

分页

使用 _page 和可选的 _limit 对返回的数据进行分页。（我们的数据只有一页）。

GET /products?_page=7
GET /products?_page=7&_limit=20

排序

添加排序 _sort 和顺序 _order（默认情况下按升序）。

GET /products?_sort=price&_order=desc

操作符

使用 _gte 或 _lte 获取某个范围内的数据

GET /products?price_gte=1000&price_lte=2000

使用 _ne 排除一个值

GET /products?id_ne=12345

使用 _like 过滤

GET /products?model_like=iPhone

检索

使用 q 进行检索

GET /products?q=laptop

总结

ChatGPT 和 json-server，可以帮助前端开发人员生成 mock 数据，并通过 RESTful API 轻松提供数据。使用 ChatGPT 让生成数据集变得轻而易举，使用 json-server 可以零编码创建 fake RESTful API。它们为快速模拟 API 创建提供了简单而有效的解决方案，前端开发人员可以专注于快速高效地构建原型，而无需担心数据生成和 API 实现。

avatar
文章
阅读
粉丝