数据模拟

在 Umi.js 中使用模拟数据（Mock Data）是一个非常方便的功能，尤其在开发初期或前后端分离的情况下。通过模拟数据，前端开发者可以在没有后端 API 的情况下进行界面和交互逻辑的开发。Umi.js 内置了对 Mock 数据的支持，使得配置和使用都非常简单。

使用 Mock 数据的方法

方法 1：直接在 .umirc.js 或 config/config.js 文件中配置

这是最常见的方式，适用于简单的模拟数据需求。你可以在项目的配置文件中添加 mock 配置项来定义模拟规则。

示例：基本 Mock 配置

// .umirc.js 或 config/config.js
export default {
  mock: {
    // 模拟 GET /api/users 请求
    "GET /api/users": [
      { id: 1, name: "John Doe", age: 28 },
      { id: 2, name: "Jane Smith", age: 34 },
    ],

    // 模拟 POST /api/user 请求
    "POST /api/user": (req, res) => {
      const body = req.body;
      res.send({
        success: true,
        message: "User created successfully",
        data: { id: Date.now(), ...body },
      });
    },
  },
};

解释：

• 请求方法和路径：例如 'GET /api/users' 表示模拟一个 GET 请求到 /api/users。
• 返回的数据：可以直接返回静态数据，也可以是动态生成的数据（如上例中的 POST 请求）。
• 函数形式：对于更复杂的场景，你可以提供一个函数来处理请求，并根据请求参数动态生成响应。

方法 2：使用独立的 Mock 文件

如果你有较多的模拟数据规则，或者希望将 Mock 规则与应用配置分离，可以创建独立的 Mock 文件夹，并在其中定义模拟规则。

创建 Mock 文件夹和文件

首先，在项目根目录下创建一个 mock 文件夹，并在其中创建一个 JavaScript 文件（例如 user.js）来定义模拟规则：

// mock/user.js
export default {
  "GET /api/users": [
    { id: 1, name: "John Doe", age: 28 },
    { id: 2, name: "Jane Smith", age: 34 },
  ],

  "POST /api/user": (req, res) => {
    const body = req.body;
    res.send({
      success: true,
      message: "User created successfully",
      data: { id: Date.now(), ...body },
    });
  },
};

修改配置文件以加载 Mock 文件

然后修改 .umirc.js 或 config/config.js 文件，使其能够加载这些 Mock 文件：

// .umirc.js 或 config/config.js
import userMock from "./mock/user";

export default {
  mock: {
    ...(process.env.NODE_ENV === "development" && userMock),
  },
};

这种方法不仅使代码更加模块化，还便于管理和维护大量的 Mock 规则。

方法 3：使用 umi-plugin-mock 插件

虽然 Umi.js 已经内置了对 Mock 数据的支持，但如果你需要更多高级功能或灵活性，可以考虑使用 umi-plugin-mock 插件。

安装插件

首先安装插件：

npm install umi-plugin-mock --save-dev

修改配置文件

然后在配置文件中启用插件，并定义模拟规则：

// .umirc.js 或 config/config.js
import mock from "umi-plugin-mock";

export default {
  plugins: [mock()],
  mock: {
    "GET /api/users": [
      { id: 1, name: "John Doe", age: 28 },
      { id: 2, name: "Jane Smith", age: 34 },
    ],
    "POST /api/user": (req, res) => {
      const body = req.body;
      res.send({
        success: true,
        message: "User created successfully",
        data: { id: Date.now(), ...body },
      });
    },
  },
};

注意事项

• 仅限开发环境：Mock 数据配置只在开发环境中有效，生产构建时会被忽略。因此，请确保你的生产环境中有真实的 API 接口。

• 调试信息：为了更好地调试 Mock 请求，可以在启动应用时添加 -p 参数以显示详细的 Mock 日志。

  npm run start -p

• 与代理结合使用：如果你同时使用代理和 Mock 数据，注意它们的优先级。通常来说，Mock 规则会优先于代理规则生效。如果需要更复杂的路由匹配逻辑，可以通过调整 proxy 和 mock 的顺序或条件来实现。

总结

通过上述方法，你可以在 Umi.js 项目中轻松配置和使用 Mock 数据，从而在没有真实 API 的情况下快速迭代前端开发。选择适合你项目需求的配置方式，并根据实际情况调整 Mock 规则，可以显著提高开发效率并简化测试过程。