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


Posted in Javascript onNovember 28, 2018

在前后端分离的开发模式中,接口数据模拟(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 的开启或关闭。

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

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 的开启或关闭(环境变量的优先级更高,方便将开关注入到工程化工具中),详细用法参考simple-mock 使用文档。

例如在示例项目 github-user-search-ng中,创建了 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 接口数据模拟功能的方法

更多参考

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

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

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

总结

以上所述是小编给大家介绍的在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
小程序点击图片实现自动播放视频
May 29 #Javascript
django使用channels2.x实现实时通讯
Nov 28 #Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 #Javascript
详解Vue中watch的详细用法
Nov 28 #Javascript
vscode下的vue文件格式化问题
Nov 28 #Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 #Javascript
You might like
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
微信API接口大全
2015/04/15 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
Java程序员面试90题
2013/10/19 面试题
入党积极分子思想汇报
2014/01/02 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
诚信承诺书
2015/01/19 职场文书
春季运动会开幕词
2015/01/28 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL