Vue中使用Mock模拟get和post请求

Mock模拟post请求

很多时候，前端的开发需要配合后端接口数据，但是后端开发未完成的时候，前端不能苦等，可以先用mock来进行数据模拟和调试。

使用方法如下：

1、安装mockjs

npm install mockjs

2、在vue项目中mock创建文件夹

创建mock文件夹之后.还需要创建json文件.作为pots请求数据源

3、在index.js中写如下代码

一般情况是在src文件夹下创建api文件夹,用来管理整个项目的接口数据,然后我们需要接着在api文件夹下创建index.js,作为入口请求文件

const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；  下面的userInfo是指mock目录下的json目录下的userInfo.json文件
Mock.mock('/user/userInfo', 'get', require('./json/userInfo.json'));
Mock.mock('/api/addgoods', 'post', require('./json/userInfo.json'));

// 下边这个模拟post请求也行
/*Mock.mock('/api/addgoods', 'post', function (option) {
    let $name=JSON.parse(option.body).name;
    if($name){
        return Mock.mock({
            status: 200,
            message: '提交成功！！！'
        })
    }else{
        return Mock.mock({
            status: 400,
            message: '未提交参数'
        })
    }
})*/

在userInfo.json中写如下代码，记着这个是.json格式的不是js格式的，注意json格式一定要标准!

{
  "result": "success",
  "data": {
    "userSn": "3785521",
    "username": "不求甚解",
    "age": 25,
    "imgUrl": "https://avatar.csdn.net/8/5/D/3_bocongbo.jpg"
  },
  "msg": ""
}

4、调用接口

在需要获取接口数据的地方（组件，方法等里面），如下调用，就可以使用mock自定义的json数据了：

      axios.post("/api/addgoods",
        {
           name: "张三",
           age: "14"
        }
        ).then((res) => {
          console.log("res1111" + res.data.data.age)
        })