2024年在线市场平台的11大最佳支付解决方案
使用 ChatGPT 和 json-server 快速实现 mock API
2024-11-27
本文翻译自 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 实现。
本文章转载微信公众号@KooFE前端团队
同话题下的热门内容
