json-server的使用以及axios的发起的ajax请求

作为一个前端工程师,在后端没有数据接口的时候，本身又不喜欢用静态数据 那么 json-server就是必备的一个技能

json-server是第三方 插件包    要想使用首先得安装

1.可以使用npm 也可以使用yarn安装   : 

npm  install -g json-server        //建议全局安装 下次使用就不用再次安装

2.安装完之后书写一个data.json文件

3.书写完之后,就可以启动了

json-server  data.json     //默认监听端口 3000

也可以修改端口  json-server -p 8080 data.json  下面就是json-server得帮助命令 以及简写方式

json-server服务器搭建好了之后,我们就可以用axios进行ajax请求了    json-server支持ajax跨域请求

使用在vue中使用 axios 首先我们也得先安装 才可以

1.npm install axios

2.本地测试使用Vue脚手架测试 

   import axios from "axios"

3.使用原型对象注册axios

Vue.prototype.axios=axios

4.在组件得created钩子函数中调用

this.axios({method:"get",url:"http://127.0.0.1:3000/data"}).then(res=>{console.log(res.data)}).catch(err=>{console.log(err)});

也可以使用axios得默认get方法请求  可以携带参数

this.axios.get("http://localhost:3000/data;",{params:{id:1}}).then(res=>{console.log(res.data)})

在整个按钮发送ajax请求在控制台就可以看到从json-server中获取的数据了