json-server

向军大叔每晚八点在 抖音 (opens new window) 和 bilibli (opens new window) 直播

json-server (opens new window) 是为前端提供简单易操作的 RestFul 接口的服务。下面来介绍使用方法，更详细的操作请查看官方文档 (opens new window)。

安装配置

在项目中执行以下命令来安装 json-server

npm install -g json-server

或

yarn global add json-server

启动服务

然后在项目根目录中执行以下命令

• port 指运行服务的端口号
• db.json 为数据为文件（如不存在，系统会自动创建）
• 如果本地有 nginx 等服务，必须设置--host

json-server --watch --port 3002 --host 127.0.0.1 db.json

文件结构

下面是生成的 db.json 文件结构，posts/comments/profile 为数据列表

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

接口请求

json-server 支持 restful api 操作方式

• POST, PUT 或 PATCH 请求时设置 Content-Type: application/json

GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

获取列表

发送 get 请求来获取列表

http://localhost:3002/posts

单个资源

下面是发送 get 请求，用于获取单个资源

http://127.0.0.1:3002/posts/1

删除数据

删除 id 为 2 的 posts 数据，需要以 delete 请求以下接口

http://localhost:3002/posts/2

添加数据

发送 post 请求以下接口，完成数据添加

http://localhost:3002/posts

更新数据

put 请求以下接口，完成数据的更新

http://localhost:3002/posts