做前端的,有时候后台没有数据,但是呢我们有不可避免的使用虚拟的数据(mock数据)。我们并不想使用简单的静态数据,而是希望自己起一个本地的 mock-server 来完成模拟请求以及响应请求的过程。json-server 是可以替代我们完成这一工作的工具。我们只需要自己写一个 json 文件,或者写几行简单的 js 脚本就可以模拟出 API 接口。
安装 json-server
这个在你的项目的根目录安装就行了。
npm install -g json-server
检测一下安装版本:json-server -v
创建一个db.json
在你的项目文件夹中创建一个db.json文件
{
"phones":[
{
"id":1,
"name":"华为",
"price":2000
},
{
"id":2,
"name":"小米",
"price":2000
},
{
"id":3,
"name":"OPPO",
"price":2000
}
]
}
启动 json-server
在当前文件夹输入以下命令:
注:后边这个 db.json 就是你 db.json 的文件路径,如果放在其他文件夹中,要把路径写对!
json-server db.json
控制台输出如下,表示启动成功:
输出这些表明我们的 json-server 已经启动成功,我们可以通过浏览器或者其他软件发送请求,获取相应的数据。
容易踩坑的点
在启动 json-server 的时候,我们最好不要简单的启动就行了,我们最好要实时监测 db.json 的变化,就是使用 --watch 命令;如果没有监测的话,即使 db.json 已经发生了改变,重新请求,仍然会返回原先的模拟数据,返回状态码 304 ,认为没有变化。
启动 db.json,并且实时监测 db.json 的变化:json-server --watch db.json
我们可以发送 POST、PUT、PATCH和DELETE请求,相应的结果会自动保存到db.json 文件中。
我们的 request body 是一个 json 对象。
POST、PUT、PATCH请求头中要包含 Content-Type:application/json;
到这里已经可以做简单的模拟数据请求了。