在 Angular-cli 中使用 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā) API Mock 接口數(shù)據(jù)模擬功能的方法

在前后端分離的開(kāi)發(fā)模式中，接口數(shù)據(jù)模擬(API Mock)是不可避免的事情。前端同學(xué)在應(yīng)對(duì)該情況時(shí)采取的辦法可以各種各樣，大概的方案可能會(huì)是這幾類(lèi)：

1. 業(yè)務(wù)代碼中臨時(shí)寫(xiě)上 mock 數(shù)據(jù)的邏輯
2. 在前端引入 mock 服務(wù)或框架，對(duì) HTTP 請(qǐng)求服務(wù)進(jìn)行攔截
3. 代理轉(zhuǎn)發(fā)至自建的 mock server

本文主要介紹在 Angular-cli 中引入 simple-mock 以快速實(shí)現(xiàn)項(xiàng)目數(shù)據(jù)接口模擬功能的方法。該方案本質(zhì)上為上述的第三種方案。

1 simple-mock 簡(jiǎn)介

simple-mock 是一個(gè)引入成本簡(jiǎn)單的 API Mcok 庫(kù)，通過(guò)提供 API 方法供 node Server 調(diào)用，以幫助 node Server 實(shí)現(xiàn) Mock 功能。實(shí)現(xiàn)該庫(kù)的主要目的還是為了懶，希望前端開(kāi)發(fā)過(guò)程中 mock 數(shù)據(jù)能夠盡可能地簡(jiǎn)單。

與常見(jiàn) Mock 庫(kù)或 Mock Server 有點(diǎn)不同的是，它實(shí)現(xiàn)了自動(dòng)保存后端 API 數(shù)據(jù)的功能，如果你足夠懶且隨意，可以不寫(xiě)任何 mock 規(guī)則。

2 在 Angular-cli 中使用 simple-mock

這里以 Angular-cli^7.0.0 和 Angular^7.0.0 為例。

Angular-cli^7.0.0 在執(zhí)行 ng serve 時(shí)，內(nèi)部實(shí)際是采用 express 啟動(dòng) node server，并且使用 http-proxy-middleware 實(shí)現(xiàn) HTTP API 代理。所以本文方案的本質(zhì)是在 http-proxy-middleware 執(zhí)行過(guò)程中，注入 simple-mock 相關(guān) API 實(shí)現(xiàn) Mock 功能。

在 Angular-cli 中引入 simple-mock 的方法十分簡(jiǎn)單。具體流程參考如下。

2.1 在項(xiàng)目中引入 simple-mock

npm i -D @lzwme/simple-mock
# or
yarn add -D @lzwme/simple-mock

2.2 增加配置文件angular.json 的代理配置項(xiàng)

在配置文件 angular.json 中的 serve/options 部分增加 proxyConfig 字段的配置。參考：

{
 "serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
  "browserTarget": "github-user-search:build",
  "liveReload": true,
  "open": true,
  "host": "localhost",
  "port": ,
  "servePath": "/",
  "publicHost": "localhost",
  "proxyConfig": "config/ngcli-proxy-config.js"
 },
 },
}

proxyConfig 的值 config/ngcli-proxy-config.js 為我們自定義的代理配置定義文件。

2.3. 新建自定義代理配置文件 config/ngcli-proxy-config.js

我們通過(guò)在自定義代理配置文件中引入 simple-mock 相關(guān) API 實(shí)現(xiàn) mock 功能。

這里我們還引入了 co-body 用于解碼 post 請(qǐng)求的參數(shù)，以便于自定義 mock 規(guī)則時(shí)使用。

該文件內(nèi)容參考如下：

const anyParse = require('co-body');
const apiMock = require('@lzwme/simple-mock');
const chalk = require('chalk');
const apiProxyList = {
 '/users/**': 'https://api.github.com/',
};
/**
 * 詳細(xì)配置參考：https://www.npmjs.com/package/http-proxy-middleware
 */
const proxyCfg = Object.keys(apiProxyList).reduce((pCfg, key) => {
 const proxyTarget = apiProxyList[key];
 pCfg[key] = {
 target: proxyTarget,
 changeOrigin: true,
 onProxyRes(proxyRes, req, res) {
  apiMock.saveApi(req, res, proxyRes.headers['content-encoding']);
 },
 async onProxyReq(proxyReq, req, res) {
  // 嘗試解碼 post 請(qǐng)求參數(shù)至 req.body
  if (!req.body && proxyReq.getHeader('content-type')) {
  try {
   req.body = await anyParse({req});
  } catch(err) {
   // console.log(err);
  }
  }
  apiMock.render(req, res).then(isMocked => {
  if (!isMocked) {
   console.log(chalk.cyan('[apiProxy]'), req._parsedUrl.pathname, '\t', chalk.yellow(proxyTarget));
  }
  });
 },
 };
 return pCfg;
}, {});
module.exports = proxyCfg;

以上操作完成，執(zhí)行 ng serve，即會(huì)在項(xiàng)目根目錄創(chuàng)建 mock 目錄和 simple-mock 的配置文件 simple-mock-config.js，這些文件都會(huì)在 .gitignore 中注入過(guò)濾規(guī)則，可以在本地隨意修改。

2.4 修改 simple-mock 配置文件

simple-mock 可以通過(guò)讀取配置文件 simple-mock-config.js 判斷 mock 的開(kāi)啟或關(guān)閉。

對(duì)于針對(duì)本文實(shí)現(xiàn)的示例項(xiàng)目 github-user-search-ng，該配置文件內(nèi)容參考如下：

module.exports = {
 mockFileDir: 'mock', // path.contentlove(__dirname, 'mock'), // 指定 mock 文件存放的目錄
 isEnableMock: true, // 是否開(kāi)啟 Mock API 功能
 isAutoSaveApi: true, // 是否自動(dòng)保存遠(yuǎn)端請(qǐng)求的 API
 isForceSaveApi: false, // 是否強(qiáng)制保存，否則本地有時(shí)不再保存
 // 自動(dòng)保存 API 返回內(nèi)容時(shí)，對(duì)內(nèi)容進(jìn)行過(guò)濾的方法，返回為 true 才保存
 fnAutosaveFilter(content) {
 // 示例： 不保存空的或 的內(nèi)容
 if (!content || content.message === 'Not Found') {
  return false;
 }
 return true;
 }
};

通過(guò)修改配置文件中的開(kāi)關(guān)，即可實(shí)現(xiàn) mock 功能的開(kāi)啟或關(guān)閉了。

2.5 通過(guò)環(huán)境變量開(kāi)啟或關(guān)閉 Mock 功能

除了讀取配置文件，simple-mock 還可以通過(guò)讀取環(huán)境變量判斷 mock 的開(kāi)啟或關(guān)閉（環(huán)境變量的優(yōu)先級(jí)更高，方便將開(kāi)關(guān)注入到工程化工具中），詳細(xì)用法參考simple-mock 使用文檔。

例如在示例項(xiàng)目 github-user-search-ng中，創(chuàng)建了 dev-start.bat 文件，在 window 下開(kāi)發(fā)時(shí)，啟動(dòng)該文件即可即時(shí)選擇是否開(kāi)啟 mock 功能。

dev-start.bat 文件主要內(nèi)容參考：

@title GMTS-FRONT-NG-START-HELPER
@echo off
set NODE_ENV=development
set MOCKAPI_ENABLE=N
set MOCKAPI_AUTOSAVE=N
set MOCKAPI_AUTOSAVE_FORCE=N
set /p enablemock=Enable mockAPI?(y/):
if "%enablemock%"=="y" set MOCKAPI_ENABLE=mock
set /p autosave=Auoto Save API Data?(y/):
if "%autosave%"=="y" set MOCKAPI_AUTOSAVE=save
if "%enablemock%"=="y" goto run
set /p forcesave=Force Save API Data?(y/):
if "%forcesave%"=="y" set MOCKAPI_AUTOSAVE_FORCE=force
:run
echo =======================================================
echo MOCKAPI_ENABLE   = %MOCKAPI_ENABLE%
echo MOCKAPI_AUTOSAVE  = %MOCKAPI_AUTOSAVE%
echo MOCKAPI_AUTOSAVE_FORCE = %MOCKAPI_AUTOSAVE_FORCE%
echo =======================================================
ng serve

更多參考

github-user-search-ng 是為本文實(shí)現(xiàn)的一個(gè)示例項(xiàng)目，有興趣可前往查閱完整的倉(cāng)庫(kù)代碼。

本文的方案本質(zhì)上是在 http-proxy-middleware 執(zhí)行過(guò)程中，注入 simple-mock 相關(guān) API 實(shí)現(xiàn) Mock 功能。故本文的示例方法，實(shí)際適用于任何使用 http-proxy-middleware 作為 HTTP 代理的 node server 服務(wù)。在 simple-mock 的說(shuō)明文檔中，則是以 node-http-proxy 代理庫(kù)作為示例，有興趣可進(jìn)一步參考研究。

https://github.com/renxia/github-user-search-ng
https://github.com/lzwme/simple-mock
https://lzw.me/pages/share/ppt/simple-mock.html
https://www.npmjs.com/package/http-proxy-middleware

總結(jié)

以上所述是小編給大家介紹的在 Angular-cli 中使用 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā) API Mock 接口數(shù)據(jù)模擬功能的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！