Mock.js在实际项目中的使用

在项目开发中，往往会有一些问题出现，比如前后端项目，后台在没有写写好接口的情况下我们是不是只能写单纯的页面呢？？？答案是否定的，由此引申出了mock.js模拟后台数据，而且还不需要切换url地址，就能进行axios的请求发送。

1.安装依赖包

cnpm install mock.js --save

2.项目中创建模拟的请求地址

const Mock = require('mockjs'); //引入mockjs
Mock.setup({    // 模拟接口响应时长200-600毫秒
  timeout: '200-600'
})
Mock.mock('/api/getEcharts/card', () => {
  return {
    code: 1,
    msg: '获取所有首页tab的卡片数据',
    data: [
      {
        text: '使用量',
        value: 131
      },
      {
        text: '下载量',
        value: 382
      },
      {
        text: '围观量',
        value: 89
      },
      {
        text: '推广量',
        value: 225
      }
    ]
  }
})

3. 在main.js中引入mock.js

import '文件具体所在的路径';      //此部分引入的是我们所编写的mockjs文档

4.xxx.vue文件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data了。

QueryCardList(){
     //地址可根据自己的实际需要在项目中判断环境使用
      var url = "/api/getEcharts/card";
      this.$axios.get(url)
        .then(response => {
          
        })
        .catch(error => {
          
        })
    }

5.关于mock.js的语法以及使用，具体参考mokc.js官网

Mock.js官网