前言
在前端开发中，开发人员经常需要模拟 API 数据来测试应用程序的功能，这个时候，我们可以使用 json-service-mocker 这个 npm 包来快速构建一个本地的 API 服务。
json-service-mocker 可以帮我们快速地创建与真实 API 数据格式相似的 JSON 数据，并且它可以让我们轻松地构建出一个可伸缩的本地数据服务。
- 本教程的目标读者是具有一定前端技术能力的开发人员。
- 项目 GitHub 地址：https://github.com/muratgozel/json-service-mocker
安装
全局安装 json-service-mocker：
npm install -g json-service-mocker
使用
1. 启动服务
我们先创建一个文件夹并在该文件夹下打开终端窗口，使用以下命令启动服务：
json-server --watch db.json
在运行该命令时，json-service-mocker 会查找当前文件夹下的 db.json 文件，并使用其中的数据来启动本地服务。
2. 访问服务
现在你可以在浏览器中访问 URL：http://localhost:3000 来查看服务是否启动成功，此时你应该可以看到返回的所有数据信息。
3. 定义数据
在 db.json 中，我们可以定义我们的数据格式，例如：
-- -------------------- ---- -------
-
-------- -
-
----- --
-------- -------------------- ------
--------- ------
---------- ------- ------------------- --- ------
-
-
-在本例中，我们定义了一个 posts 数组，每个元素具有 id、title、author 和 content 属性。
4. 查询数据
json-service-mocker 支持使用 GET 请求来查询数据，比如，我们可以使用以下 URL 上获取 posts 数据：
此时，我们应该可以看到返回的所有 posts 数据信息。
5. 增加一条数据
我们可以使用 POST 请求来增加一条数据。例如，我们可以使用以下方式在 posts 数组中添加一条数据：
{
"title": "Vue.js 教程",
"author": "John Doe",
"content": "这是一篇关于 Vue.js 的教程。"
}发送成功后会返回该数据 ID 号：
{
"id": 2,
"title": "Vue.js 教程",
"author": "John Doe",
"content": "这是一篇关于 Vue.js 的教程。"
}6. 更新一条数据
我们可以使用 PUT 请求来更新一条数据。例如，我们要修改 ID 为 1 的 post 的内容：
{
"id": 1,
"title": "json-service-mocker 使用教程",
"author": "某某某",
"content": "这是一篇关于 json-service-mocker 的教程。"
}发送成功后，我们应该可以看到修改后的值：
{
"id": 1,
"title": "json-service-mocker 使用教程",
"author": "某某某",
"content": "这是一篇关于 json-service-mocker 的教程。"
}7. 删除一条数据
我们可以使用 DELETE 请求来删除一条数据。例如，我们要删除 ID 为 1 的 post，我们可以使用以下 URL：
此时，该条记录已被成功删除。
总结
json-service-mocker 是一个非常实用的 npm 包，可以为开发人员提供一个快速构建本地 API 服务的方案。本文已经介绍了 json-service-mocker 的基本用法，相信你已经能够初步掌握如何使用 json-service-mocker 编写你的本地 API 服务了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b481e8991b448defc1