VUE

VUE - Mock模拟请求

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

Mock.js 文档：https://github.com/nuysoft/Mock/wiki/Syntax-Specification

安装mockjs

npm install mockjs

可以使用数据模板生成模拟数据。

Mock.mock( rurl?, rtype?, template ) )
// 或者
Mock.mock( rurl, rtype, function( options ) )

Mock.mock( rurl, rtype, template )
表示当拦截到rurl和rtype的ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

其中：

rurl 可选
表示要拦截的url，可以使字符串，也可以是正则
rtype 可选
表示要拦截的ajax请求方式，如get、post
template 可选
数据模板，可以是对象也可以是字符串
function(option) 可选
表示用于生成响应数据的函数

参数介绍完，就该说说怎么使用了

在我们的项目中，是直接注册所有的mock服务，所以我们只需要按照一定的格式编写mock即可。

具体使用

1. 创建mock模块

在项目根目录下mock文件夹，创建index.js文件，这里就是我们注册所有mock服务的地方

//引用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);
  }
});

2. 在main.js中引入

require('../mock');

3. 在项目中引入 axios

参考：https://www.cnblogs.com/1285026182YUAN/p/12376886.html

4. 在业务页面中调用：

    this.$get("/parameter/query").then((response) => {
      debugger;
    });

    this.$get("/parameter/qqc").then((response) => {
      debugger;
    });

5. 增加 mock 拦截

在 mock 文件夹中 demoList.js 文件

let demoList = {
  status: 200,
  message: 'success',
  data: [{
    id: 1,
    name: 'zs',
    age: '23',
    job: '前端工程师'
  }, {
    id: 2,
    name: 'ww',
    age: '24',
    job: '后端工程师'
  }]
};
let demoList2 = [{
  id: 1,
  name: 'zs',
  age: '23',
  job: '前端工程师'
}, {
  id: 2,
  name: 'ww',
  age: '24',
  job: '后端工程师'
}];
export default {
  'get|/parameter/query': demoList,
  // 也可以这样写
  // 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
  'get|/parameter/query': (option) => {
    // 可以在这个地方对demoList2进行一系列操作，例如增删改
    // option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
    return {
      status: 200,
      message: 'success',
      data: demoList2
    };
  }
}

在 mock 文件夹中 qqc.js 文件

let demoList = {
    status: 200,
    message: 'success',
    data: {
      total: 100,
      'rows|10': [{
        id: '@guid',
        name: '@cname',
        'age|20-30': 23,
        'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
      }]
    }
  };
  export default {
      'get|/parameter/qqc': demoList
  }

这样我们就可以每次随机生成10条数据，总数为100条，其中id和name使用的占位符，age是随机取出20-30中的数字，job是随机取出其后数组中的某一项，这在mock文档里都有说明。

生成数组

跟据参数返回不同结果

function fun_getName() {
  let arr = ['s', 'rr', '7', 'dseeewskc', 'sd', 'sczderer', '44', 'abbbaring', '4', 'bbn', 'sce1123', 'ee'];
  return arr[getIndex()] + arr[getIndex()] + arr[getIndex()];

  function getIndex() {
    return Math.ceil(Math.random() * 10);
  }
}

let demoList = {
  RootNodes: [{
    Id: dd,
    Name: fun_getName(),
    ParentId: '',
    HasChildren: true,
    Children: [],
    Type: 'Asset'
  }]
};

let demoList2 = Mock.mock({
  'RootNodes|10': [{
    'Id|+1': 1,
    Name: '@name',
    ParentId: '',
    HasChildren: true,
    Children: [],
    Type: 'Asset'
  }]
}) 

Mock.mock(//mockk/sencedata/, 'get', (options) => {
  return (JSON.parse(options.body).id == 0 ? demoList : demoList2)
});

传参生成数组

let nodeList = (parentid) => {
  return Mock.mock({
    'list|10': [{
      'Id|+1': 1,
      Name: '@name',
      ParentId: parentid,
      HasChildren: true,
      Children: [],
      Type: 'Asset'
    }]
  })
}

生成随机条数的数组，数组中有（1-10）条数据

let nodeList = (parentid) => {
  return Mock.mock({
    'list|1-10': [{
      'Id|+1': 1,
      Name: '@name',
      ParentId: parentid,
      HasChildren: true,
      Children: [],
      Type: 'Asset'
    }]
  })
}

从数据中随机取数据

      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']

引用：https://www.jianshu.com/p/c5568910e946

代码：https://gitee.com/wuxincaicai/prod-vue/PCommon/page-vue-ls