json-server模拟后端接口

最近在看react视频，听视频里老师讲了json-server的使用，感觉挺不错的。

json-server的作用 ：
在后台还没给接口之前，使用JSON-Server搭建一台JSON服务器，将接口要返回的数据放在json文件里面。然后请求这些数据，这样我们可以先做一些东西，等后台接口好了之后直接替换就可以了，不必一直傻傻的等后端的接口。

使用步骤：

1. 首先 我们需要安装他的依赖，全局安装 json-serrver，执行命令

cnpm install  -g  json-server 

如果之前装了就不用再重复安装了。
2. 第二步是在我们的项目根目录下建一个mock的文件夹，用了存放json数据，切换到 mock文件夹下。
3. 新建data.json文件，在里面存放自己前端需要访问的数据。
然后使用cmd命令行 ，运行

json-server data.json --port 4000

data.json 是新建json文件的名字， --port 4000也可以不加，他的作用是更改端口为4000，默认是3000 ，防止他与 webstorm启动的前端项目 端口冲突，建议加上。
4. 执行成功会返回这样的显示
如果启动失败一定要检查是不是在mock目录下运行的命令，如果是在项路径下，先 cd mock 进入mock目录下再运行
5. 这样我们就可以去通过请求访问我们的数据了，可以在浏览器上访问了
http://localhost:4000/arr
这样就访问到了我们写的json文件的数据，还需要注意的是在前端使用axios去请求的时候数据是存在返回值的data属性里，因此应该这样处理
返回值的的data属性才是我们需要的数据

6. 常见的增删改查: get 查 , post 增, delete 删, patch 修改部分数据, put 全部数据替换

 axios({
    method:"get",
    url:"localhost:4000/arr"
}).then((data)=>{console.log(data.data)})
axios({
　  method:"post",
　　url:"http://localhost:4000/arrr",
　　data:{ id:"4",name:"小刚",sex:"male"}
})
axios({
　　method:"patch",
　　url:"http://localhost:4000/arr/1",
　　data:{name:"xxx"}
})

7. 其中常用的url的形式有：
   　　全部数据: localhost:3000/arr　
   　　指定id: localhost:3000/arr/1
   　　指定条件: localhost:3000/arr?name=李四&name=张三　　
   　　模糊查询: localhost:3000/list?q=张