Vue Mockjs 模拟接口数据 前后端分离

前后端分离的开发模式下，在设计阶段一般会先设计好接口，这样前后端根据接口来各自进行开发，都开发完成后对接就可以了。
如果不使用mock和前后端开发的分离，前端人员往往需要等待后端接口开发完成，才能够对接显示出调用接口之后页面的样子，但是前端人员的开发速度往往是大于后端开发速度的，所以前端开发人员可以使用mockjs来模拟后端接口，根据接口规则自己模拟数据，等到后端接口完成有真实数据的时候也不用修改代码，大大方便的前端项目的开发与测试！
（正式环境去注释掉mockjs的引用）

vue项目引入mockjs

• 可以在命令行通过命令cnpm install mockjs --save-dev来引入mockjs
• 也可以通过在package.json里面的devDependencies加上"mockjs":"^1.0.1-beta3",然后再安装

npm install XXX --save-dev 命令是将模块安装在开发环境和测试环境来使用的意思
package.json中有dependencies属性，里面保存的是生产环境要用到的包
devDependencies属性表示开发和测试环境要用到的包
–save-dev安装的包就会出现在devDependencies中

创建mock文件夹 新建mock.js模拟接口

模拟的接口当然要现在axios的api文件里面配置成post请求接口

export const productPage = params => { return axios.post(`${base}/cs/product/page`, params); };

然后在mock.js文件中写入代码

//引入mockjs
const Mock = require('mockjs');
//引入mock的Random对象
const Random = Mock.Random;
//mock一组数据
const productData = function () {
    let productList = [];
    for (let i = 0; i < 5; i++) {
        let product = {
            id: i,
            name: Random.cname(),
            date: Random.date()
        };
        productList.push(product);
    }
    return {
        returnFlag: 0,
        result: {
            records: productList,
            total: productList.length
        }
    };
};
//设置mock
Mock.mock('/customer/cs/product/page', 'post', productData);

引用mock接口

在main.js中插入如下代码进行引用

require ('./mock/mock')

然后在页面上用正常使用axios的方法就行了

productPage({param}).then((res) => {
                console.log(res);
            });

打印res就可以在控制台上看到数据了！如果换做正式数据 只需要注释掉mock.js中的Mock.mock就可以了