作者原文
1、关于什么是json-server?
1、json-server 是一个属于npm管理的一个包,它是可以为前端提供mock的功能的,所以安装需要用npm进行全局安装。
2、json-server很好的结合了mock + express,也是非常的方便的。
2、安装命令
npm install -g json-server 或者 yarn global add json-server
- 在电脑中打开cmd输入以上命令:
![image.png](https://i-blog.csdnimg.cn/blog_migrate/da15daa77a80c966154d4ec6a3317e00.png)
- 当上面的包安装完成后,会提供一个json-server的全局命令,基于这个命令就可以mock数据了
- 安装完后,去新建一个json-server文件夹,在文件夹里面创建一个XXX.json文件,我这里新建一个user_info.json。
- 注意json文件格式必须要严格按照json的形式写。如下所示
{
"user":[
{
"id":"1",
"username":"程序中的一个迷途小书童",
"title":"幸福,大概就是你喜欢粘着的那个人",
"info":"当一切都安静下来的时候,你是否还在努力的敲代码......",
"ID":"qq_43843173"
},
{
"id":"2",
"username":"程序中的一个迷途小书童",
"title":"幸福,大概就是你喜欢粘着的那个人",
"info":"当一切都安静下来的时候,你还在努力的敲代码吗......",
"ID":"qq_43849527"
},
{
"id":"3",
"username":"程序中的一个迷途小书童",
"title":"幸福,大概就是你喜欢粘着的那个人",
"info":"当一切都安静下来的时候,你是否还在努力的敲代码......",
"ID":"qq_4384hih3"
}
]
}
json-server --watch user_info.json(文件名)
- 结果如下:
![image.png](https://i-blog.csdnimg.cn/blog_migrate/e298222d17ce32ea589f14eb9ed92042.png)
-哟嚯,不好意思,报错了额,接下来配置一下环境变量把,小作的电脑找到的是这个路径下:C:\Users\acer\AppData\Local\Yarn\bin,直接找到bin目录下,复制路径。
– 步骤1:
![huan.png](https://i-blog.csdnimg.cn/blog_migrate/cb6b02b1a1c170f9d6061ff0a49b788d.png)
–步骤2:
![huan1.png](https://i-blog.csdnimg.cn/blog_migrate/7661242fed3972990d516da12ab566be.png)
–步骤3:
![huan2.png](https://i-blog.csdnimg.cn/blog_migrate/1f581dc040a6e84fb1d1637f744a9bfa.png)
- 好了,点击确定好,重新启用cmd 输入命令:json-server --watch user_info.json 就可以看到如图所示啦:
![image.png](https://i-blog.csdnimg.cn/blog_migrate/7d7365c15272e43acaad94ba7c136c28.png)
- 最后,在浏览器地址栏上输入:Resource这个地址就可以访问自己定义的api数据接口啦。嘻嘻,如图:
![image.png](https://i-blog.csdnimg.cn/blog_migrate/9a9b0b9fdf109133d942b6694e5808b1.png)
- json-server 里面提供了很多的功能,但是要使用json-server的标准哦。