在前后端分离的开发模式中，接口数据模拟(API Mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样，大概的方案可能会是这几类：
- 业务代码中临时写上 mock 数据的逻辑
- 在前端引入 mock 服务或框架，对 HTTP 请求服务进行拦截
- 代理转发至自建的 mock server
本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功能的方法。该方案本质上为上述的第三种方案。
1 simple-mock 简介
simple-mock 是一个引入成本简单的 API Mcok 库，通过提供 API 方法供 node Server 调用，以帮助 node Server 实现 Mock 功能。实现该库的主要目的还是为了懒，希望前端开发过程中 mock 数据能够尽可能地简单。
与常见 Mock 库或 Mock Server 有点不同的是，它实现了自动保存后端 API 数据的功能，如果你足够懒且随意，可以不写任何 mock 规则。
2 在 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-cli 中引入 simple-mock 的方法十分简单。具体流程参考如下。
2.1 在项目中引入 simple-mock
| 1 | npm i -D @lzwme``/simple-mock |
| 2 | # or |
| 3 | yarn add -D @lzwme``/simple-mock |
2.2 增加配置文件angular.json 的代理配置项
在配置文件 angular.json 中的 serve/options 部分增加 proxyConfig 字段的配置。参考：
| 01 | { |
| 02 | "serve"``: { |
| 03 | "builder"``: ``"@angular-devkit/build-angular:dev-server"``, |
| 04 | "options"``: { |
| 05 | "browserTarget"``: ``"github-user-search:build"``, |
| 06 | "liveReload"``: ``true``, |
| 07 | "open"``: ``true``, |
| 08 | "host"``: ``"localhost"``, |
| 09 | "port"``: 3008``, |
| 10 | "servePath"``: ``"/"``, |
| 11 | "publicHost"``: ``"localhost"``, |
| 12 | "proxyConfig"``: ``"config/ngcli-proxy-config.js" |
| 13 | }, |
| 14 | }, |
| 15 | } |
proxyConfig 的值 config/ngcli-proxy-config.js 为我们自定义的代理配置定义文件。
2.3. 新建自定义代理配置文件 config/ngcli-proxy-config.js
我们通过在自定义代理配置文件中引入 simple-mock 相关 API 实现 mock 功能。
这里我们还引入了 co-body 用于解码 post 请求的参数，以便于自定义 mock 规则时使用。
该文件内容参考如下：
| 01 | const anyParse = ``require(``'co-body'``); |
| 02 | const apiMock = ``require(``'@lzwme/simple-mock'``); |
| 03 | const chalk = ``require(``'chalk'``); |
| 04 | const apiProxyList = ``{ |
| 05 | '/users/**'``: ``'[https://api.github.com/](https://api.github.com/)'``, |
| 06 | }; |
| 07 | /** |
| 08 | * ``详细配置参考：https:``//www.npmjs.com/package/http-proxy-middleware |
| 09 | */ |
| 10 | const proxyCfg = ``Object.keys(apiProxyList).reduce((pCfg, key) => { |
| 11 | const proxyTarget = ``apiProxyList[key]; |
| 12 | |
| 13 | pCfg[key] = ``{ |
| 14 | target: proxyTarget, |
| 15 | changeOrigin: ``true``, |
| 16 | onProxyRes(proxyRes, req, res) { |
| 17 | apiMock.saveApi(req, res, proxyRes.headers[``'content-encoding'``]); |
| 18 | }, |
| 19 | async onProxyReq(proxyReq, req, res) { |
| 20 | // 尝试解码 post 请求参数至 req.body |
| 21 | if (!req.body && proxyReq.getHeader(``'content-type'``)) { |
| 22 | try { |
| 23 | req.body = ``await anyParse({req}); |
| 24 | } ``catch``(err) { |
| 25 | // console.log(err); |
| 26 | } |
| 27 | } |
| 28 | |
| 29 | apiMock.render(req, res).then(isMocked => { |
| 30 | if (!isMocked) { |
| 31 | console.log(chalk.cyan(``'[apiProxy]'``), req._parsedUrl.pathname, ``'\t'``, chalk.yellow(proxyTarget)); |
| 32 | } |
| 33 | }); |
| 34 | }, |
| 35 | }; |
| 36 | return pCfg; |
| 37 | }, {}); |
| 38 | module.exports = ``proxyCfg; |
以上操作完成，执行 ng serve，即会在项目根目录创建 mock 目录和 simple-mock 的配置文件 simple-mock-config.js，这些文件都会在 .gitignore 中注入过滤规则，可以在本地随意修改。
2.4 修改 simple-mock 配置文件
simple-mock 可以通过读取配置文件 simple-mock-config.js 判断 mock 的开启或关闭。
对于针对本文实现的示例项目 github-user-search-ng，该配置文件内容参考如下：
| 01 | module.exports = ``{ |
| 02 | mockFileDir: ``'mock'``, ``// path.contentlove(__dirname, 'mock'), // 指定 mock 文件存放的目录 |
| 03 | isEnableMock: ``true``, ``// 是否开启 Mock API 功能 |
| 04 | isAutoSaveApi: ``true``, ``// 是否自动保存远端请求的 API |
| 05 | isForceSaveApi: ``false``, ``// 是否强制保存，否则本地有时不再保存 |
| 06 | // 自动保存 API 返回内容时，对内容进行过滤的方法，返回为 true 才保存 |
| 07 | fnAutosaveFilter(content) { |
| 08 | // 示例： 不保存空的或 404 的内容 |
| 09 | if (!content || content.message === ``'Not Found'``) { |
| 10 | return false``; |
| 11 | } |
| 12 | |
| 13 | return true``; |
| 14 | } |
| 15 | }; |
通过修改配置文件中的开关，即可实现 mock 功能的开启或关闭了。
2.5 通过环境变量开启或关闭 Mock 功能
除了读取配置文件，simple-mock 还可以通过读取环境变量判断 mock 的开启或关闭（环境变量的优先级更高，方便将开关注入到工程化工具中），详细用法参考 simple-mock 使用文档。
例如在示例项目 github-user-search-ng中，创建了 dev-start.bat 文件，在 window 下开发时，启动该文件即可即时选择是否开启 mock 功能。
dev-start.bat 文件主要内容参考：
| 01 | @title GMTS-FRONT-NG-START-HELPER |
| 02 | @``echo off |
| 03 | |
| 04 | set NODE_ENV=development |
| 05 | set MOCKAPI_ENABLE=N |
| 06 | set MOCKAPI_AUTOSAVE=N |
| 07 | set MOCKAPI_AUTOSAVE_FORCE=N |
| 08 | |
| 09 | set /p enablemock=Enable mockAPI?(y/): |
| 10 | if "%enablemock%"``==``"y" set MOCKAPI_ENABLE=mock |
| 11 | |
| 12 | set /p autosave=Auoto Save API Data?(y/): |
| 13 | if "%autosave%"``==``"y" set MOCKAPI_AUTOSAVE=save |
| 14 | |
| 15 | if "%enablemock%"``==``"y" goto run |
| 16 | |
| 17 | set /p forcesave=Force Save API Data?(y/): |
| 18 | if "%forcesave%"``==``"y" set MOCKAPI_AUTOSAVE_FORCE=force |
| 19 | |
| 20 | :run |
| 21 | echo ======================================================= |
| 22 | echo MOCKAPI_ENABLE = %MOCKAPI_ENABLE% |
| 23 | echo MOCKAPI_AUTOSAVE = %MOCKAPI_AUTOSAVE% |
| 24 | echo MOCKAPI_AUTOSAVE_FORCE = %MOCKAPI_AUTOSAVE_FORCE% |
| 25 | echo ======================================================= |
| 26 | |
| 27 | ng serve |
image
更多参考
github-user-search-ng 是为本文实现的一个示例项目，有兴趣可前往查阅完整的仓库代码。
本文的方案本质上是在 http-proxy-middleware 执行过程中，注入 simple-mock 相关 API 实现 Mock 功能。故本文的示例方法，实际适用于任何使用 http-proxy-middleware 作为 HTTP 代理的 node server 服务。在 simple-mock 的说明文档中，则是以 node-http-proxy 代理库作为示例，有兴趣可进一步参考研究。
网友评论