json-server（快速搭建本地测试接口）

使用 json-server 需要遵守一定的规范。

• 数据查询要使用 GET
• 新增数据要使用 POST
• 删除数据要使用 DELETE
• 修改数据使用 PUT 和 PATCH

一、json-server环境搭建

【第一步】 node 环境安装

Node.js (nodejs.org)

image.png

进入node官网，下载并安装node。

【第二步】 安装json-server

CMD命令打开控制台，输入 npm install -g json-server

npm 指令只有安装node之后哦才可用。

【第三步】 新建json数据库

创建 json-server-demo 文件夹，在 json-server-demo 里创建 db.json 文件。
db.json 文件录入以下数据：

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

【第四步】 启动服务

json-server --watch db.json

输入以上命令可以监听db.json，控制台中的输出内容是：

image.png

Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

Home
http://localhost:3000

以上连接都可以在本地浏览器中打开，如果能打开，则说明json-server已经搭建完成。

二、查询

假设db.json内容如下：

{
  "user": [
    {
      "id": 1,
      "name": "张三",
      "age": 13
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

【1】查询（GET）

json-server 查询只能使用GET请求，可以在postman中演示。

查询全部数据：

image.png

根据id查询数据：

image.png

根据单个条件查询数据：

image.png

根据多个条件查询数据：

image.png

image.png

三、插入

json-server 查询只能使用POST请求，可以在postman中演示。

image.png

插入数据时，id不需要传入，id会自增。

四、删除

json-server 查询只能使用DELETE请求，可以在postman中演示。

根据id删除数据：

image.png

五、覆盖

json-server 查询只能使用PUT请求，可以在postman中演示。

image.png

覆盖后的数据变为：

{
  "user": [
    {
      "name": "老六",
      "age": 16,
      "id": 1
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

覆盖是，传入的json尽量包含所有的字段（除id字段），否则覆盖之后会缺少字段。

假如传入的json数据是：

{
    "name": "老六",
}

那么覆盖后的最终数据变为：

{
  "user": [
    {
      "name": "老六",
      "id": 1
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

id为1的数据字段丢失，这一点尤为注意。

六、更新

更新和覆盖相比更加安全，我们可以只更新某一个字段。
json-server 查询只能使用PATCH请求，可以在postman中演示。

image.png

最终数据是：

{
  "user": [
    {
      "id": 1,
      "name": "老六",
      "age": 13
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

七、如何使用手机浏览器访问

【第一步】保证PC和手机连接同一个wifi
【第二步】ipconfig 查看电脑的ip地址

image.png

拿到IPv4地址。

【第三步】启动json-server

输入指令：

json-server --host x.x.x.x db.json

启动json-server，x.x.x.x是你电脑的ip地址。

image.png

【第四步】打开手机浏览器，输入对应的地址。

参考博客：

『前端必备』本地数据接口 —— json-server 从入门到膨胀 - 掘金 (juejin.cn)

更加详细的讲解，可以在这篇文章查看。

[本章完...]