Mock 示例

Mock 示例

ant 工具集

• AntV 在线图表制作利器
• AVA 智能可视化
• ChartCube 图表魔方
• F2 移动可视化方案
• G 可视化渲染引擎
• G2 可视化语法
• G6 图可视化引擎
• G6VP 图可视分析研发与洞察平台
• L7 地理空间数据可视化
• L7Editor 地理空间数据编辑工具
  • https://l7editor.antv.antgroup.com/
• L7VP 地理空间数据可视分析平台
• S2 表可视化分析引擎
• X6 图编辑引擎，基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展

介绍

• ant design pro Mock 示例，提供 GET、POST、cookie 的方法。
• Mock 中可以添加 mock 文件，示例如下

import { Request, Response } from 'express';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

async function getFakeCaptcha(req: Request, res: Response) {
  await waitTime(1000);
  return res.json('captcha-xxx');
}

/**
 * 当前用户的权限，如果为空代表没登录
 * current user access， if is '', user need login
 * 如果是 pro 的预览，默认是有权限的
 */
const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
let access = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? 'admin' : '';

const getAccess = () => {
  return access;
};

// 代码中会兼容本地 service mock 以及部署站点的静态数据
export default {
  'GET  /api/login/captcha': getFakeCaptcha,

  // 支持值为 Object 和 Array
  'GET /api/currentUser': (req: Request, res: Response) => {
    if (!getAccess()) {
      res.status(401).send({
        data: {
          isLogin: false,
        },
        errorCode: '401',
        errorMessage: '请先登录！',
        success: true,
      });
      return;
    }
    res.send({
      success: true,
      data: {
        name: 'Serati Ma',
        avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
        userid: '00000001',
        email: 'antdesign@alipay.com',
      },
    });
  },
  // GET POST 可省略
  'GET /api/users': [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
  ],
  'POST /api/login/account': async (req: Request, res: Response) => {
    // res.cookie('cw_token', 'mock_token', {
    //   maxAge: 900,
    //   expires: new Date(Date.now() + 900),
    //   path: '/',
    //   domain: '.xiexianbin.cn',
    // });
    // res.cookie('cw_token', 'mock_token');

    const { password, username, type } = req.body;
    await waitTime(1000);
    if (password === 'ant.design' && username === 'admin') {
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'admin',
      });
      access = 'admin';
      return;
    }
    if (password === 'ant.design' && username === 'user') {
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'user',
      });
      access = 'user';
      return;
    }
    if (type === 'mobile') {
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'admin',
      });
      access = 'admin';
      return;
    }

    res.send({
      status: 'error',
      type,
      currentAuthority: 'guest',
    });
    access = 'guest';
  },
  'POST /api/login/outLogin': (req: Request, res: Response) => {
    access = '';
    res.send({ data: {}, success: true });
  },
  'POST /api/register': (req: Request, res: Response) => {
    res.send({ status: 'ok', currentAuthority: 'user', success: true });
  },
  'GET /api/500': (req: Request, res: Response) => {
    res.status(500).send({
      timestamp: 1513932555104,
      status: 500,
      error: 'error',
      message: 'error',
      path: '/base/category/list',
    });
    // res.status(404).send({
    //   timestamp: 1513932643431,
    //   status: 404,
    //   error: 'Not Found',
    //   message: 'No message available',
    //   path: '/base/category/list/2121212',
    // });
    // res.status(403).send({
    //   timestamp: 1513932555104,
    //   status: 403,
    //   error: 'Forbidden',
    //   message: 'Forbidden',
    //   path: '/base/category/list',
    // });
    // res.status(401).send({
    //   timestamp: 1513932555104,
    //   status: 401,
    //   error: 'Unauthorized',
    //   message: 'Unauthorized',
    //   path: '/base/category/list',
    // });
  },
};
source repo / download raw

通过 MOCK 判断什么命令会启用 Mock，参考 package.json 中配置

    "start": "cross-env UMI_ENV=dev umi dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",