json-server是什么?

需求来源

在学习后端的时候通常会使用 postman 来模拟前端发送请求,然后再来进行对后端部分逻辑代码进行调节。
但这段时间在学习前端的时候我就在想有没有类似 postman 的工具来模拟后端接收来自前端的请求并返回数据的?
在学习 axios 的时候顺便看到有人使用 json-server 这个插件来实现我上面说的内容,简单来说就是可以模拟后端接收请求并返回一定的数据

项目地址

环境要求

  1. Node.js
  2. npm
  3. vscode

开始

  1. 在终端输入: npm install -g json-server 进行全局安装
  2. 选择一个文件夹并创建 data.json 文件
  3. 文件内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    {
    "stu": {
    "username": "snailuu",
    "email": "88888888@163.com",
    "phone": "18888888888",
    "friends": [{
    "name": "test1",
    "age": 18
    },
    {
    "name": "test2",
    "age": 19
    },
    {
    "name": "test3",
    "age": 18
    }
    ]
    }
    }
  4. 终端进入到该文件夹并输入 json-server --watch data.json

此时在终端可以看到有有输出
json-server-1
出现了两个地址,一个是 json-server 提供的首页地址,另外一个就是我们的发送请求的地址。

data.json内容

关于data.json里面的内容,里面总的是由一个对象构成,里面的 key 就是接口地址, value 就是返回的数据内容
json-server-4

发送请求

这里采用 postman 进行数据的发送
json-server-3

然后也可以对其进行增删查改。

  1. data.json 文件中新增 test 接口
    json-server-5
  2. 请求地址更换成:http://localhost:3000/test
  3. 请求类型更换成:POST

json-server-6

可以看到 data.json 文件已经被修改了
其他的操作也大同小异。

简单接口测试再也不用麻烦后端同学了,赶紧去试试吧