antd pro v4 mock查询

Ant Design Pro v4 是一个基于 Ant Design 设计语言的企业级中后台前端/设计解决方案，其中包含了一些用于数据模拟的 mock 功能。在 Pro v4 中，mock 数据是通过 umi-request 库来实现的。

要在 Ant Design Pro v4 中使用 mock 功能，你可以按照以下步骤进行操作：

1. 在 `src` 目录下创建一个名为 `mock` 的文件夹。
2. 在 `mock` 文件夹中创建一个名为 `api.ts` 的文件，用于编写接口的 mock 数据。
3. 在 `api.ts` 文件中，你可以使用 umi-request 提供的 `extend` 方法来创建一个请求实例，并通过 `mock` 方法来定义接口的 mock 数据。例如：

import { extend } from 'umi-request';

const request = extend({
  prefix: '/api',
  timeout: 1000,
});

export default {
  'GET /api/user': {
    id: 1,
    name: 'John Doe',
  },
  'POST /api/login': (req, res) => {
    const { username, password } = req.body;
    if (username === 'admin' && password === '123456') {
      res.send({
        status: 'ok',
        message: 'Login successful!',
      });
    } else {
      res.send({
        status: 'error',
        message: 'Invalid username or password!',
      });
    }
  },
  'PUT /api/user/:id': (req, res) => {
    const { id } = req.params;
    const { name } = req.body;
    res.send({
      id,
      name,
    });
  },
};

在上面的例子中，我们定义了三个接口的 mock 数据：`GET /api/user`、`POST /api/login` 和 `PUT /api/user/:id`。

4. 在 `src` 目录下的 `models` 文件夹中创建一个名为 `mock.ts` 的文件，并在该文件中导入 `api.ts` 中定义的 mock 数据。例如：

import api from '@/mock/api';

const enableMock = true; // 是否开启 mock 功能

if (enableMock) {
  Object.keys(api).forEach((key) => {
    const [method, path] = key.split(' ');
    const [mockMethod, mockPath] = method.split('_');
    if (mockMethod && mockPath) {
      umiMocker(mockMethod.toUpperCase(), mockPath, api[key]);
    }
  });
}

在上面的例子中，我们通过遍历 `api.ts` 中定义的 mock 数据，并使用 `umiMocker` 方法来注册 mock 接口。

5. 在 `src/app.tsx` 文件中，将 `import './mock';` 添加到文件开头，以确保 mock 数据在应用启动时被加载。例如：

import './mock';

完成以上步骤后，当你在开发环境下运行 Ant Design Pro v4 时，接口请求将会被拦截并返回 mock 数据。

请注意，以上只是一个简单的示例，你可以根据自己的需求来编写更复杂的 mock 数据。另外，需要注意的是，在生产环境下是不会启用 mock 功能的，mock 数据只会在开发环境中生效。