title:
order: 6

category: ICE Design Pro

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

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

新建路由表

在项目根目录下创建 projectName/mock/index.js 文件

  1. // mock/index.js
  2. const foo = require('./foo.json');
  3. const bar = require('./bar');
  5. module.exports = {
  6.   // 同时支持 GET 和 POST
  7.   '/api/users/1': foo,
  8.   '/api/foo/bar': bar(),
  10.   // 支持标准 HTTP
  11.   'GET /api/users': { users: [1, 2] },
  12.   'DELETE /api/users': { users: [1, 2] },
  14.   // 支持自定义函数，API 参考 express4
  15.   'POST /api/users/create': (req, res) => {
  16.     res.end('OK');
  17.   },
  19.   // 支持参数
  20.   'POST /api/users/:id': (req, res) => {
  21.     const { id } = req.params;
  22.     res.send({ id: id });
  23.   },
  24. };

通过 Iceworks 启动项目服务，假设启动的端口是 http://localhost:4444，打开浏览器如下：

Mock 方案 - 图1

实际应用

在模板中我们将服务接口统一维护在 src/api/index.js 中作为入口文件，有利于统一管理和可维护性，然后在需要引用的地方 import { xxx } from '@api' 即可；当然，也可以按照功能模块对接口进行归类：

目录组织：

  1. // 目录组织：
  3. - api
  4.   - User.js
  5.   - Home.js
  6.   - index.js
  1. // User.js
  3. export async function login(params) {
  4.   return axios({
  5.     url: '/api/login',
  6.     method: 'post',
  7.     data: params,
  8.   });
  9. }
  11. export async function postUserRegister(params) {
  12.   return axios({
  13.     url: '/api/register',
  14.     method: 'post',
  15.     data: params,
  16.   });
  17. }
  19. export async function postUserLogout() {
  20.   return axios({
  21.     url: '/api/logout',
  22.     method: 'post',
  23.   });
  24. }
  26. export async function getUserProfile() {
  27.   return axios('/api/profile');
  28. }