json-server 的简单使用

做前端的，有时候后台没有数据，但是呢我们有不可避免的使用虚拟的数据(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;

到这里已经可以做简单的模拟数据请求了。