本地 Mock 方案

在前后端分离的开发中，Mock 数据是前端开发中很重要的一个环节，前端可以不必强依赖后端接口，只需要约定好对应的数据接口，前端可以通过 Mock 模拟数据先行开发，在后端接口开发完成后，只需要切换对应的接口地址即可，可以保证项目的同步开发。

在飞冰中，我们提供了完整的 Mock 方案，支持 CRUD 等操作，只需要在项目目录下新建 mock 文件夹，并配置入口文件 index.js 作为路由表的入口，在启动项目服务时工具会同步的启动 Mock 服务。

编写 mock 接口

在项目根目录下新建 mock/index.js 文件，并写入以下示例代码：

  1. // mock/index.js
  2. module.exports = {
  3.   // 同时支持 GET 和 POST
  4.   '/api/users/1': { data: {} },
  5.   '/api/foo/bar': { data: {} },
  7.   // 支持标准 HTTP
  8.   'GET /api/users': { users: [1, 2] },
  9.   'DELETE /api/users': { users: [1, 2] },
  11.   // 支持参数
  12.   'POST /api/users/:id': (req, res) => {
  13.     const { id } = req.params;
  14.     res.send({ id: id });
  15.   },
  16. };

启动调试服务后，假设启动的端口是 4444，直接在浏览器里访问 http://127.0.0.1:4444/api/users 即可看到接口返回数据。

实际应用

在实际项目中，我们推荐将所有接口请求收敛在 src/api/ 文件夹里，目录组织如下：

  1. src/
  2.   - api/
  3.     - user.js
  4.     - project.js
  5.     - index.js
  6.   - components/
  7.   - pages/
  1. // api/user.js
  2. export async function login(params) {
  3.   return axios({
  4.     url: '/api/login',
  5.     method: 'post',
  6.     data: params,
  7.   });
  8. }
  10. export async function postUserRegister(params) {
  11.   return axios({
  12.     url: '/api/register',
  13.     method: 'post',
  14.     data: params,
  15.   });
  16. }
  19. // api/project.js
  20. export async function getList(query) {
  21.   return axios({
  22.     url: '/api/project',
  23.     method: 'GET',
  24.     params: query
  25.   });
  26. }
  28. // api/index.js
  29. export user from './user';
  30. export project from './project';
  32. // src/pages/Home/index.jsx
  33. import { user as userApi, project as projectApi } from '../../api';
  34. await userApi.login();