Ant Design Pro V5 使用指南之数据装载和数据模拟篇

2023-10-28 04:10:57

数据装载

数据装载模块可以帮助你轻松加载和管理应用程序所需的数据。它提供了多种数据源支持，包括本地数据、远程数据和模拟数据。你可以通过在 src/data 目录下创建相应的配置文件来配置数据源。

1. 本地数据

本地数据是指存储在本地文件系统中的数据。你可以通过在 src/data 目录下创建 .json 文件来定义本地数据。例如，你可以创建一个名为 user.json 的文件，其中包含以下内容：

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

然后，你就可以在应用程序中使用 useRequest 钩子函数来加载本地数据。例如：

import { useRequest } from 'umi';

const User = () => {
  const { data } = useRequest('/api/user');

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
};

export default User;

2. 远程数据

远程数据是指存储在远程服务器上的数据。你可以通过在 src/data 目录下创建 .js 文件来定义远程数据源。例如，你可以创建一个名为 user.js 的文件，其中包含以下内容：

export default {
  request: {
    url: '/api/user',
    method: 'get',
  },
};

然后，你就可以在应用程序中使用 useRequest 钩子函数来加载远程数据。例如：

import { useRequest } from 'umi';

const User = () => {
  const { data } = useRequest('/api/user');

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
};

export default User;

3. 模拟数据

模拟数据是指在本地生成的数据，用于在开发和测试阶段模拟真实数据。你可以通过在 src/data 目录下创建 .mock 文件来定义模拟数据源。例如，你可以创建一个名为 user.mock.js 的文件，其中包含以下内容：

export default {
  'GET /api/user': {
    name: 'John Doe',
    age: 30,
    city: 'New York',
  },
};

然后，你就可以在应用程序中使用 useRequest 钩子函数来加载模拟数据。例如：

import { useRequest } from 'umi';

const User = () => {
  const { data } = useRequest('/api/user');

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
};

export default User;

数据模拟

数据模拟模块可以帮助你轻松生成模拟数据。它提供了一系列内置的数据模拟器，包括用户数据、商品数据、订单数据等。你还可以自定义数据模拟器，以满足你的具体需求。

1. 内置数据模拟器

Ant Design Pro V5 提供了一系列内置的数据模拟器，你可以通过在 src/mock 目录下创建相应的配置文件来使用它们。例如，你可以创建一个名为 user.js 的文件，其中包含以下内容：

export default {
  'GET /api/user': {
    name: 'John Doe',
    age: 30,
    city: 'New York',
  },
};

然后，你就可以在应用程序中使用 useRequest 钩子函数来加载模拟数据。例如：

import { useRequest } from 'umi';

const User = () => {
  const { data } = useRequest('/api/user');

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
};

export default User;

2. 自定义数据模拟器

你还可以自定义数据模拟器，以满足你的具体需求。例如，你可以创建一个名为 user.js 的文件，其中包含以下内容：

export default {
  'GET /api/user': (req, res) => {
    const { name, age, city } = req.query;

    res.json({
      name,
      age,
      city,
    });
  },
};

然后，你就可以在应用程序中使用 useRequest 钩子函数来加载自定义模拟数据。例如：

import { useRequest } from 'umi';

const User = () => {
  const { data } = useRequest('/api/user', {
    params: {
      name: 'John Doe',
      age: 30,
      city: 'New York',
    },
  });

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
};

export default User;