在前后端分离的开发模式中,接口数据模拟模拟(API)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样,大概的方案可能会是这几类:
<李>业务代码中临时写上模拟数据的逻辑李
<李>在前端引入模拟服务或框架,对HTTP请求服务进行拦截李
<李>代理转发至自建的模拟服务器
本文主要介绍在Angular-cli中引入简单的模拟以快速实现项目数据接口模拟功能的方法。该方案本质上为上述的第三种方案。
简单的模拟是一个引入成本简单的API Mcok库,通过提供API方法供节点服务器调用,以帮助节点服务器实现模拟功能。实现该库的主要目的还是为了懒,希望前端开发过程中模拟数据能够尽可能地简单。
与常见模拟库或模拟服务器有点不同的是,它实现了自动保存后端API数据的功能,如果你足够懒且随意,可以不写任何模拟规则。
<强> 2在Angular-cli中使用简单的模拟
这里以Angular-cli ^ 7.0.0和角^ 7.0.0为例。
Angular-cli ^ 7.0.0在执行ng服务时,内部实际是采用表达启动节点服务器,并且使用http-proxy-middleware实现HTTP API代理,所以本文方案的本质是在http-proxy-middleware执行过程中,注入简单的模拟相关API实现模拟功能。
在Angular-cli中引入简单的模拟的方法十分简单,具体流程参考如下。
<强> 2.1在项目中引入简单的模拟
npm我- d @lzwme/简单的模拟
#或
纱添加- d @lzwme/简单的模拟
<强> 2.2增加配置文件角。json的代理配置项
在配置文件角。json中的服务/选项部分增加proxyConfig字段的配置。参考:
{
"服务":{
“建设者”:“@angular-devkit/build-angular: dev-server”,
"选项":{
:“browserTarget github-user-search:构建”,
“liveReload”:没错,
“开放”:没错,
“主机”:“localhost”,
“端口”:,
“servePath”:“/?
“publicHost”:“localhost”,
“proxyConfig”:“配置/ngcli-proxy-config.js”
},
},
}
proxyConfig的值配置/ngcli-proxy-config。js为我们自定义的代理配置定义文件。
<强> 2.3。新建自定义代理配置文件配置/ngcli-proxy-config.js
我们通过在自定义代理配置文件中引入简单的模拟相关API实现模拟功能。
这里我们还引入了co-body用于解码后请求的参数,以便于自定义模拟规则时使用。
该文件内容参考如下:
const anyParse=要求(“co-body”);
const apiMock=要求(“@lzwme/简单的模拟”);
const粉笔=要求(“粉笔”);
const apiProxyList={
“/用户/* *”:“https://api.github.com/?
};/* *
*详细配置参考:https://www.npmjs.com/package/http-proxy-middleware
*/const proxyCfg=种(apiProxyList)。减少((pCfg、关键)=比;{
const proxyTarget=apiProxyList(例子);
pCfg[主要]={
目标:proxyTarget,
changeOrigin:没错,>
模块。出口={
mockFileDir:“模拟”,//路径。contentlove (__dirname,“模拟”),//指定模拟文件存放的目录
isEnableMock:真的,//是否开启模拟API功能
isAutoSaveApi:真的,//是否自动保存远端请求的API
isForceSaveApi:假的,//是否强制保存,否则本地有时不再保存//自动保存API返回内容时,对内容进行过滤的方法,返回为真实才保存
fnAutosaveFilter(内容){//示例:不保存空的或的内容
如果(!内容| |内容。信息===拔凑业健?{
返回错误;
}
返回true;
}
};
通过修改配置文件中的开关,即可实现模拟功能的开启或关闭了。
<强> 2.5通过环境变量开启或关闭模拟功能
除了读取配置文件,简单的模拟还可以通过读取环境变量判断模拟的开启或关闭(环境变量的优先级更高,方便将开关注入到工程化工具中),详细用法参考简单的模拟使用文档。
例如在示例项目github-user-search-ng中,创建了dev-start。蝙蝠文件,在窗口下开发时,启动该文件即可即时选择是否开启模拟功能。
dev-start。蝙蝠文件主要内容参考:
@title GMTS-FRONT-NG-START-HELPER
@echo掉
设置NODE_ENV=发展
设置MOCKAPI_ENABLE=N
设置MOCKAPI_AUTOSAVE=N
设置MOCKAPI_AUTOSAVE_FORCE=N
设置/p enablemock=启用mockAPI& # 63; (y/):
如果“% enablemock %”==皔”设置MOCKAPI_ENABLE=模拟
设置/p autosave=Auoto拯救API数据# 63;(y/):
如果“% autosave %”==皔”设置MOCKAPI_AUTOSAVE=保存
如果“% enablemock %”==皔”转到运行
设置/p forcesave=力拯救API数据# 63;(y/):
如果“% forcesave %”==皔”设置MOCKAPI_AUTOSAVE_FORCE=:跑
回声=======================================================回声MOCKAPI_ENABLE=% MOCKAPI_ENABLE %
回声MOCKAPI_AUTOSAVE=% MOCKAPI_AUTOSAVE %
回声MOCKAPI_AUTOSAVE_FORCE=% MOCKAPI_AUTOSAVE_FORCE %
回声=======================================================ng服务
