# json-server

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

xj-small

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