使用mockjs——0808

mockjs官方文档

一、使用mockjs

1、安装mockjs

cnpm install --save-dev mockjs

2、在src根目录下新建 mock.js 文件，内容如下：

//引入
import MockData, { Random } from 'mockjs';

//可以设置超时时间  可选
MockData.setup({
    timeout: 1000
});

const url = "http://www.maodou.com";

//拦截ajax后，返回固定的数据
MockData.mock(url + "/data", {
    result: [
        {
            name: "张三"
        }
    ]
});
//第二个参数也可以写成回调函数形式，带返回值
MockData.mock(url + "/user", () => {
    return {
        result: [
            {
                name: "张三"
            }
        ]
    }
});

//也可以模拟数据  示例
MockData.mock(url + "/x", {
    "result|1-10": "★"
});

export default MockData;

3、在main.js文件里边全局引入 mock.js文件

//使用，mock
import Mock from './Mock/mock'
Vue.use(Mock);

4、接下来在组件里边发送ajax时，mockjs 就会拦截ajax请求，并返回模拟的数据。

二、mockjs接收ajax请求的参数

组件中的ajax请求代码：

mounted(){
  this.$axios.post("/login",{
    id:"10086",
    pwd:"abx123"
  })
  .then((res)=>{
	console.log(res);
  })
}

mock.js代码

MockData.mock(url+"/login","post",(opt)=>{
    let str=JSON.parse(opt.body);
    let id=str.id;
    let pwd=str.pwd;
    if(id=="10086"&&pwd=="abc123")
    {
        return "success"
    }
    else{
        return "error";
    }
});

上边提到mock()方法 的第三个参数可以写成回调函数的形式，该回调函数接收一个opt参数，前端ajax传过来的数据就在opt.body上，可以在回调函数中对数据进行检测，满足条件，返回相应的结果。

如果是get请求，同样可以在mock()方法中获取前端ajax传过来的数据