1、简介

前端在开发前后端分离项目中，往往后端接口没有那么快提供，此时前端同学就需要根据后端提供的接口文档来模拟接口的json数据，此时就可以利用json-server搭建一个本地的数据接口。

json-erver 是一个 Node 模块，运行 Express 服务器，在前端开启的本地服务，提供json数据。

包地址：https://www.npmjs.com/package/json-server。

2、安装

创建文件夹json-server-demo(不要使用json-server)，初始化package,json文件：

npm init --yes

安装json-server

npm i json-server --save

打开package,json，修改scripts内容：

"dev": "json-server --watch db.json"

3、创建db.json

在根目录json-server-demo下db.json

加入测试内容：

{
  "users": [
    {
      "id": 1,
      "name": "jason",
      "phone": "17700991122",
      "age": "31"
    },
    {
      "id": 2,
      "name": "river",
      "phone": "15600225566",
      "age": "28"
    },
    {
      "id": 3,
      "name": "lucy",
      "phone": "13155889966",
      "age": "29"
    },
    {
      "id": "4",
      "name": "grance",
      "phome": "13355669988",
      "age": "22"
    }
  ]
}

4、开启json-server

npm run dev

如上图服务启动成功！

浏览器输入：http://localhost:3000，访问到当前服务首页：

浏览器输入：http://localhost:3000/db，访问所有json数据：

浏览器输入：http://localhost:3000/users，访问users数据：

5、数据查询

5.1 按id过滤

http://localhost:3000/users/1

5.2 分页查询

http://localhost:3000/users?_page=1&_limit=2

5.3 模糊查询

http://localhost:3000/users?q=ja

6、新增数据-POST

使用postman请求接口：http://localhost:3000/users

请求头：Content-Type：application/json

请求方式：POST

body选择raw，JSON格式。

请求数据如下：

{
  "id": 4,
  "name": "Lucy",
  "phone": "18977882233",
  "age": "22"
}

如图，发送请求添加成功，此时再访问http://localhost:3000/users，会多一条刚才新增的数据。

7、修改数据-PUT、PATCH

请求接口：http://localhost:3000/users/4

请求头：Content-Type：application/json

请求方式：POST

body选择raw，JSON格式。

请求数据如下：

{
  "id": 4,
  "name": "Lily",
  "phone": "18977880000",
  "age": "25"
}

put可以将数据改为指定json数据，如果只更改单个字段值，可以使用patch。

如果指向更改age，将请求方式改为patch，请求数据：

{
  "age": "25"
}

8、删除数据-DELETE

请求接口：http://localhost:3000/users/4

请求方式：DELETE

即可删除id=4的json数据

9、总结

利用json-server搭建的本地数据接口接口满足前端开发时所需数据，以上示例即可满足大多数场景，若干想要造更多的数据，可以结合mockjs一起使用。

以上代码可托管在gitee：https://gitee.com/river106/json-server-demo

原文链接：利用json-server搭建本地数据接口 - river's blog