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

业务代码中临时写上 mock 数据的逻辑

在前端引入 mock 服务或框架，对 HTTP 请求服务进行拦截

代理转发至自建的 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# oryarn 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:///package/http-proxy-middleware

总结

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