vue 使用mock模拟get和post请求

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

        使用方法如下：

1、安装mockjs

npm install mockjs

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

 

3、在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) {undefined
    let $name=JSON.parse(option.body).name;
    if($name){undefined
        return Mock.mock({undefined
            status: 200,
            message: '提交成功！！！'
        })
    }else{undefined
        return Mock.mock({undefined
            status: 400,
            message: '未提交参数'
        })
    }
})*/

在userInfo.json中写如下代码，记着这个是.json格式的不是js格式的

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

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

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