在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

在前后端分离的开发模式中，接口数据模拟是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样，大概的方案可能会是这几类：。本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功能的方法。这里以 Angular-cli^7.0.0 和 Angular^7.0.0 为例。Angular-cli^7.0.0 在执行 ng serve 时，内部实际是采用 express 启动 node server，并且使用 http-proxy-middleware 实现 HTTP API 代理。所以本文方案的本质是在 http-proxy-middleware 执行过程中，注入 simple-mock 相关 API 实现 Mock 功能。具体流程参考如下。在配置文件 angular.json 中的 serve/options 部分增加 proxyConfig 字段的配置。这里我们还引入了 co-body 用于解码 post 请求的参数，以便于自定义 mock 规则时使用。simple-mock 可以通过读取配置文件 simple-mock-config.js 判断 mock 的开启或关闭。