vue使用Mock模拟接口

1.安装插件

npm install mockjs --save-dev

2.在main.js平级目录下创建mock.js

const Mock=require('mockjs');
//获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const allTitle=[
    "关于深化增值税改革有关政策的公告",'关于深化增值税改革有关事项的公告','关于调整增值税纳税申报有关事项的公告','关于实施小微企业普惠性税收减免政策的通知','这是测试数据','555555','99999'
]
const allKey=[
    "政策",'增值税','税纳','税收减免','这是测试数据','555555','测试'
]
const produceNewDate=function(){
    let articles=[];
    for(let i=0;i<7;i++){
        let newArticleObje={
            lawEffectId: 53,
            lawNo: "财政部 税务总局 海关总署公告",
            oldDocId: null,
            provinceId: 732,
            publishDate: "2019-03-20",
            readid: 1912,
            reviseDate: null,
            taxId: "35",
            title: allTitle[i],
            topFlag: "1",
            topOrder: 1,
            userId: 2152,
            viewCount: 141,
        }
        articles.push(newArticleObject);
    }
    return{
        articles:articles
    }
}

const keysData=function(){
    let articles=[];
    for(let i=0;i<7;i++){
        articles.push(allKey[i]);
    }
    return{
        articles:articles
    }
}
// 需要几个接口就定义几个function,
//Mock.mock(url(接口地址),method(接口方式),上面定义的数据);
Mock.mock('/searchKey','post',keysData)
Mock.mock('/search','post',produceNewDate);

3.在main.js中引入

require('./mock.js');

4.在需要使用的组件中使用

axios.post('/search',params).then(
                res=>{
                    if(res.status == 200){
                        if(res.data.articles.length){
                            this.listData=res.data.articles;
                        }
                    }
                }
            ).catch(err=>this.$message.error(res.statusText));