Aoviz

Data Mocking

提供了开箱即用的 Mock 数据功能，能够让前端独立自主开发，不被后端接口阻塞。

Install

yarn add @aoviz/mock

Enable Mock

Webpack Config

import { createWebpackMock } from '@aoviz/mock'

const withMock = createWebpackMock()

module.exports = withMock({
  //... webpack config
})

Vite Config

import { defineConfig } from 'vite'
import { createViteMock } from '@aoviz/mock'

const withMock = createViteMock()

export default withMock(defineConfig({
  //... vite config
}))

Bixi Config

import { defineConfig } from '@bixi-design/builder';
import { createBixiMock } from '@aoviz/mock'

const withMock = createBixiMock()

export default withMock(defineConfig({
  //... bixi config
}))

Directory

约定 .mock 目录下面的文件为 Mock 文件。目录结构示例如下：

.
├── .mock
    ├── czt.ts
    ├── ocr.ts
    └── idps.ts
└── src
    └── pages
        └── index.tsx

Writing Mock Files

Mock 文件默认导出一个对象，对象的 key 为 http 请求的 method 和 path 的组合，method 如果省略默认为 get 请求，value 值为响应的结果。

export default {
  'GET /api/getInfo': { data: [1, 2, 3, 4] },

  '/api/getUserInfo': { id: 1 },

  'POST /api/addInfo': (req: http.IncomingMessage, res: http.ServerResponse, next: Function) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('200');
  },
};

Response Random Data

使用 Mock.js 生成随机数据，Mock.js 的语法请参考 Mock.js 文档。

import mockjs from 'mockjs';
export default {
  '/api/getInfo': Mock.mock({
    'data|1-10': [{ name: '@cname' }],
  }) /* => {data: [{name: "Jack"}, {name: "Jim"},  {name: "Mary"}} */,
};

Delayed Response

通过 settimeout 实现单个接口延迟响应。

export default {
  'GET /api/getInfo': (req: http.IncomingMessage, res: http.ServerResponse, next: Function) => {
    setTimeout(() => {
      res.end('200');
    }, 1000);
  },
};

Interface

createWebpackMock、createViteMock、createBixiMock 函数接受一个可选的参数，作为创建时的配置项。

interface MockOptions {
  include: string[];
  exclude: string[];
  relativePath: string;
  production?: boolean;
}
  • include: 用于额外添加 .mock 目录之外的 Mock 文件，支持 glob 语法，例如：['**/*.ts']。
  • exclude: 用于排除不需要的 mock 文件。
  • relativePath: 用于指定路径匹配是否允许相对路径模式，如定义 /api/getInfo 访问 /im/api/getInfo 将指向相同的资源。
  • production: 设置为 true 时，build 之后线上环境也支持 Mock，通过 XHR 请求拦截实现。