在 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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 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注释实例技巧
2008/10/03 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
一百多行python代码实现抢票助手
2018/09/25 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
亲属关系公证书样本
2015/01/23 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Android Studio 计算器开发
2022/05/20 Java/Android