欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-03 10:08:01
在前后端分离的开发模式中,接口数据模拟(api mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样,大概的方案可能会是这几类: 业务代码中临...

在前后端分离的开发模式中,接口数据模拟(api mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样,大概的方案可能会是这几类:

  1. 业务代码中临时写上 mock 数据的逻辑
  2. 在前端引入 mock 服务或框架,对 http 请求服务进行拦截
  3. 代理转发至自建的 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

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

2.2 增加配置文件angular.json 的代理配置项

在配置文件 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

我们通过在自定义代理配置文件中引入 simple-mock 相关 api 实现 mock 功能。

这里我们还引入了 co-body 用于解码 post 请求的参数,以便于自定义 mock 规则时使用。

该文件内容参考如下:

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;

以上操作完成,执行 ng serve,即会在项目根目录创建 mock 目录和 simple-mock 的配置文件 simple-mock-config.js,这些文件都会在 .gitignore 中注入过滤规则,可以在本地随意修改。

2.4 修改 simple-mock 配置文件

simple-mock 可以通过读取配置文件 simple-mock-config.js 判断 mock 的开启或关闭。

对于针对本文实现的示例项目 ,该配置文件内容参考如下:

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;
 }
};

通过修改配置文件中的开关,即可实现 mock 功能的开启或关闭了。

2.5 通过环境变量开启或关闭 mock 功能

除了读取配置文件,simple-mock 还可以通过读取环境变量判断 mock 的开启或关闭(环境变量的优先级更高,方便将开关注入到工程化工具中),详细用法参考。

例如在示例项目 中,创建了 dev-start.bat 文件,在 window 下开发时,启动该文件即可即时选择是否开启 mock 功能。

dev-start.bat 文件主要内容参考:

@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

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

更多参考

是为本文实现的一个示例项目,有兴趣可前往查阅完整的仓库代码。

本文的方案本质上是在 http-proxy-middleware 执行过程中,注入 simple-mock 相关 api 实现 mock 功能。故本文的示例方法,实际适用于任何使用 http-proxy-middleware 作为 http 代理的 node server 服务。在 的说明文档中,则是以 代理库作为示例,有兴趣可进一步参考研究。




总结

以上所述是小编给大家介绍的在 angular-cli 中使用 simple-mock 实现前端开发 api mock 接口数据模拟功能的方法,希望对大家有所帮助