Vue中如何使用mock

自从有了mockjs，我们前端工程师再也不用等后端人员开发好之后再测数据了，因为mockjs可以拦截ajax请求，有了mockjs我们可以模拟后台返回数据，以方便的进行一系列的操作。接下来就介绍一下在项目中如何使用mockjs。

1、首先安装mock.js

npm install mockjs

2、在我们的vue项目中创建一个mock 的目录

3、在mock的文件夹下创建index.js文件，这里就是我们注册所有mock服务的地方,index.js的内容如下:

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

4、服务注册好之后，在main.js中引入

import mock from "../mock/index";
Vue.use(mock)

5、在mock文件夹下随便创建一个文件jobList.js
在该文件中，我们可以按照index注册服务的格式来写我们的mock

let jobList = [{
  id: 1,
  professionId: '230000',
  job: '教师'
},{
  id: 2,
  professionId: '240000',
  job: '医生'
},{
  id: 3,
  professionId: '250000',
  job: '公务员'
}]


export default {
  'get|/api/parameter/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: jobList
    };
  },
  }

6、当我们在页面发起了ajax请求，路径是’/parameter/query’，并且请求方式是get时，就会返回我们写好的mock数据。

//mock数据
export function mocktest(params) {
  return $http({type: "get",url: "/parameter/query",data: params});
}

methods: {
        //mock测试数据
        mocktest(val) {
          this.loading = true;
          this.titleData = '职业'
          this.dropType = val
          //禁止软键盘弹出
          document.activeElement.blur();
        
          api.mocktest(val).then(res => {
            this.loading = false;
            this.jobData = []
            this.genderData1 = []

            res.data.data.forEach( val => {
              this.jobData.push(val.job);
            })
            console.log(this.jobData);
            this.genderPop = true;
          }).catch((err) => {
            console.log(err)
          })
        },
        }

以上，就是我们在vue项目中如何使用mock,如有什么问题,或者需要源码请关注下方公众号索取: