ant design pro 代码学习(四) ----- 数据mock

1、.roadhogrc.mock.js

  roadhog支持mock功能，如需mock 功能，在 .roadhogrc.mock.js 中添加配置即可，在开发环境下启动server时，将开启mock功能；也可以通过配置在开发环境下关闭mock功能。

//.roadhogrc.mock.js
// 是否禁用代理
const noProxy = process.env.NO_PROXY === 'true';

const proxy = {
    //具体mock数据
    ......
}


export default (noProxy ? {} : delay(proxy, 1000));

   在.roadhogrc.mock.js中判断node参数process.env是否设置了NO_PROXY === ‘true’，如果设置了，则返回空（{}），如果未设置，则返回mock对象proxy（Object）。启动时配置node参数如下所示：

   cross-env使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量

   process.env属性返回一个包含用户环境信息的对象。

//package.json
"scripts":{
    "start": "cross-env ESLINT=none roadhog dev",
    "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",
}

---

2、mock数据的配置

mock数据支持多种类型。roadhog API 文档，有如下类型：

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1,2] },

  // GET POST 可省略
  '/api/users/1': { id: 1 },

  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },

  // Forward 到另一个服务器
  'GET /assets/*': 'https://assets.online/',

  // Forward 到另一个服务器，并指定子路径
  // 请求 /someDir/0.0.50/index.css 会被代理到 https://g.alicdn.com/tb-page/taobao-home, 实际返回 https://g.alicdn.com/tb-page/taobao-home/0.0.50/index.css
  'GET /someDir/(.*)': 'https://g.alicdn.com/tb-page/taobao-home',
};

---

3、mock数据的代理

   在实际开发过程中，当后端接口没有提供的时候，可能需要前端mock数据；当前后端联调时，此时需要调用后端接口，此时就需要代理到后端接口。有两种方法亲测有效。

   1、配置.webpackrc.js：在.roadhogrc.mock.js中配置webpack-dev-server的proxy属性。此时含有/api 的接口会被请求到：http://your.service.com/ 下。例如当请求/api/getUser时，代理后完整的接口地址为：http://your.service.com/api/getUser

"proxy": {
  "/api": {
    "target": "http://your.service.com/",   //代理后转发规则（api）会拼接在url后边
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}

   2、配置.roadhogrc.mock.js：在.roadhogrc.mock.js中有如下代码。

    export default (noProxy ? {} : delay(proxy, 1000));

   通过运行npm run start:no-proxy(关闭代理)，此时返回是一个空对象。对空对象做处理，添加转发规则。

官方文档给出的解释

// .roadhogrc.mock.js
export default {
  'GET /api/(.*)': 'https://your.server.com/api/',
};

   官方文档只能转发GET请求，参考roadhog文档，去掉GET即能转发所有规则。实际配置有如下两种方式。

'/api/*': 'http://your.server.com/',   //转发规则api会自动添加到转发域名后

'/api/(.*)': 'http://your.server.com/api/', //转发规则api不会自动添加到转发域名后。需要域名后手动添加转发规则api

  完整代码：

export default (noProxy
  ? {
    *// '/api/(.*)': "https://your.server.com/api/",*
    '/api/*': "https://your.server.com/",
  }
  : delay(proxy, 1000));

  总结：

  1. 方式1的配置方式，不管是否开始mock数据的模式，都会被代理。

  2. 如果设置了方式1，同时开启了mock数据的话，也即此时webpack-dev-server的proxy属性被代理到实际开发的服务器，mock配置的是本地的数据。此时webpack-dev-server的proxy属性的优先级更高（已经数据亲测）；

  3. 方式2的配置，通过启动方式的不同（npm start 和 npm run start:no-proxy）来设置是否关闭代理，其实本质上来说，是设置了两种不同的代理方式。

     — npm start时，数据代理到本地服务器mock部分；

     — npm run start:no-proxy时，代理到后端接口服务器（https://your.server.com/api/）。

  4. 使用方式：如果开发时，前期需要做mock，后期需要转发，则推荐方式2；如果不做mock数据，单纯的转发，则推荐方式1

---

上一篇：ant design pro 代码学习(三) —– 菜单数据分析
下一篇：ant design pro 代码学习(五) —– 知识点总结1

---

参考文档：

https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md

https://github.com/ant-design/ant-design-pro/issues/325#issuecomment-353300890