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

在前端和后端分离的开发模式下，API Mock是必然的。前端学生可以采取各种措施来应对这种情况，大致的解决方案可能是以下几类：

业务代码中临时写入模拟数据的逻辑，在前端引入模拟服务或框架，拦截HTTP请求服务，转发给自建的模拟服务器。主要介绍在Angular-cli中引入simple-mock的方法，快速实现项目数据接口的仿真功能。这个方案本质上是上面提到的第三个方案。

1简单模拟简介

Simple-Mock是一个简单的API Mcok库，为节点Server提供API方法调用，帮助节点Server实现Mock功能。实现库的主要目的是偷懒，希望模拟数据在前端开发过程中能尽量简单。

与普通的Mock库或Mock服务器不同，它实现了自动保存后端API数据的功能。如果你足够懒惰和随意，你就不能写任何模拟规则。

2在Angular-cli中使用简单模拟

以Angular-cli^7.0.0和Angular^7.0.0为例。

在Angular-cli^7.0.0，执行ng serve时，实际上是用express启动节点服务器，用http-proxy-中间件实现HTTP API代理。因此，该方案的本质是在http-代理-中间件执行过程中，注入simple-Mock相关API，实现Mock功能。

将simple-mock引入Angular-cli的方法非常简单。请参考以下具体流程。

2.1在项目中引入简单模拟

在npmi-d @ lzwme/simple-mock # or jarnad-d @ lzwme/simple-mock 2.2中添加配置文件angular.json的代理配置项

在配置文件angular.json的服务/选项部分添加proxyConfig字段的配置.参考：

{ ' serve ' : { ' builder ' : ' @ angular-dev kit/build-angular : dev-server '，' options ' : { ' browsertargett ' : ' github-user-search : build '，' liveReload ' : true，' open': true，' host ' : ' localhost '，' port ' : '，servePath ' 3: '/'，' publicHost

2.3.创建新的自定义代理配置文件config/ngcli-proxy-config.js。

我们通过在自定义代理配置文件中引入简单模拟相关的应用编程接口来实现模拟功能。

这里，我们还介绍了co-body用来解码post请求的参数，以便在定制模拟规则时使用。

本文件的内容如下：

const AnyParse=require(' co-body ')；const APiMock=require(' @ lzwme/simple-mock ')；const粉笔=require('粉笔')；const APiProxyList={ '/users/* * ' : ' https://API . github.com/'，}；/* * *详细配置参考：https://www.npmjs.com/package/http-proxy-middleware */const proxycfg=object . keys(API代理列表)。reduce ((pcfg，key)={const proxy target=API代理列表[key]；pCfg[key]={ target : proxy target，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=wait any parse({ req })；} catch(err){//console . log(err)；} } apiMock.render(req，res)。然后(isMocked={ if(！isMocked) { console.log(粉笔.青色('[apiProxy]')，req。_parsedUrl.pathname，' \t '，粉笔.黄色(ProxyTarget))；} });}, };返回pCfg}, {});module.exports=proxyCfg完成上述操作后，将执行ng serve，即在项目的根目录中创建mock目录和simple-mock配置文件simple-mock-config.js，并在这些文件中注入过滤规则。gitignore，可以在本地随意修改。

2.4修改简单模拟配置文件

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