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
    21
    {
    	"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 文件已经被修改了
其他的操作也大同小异。

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