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

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

{
 "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"
 },
 },
}

const anyParse = require('co-body');
const apiMock = require('@lzwme/simple-mock');
const chalk = require('chalk');
const apiProxyList = {
 '/users/**': 'https://api.github.com/',
};
/**
 * 详细配置参考：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 请求参数至 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;

module.exports = {
 mockFileDir: 'mock', // path.contentlove(__dirname, 'mock'), // 指定 mock 文件存放的目录
 isEnableMock: true, // 是否开启 Mock API 功能
 isAutoSaveApi: true, // 是否自动保存远端请求的 API
 isForceSaveApi: false, // 是否强制保存，否则本地有时不再保存
 // 自动保存 API 返回内容时，对内容进行过滤的方法，返回为 true 才保存
 fnAutosaveFilter(content) {
 // 示例： 不保存空的或 的内容
 if (!content || content.message === 'Not Found') {
  return false;
 }
 return true;
 }
};

@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