Mock 模拟数据

前后端并行开发，为了方便后端快速开发，不需要等待后端接口，系统提供了mock功能。基于mockjs

编写模拟数据

在/src/mock目录下进行mock数据编写，比如：

  1. import {getUsersByPageSize} from './mockdata/user';
  3. export default {
  4.     'post /mock/login': (config) => {
  5.         const {
  6.             userName,
  7.             password,
  8.         } = JSON.parse(config.data);
  9.         return new Promise((resolve, reject) => {
  10.             if (userName !== 'test' || password !== '111') {
  11.                 setTimeout(() => {
  12.                     reject({
  13.                         code: 1001,
  14.                         message: '用户名或密码错误',
  15.                     });
  16.                 }, 1000);
  17.             } else {
  18.                 setTimeout(() => {
  19.                     resolve([200, {
  20.                         id: '1234567890abcde',
  21.                         name: 'MOCK 用户',
  22.                         loginName: 'MOCK 登录名',
  23.                     }]);
  24.                 }, 1000);
  25.             }
  26.         });
  27.     },
  28.     'post /mock/logout': {},
  30.     'get /mock/user-center': (config) => {
  31.         const {
  32.             pageSize,
  33.             pageNum,
  34.         } = config.params;
  37.         return new Promise((resolve) => {
  38.             setTimeout(() => {
  39.                 resolve([200, {
  40.                     pageNum,
  41.                     pageSize,
  42.                     total: 888,
  43.                     list: getUsersByPageSize(pageSize),
  44.                 }]);
  45.             }, 1000);
  46.         });
  47.     },
  48.     'get re:/mock/user-center/.+': {id: 1, name: '熊大', age: 22, job: '前端'},
  49.     'post /mock/user-center': true,
  50.     'put /mock/user-center': true,
  51.     'delete re:/mock/user-center/.+': 'id',
  52. }

简化

为了方便mock接口编写，系统提供了简化脚本(/src/mock/simplify.js)，上面的例子就是简化写法

对象的key由 method url delay，各部分组成，以空格隔开

字段说明
method请求方法 get post等
url请求的url
delay模拟延迟，毫秒 默认1000

调用

系统封装的ajax可以通过以下两种方式，自动区分是mock数据，还是真实后端数据，无需其他配置

mock请求：

  • url以/mock/开头的请求
  • /src/mock/url-config.js中配置的请求
  1. this.props.ajax.get('/mock/users').then(...);

如果后端真实接口准备好之后，去掉url中的/mock即可

注：mock功能只有开发模式下启用了，生产模式不会开启mock功能