在 Angular-cli 中使用 simple-mock 实现前端开发 API

在前后端分离的开发过程中，接口数据模拟（API Mock）是不可或缺的一环。对于前端开发者来说，选择合适的数据模拟方法至关重要。本文将介绍在Angular-cli环境中使用simple-mock库实现前端开发API Mock接口数据模拟功能的方法。

我们需要了解一下simple-mock。simple-mock是一个简单易用的API Mock库，它通过提供API方法供node Server调用，帮助node Server实现Mock功能。其独特之处在于，它可以自动保存后端API数据，让你在不需要写任何mock规则的情况下也能实现数据模拟。

接下来，让我们看看如何在Angular-cli中使用simple-mock。

一、simple-mock简介

在介绍具体使用方法之前，我们先了解一下simple-mock。这个库的主要目的是简化前端开发的mock数据过程，让开发者能够更高效地模拟后端接口返回的数据。

二、在Angular-cli中引入simple-mock

这里以Angular-cli^7.0.0及以上版本和Angular^7.0.0及以上版本为例。

1. 在项目中引入simple-mock

通过npm或yarn将simple-mock库添加到项目中：

```shell

npm i -D @lzwme/simple-mock

或

yarn add -D @lzwme/simple-mock

```

2. 增加配置文件angular.json的代理配置项

在配置文件angular.json中的serve/options部分增加proxyConfig字段的配置，指向我们自定义的代理配置定义文件。

```json

{

"serve": {

"builder": "@angular-devkit/build-angular:dev-server",

"options": {

"browserTarget": "your-app-target",

"liveReload": true,

"open": true,

"host": "localhost",

"port": "",

"servePath": "/",

"publicHost": "localhost",

"proxyConfig": "config/ngcli-proxy-config.js"

}

}

}

```

这里的proxyConfig字段的值指向的是我们自定义的代理配置定义文件config/ngcli-proxy-config.js。

3. 新建自定义代理配置文件config/ngcli-proxy-config.js

在API模拟与代理配置的奥秘时，我们首先需要安装几个关键的依赖模块。这些模块包括用于请求体的`co-body`、模拟数据生成的`@lzwme/simple-mock`，以及用于命令行输出的色彩工具`chalk`。接下来，我们定义了一个代理配置列表`apiProxyList`，它将特定的路由映射到相应的API地址。关于详细的配置信息，你可以参考官方文档。

接下来，我们通过一个简单的脚本生成代理配置对象`proxyCfg`。这个对象针对每个路由定义了一个代理规则，包括目标API地址、是否改变请求源地址头以及代理响应和请求的处理逻辑。在代理响应的处理过程中，我们使用`apiMock.saveApi`保存API的返回内容。在代理请求的处理过程中，我们尝试POST请求的参数字段并保存到`req.body`中。通过`apiMock.render`判断是否需要模拟数据，如果需要则不输出实际的请求路径和API地址。

完成上述操作后，执行`ng serve`命令。项目根目录下会自动创建用于存放模拟数据的目录`mock`以及`simple-mock`的配置文件`simple-mock-config.js`。这些文件会被添加到`.gitignore`中，意味着你可以随意修改它们而不用担心影响版本控制。

接下来是修改模拟配置文件的步骤。这个文件名为`simple-mock-config.js`，它决定了模拟功能的开启或关闭状态。你可以通过修改配置文件中的开关来实现这一点。你还可以设置其他参数，如模拟文件存放的目录、是否自动保存远端请求的API等。配置文件中的`fnAutosaveFilter`函数可以用来决定哪些内容应该被保存。在这个例子中，我们不保存空内容或标记为“Not Found”的内容。

除了通过配置文件开启或关闭模拟功能外，还可以通过环境变量来实现这一操作。这在工程化工具中非常有用，因为它允许你根据不同的环境选择不同的配置。例如，在示例项目中，我们创建了一个名为`dev-start.bat`的文件，在Windows环境下开发时，只需启动这个文件就可以选择是否开启模拟功能。这样，你就可以灵活地控制模拟功能的开启或关闭，以适应不同的开发需求和环境。在GMTS前端项目中，启动开发环境的脚本`dev-start.bat`是极其重要的一个环节。这份脚本启动了一系列环境变量配置和程序运行步骤，对于前端开发者来说，理解并正确使用这个脚本是非常关键的。

当你启动这个脚本时，首先会看到一个简洁的标题“GMTS-FRONT-NG-START-HELPER”。随后，它会关闭回声模式以清晰地展示后续的操作指令。接着设置了一系列的变量配置，这些变量将决定模拟API的运行模式和功能。以下是对脚本主要内容的解读：

它设置了开发环境变量`NODE_ENV`为“development”，这意味着脚本将在开发模式下运行。然后，通过一系列的提示和判断语句，让用户决定是否启用模拟API(`MOCKAPI_ENABLE`)、是否自动保存API数据(`MOCKAPI_AUTOSAVE`)以及是否强制保存API数据(`MOCKAPI_AUTOSAVE_FORCE`)。用户可以通过输入“y”或“n”来选择是否启用这些功能。这些选择将影响模拟API的运行行为。

然后，脚本会展示当前设置的这些变量的值，以便用户确认自己的选择。之后，它会启动Angular的服务器(`ng serve`)，进入开发模式。在这一模式下，开发者可以通过前端访问模拟的API接口进行开发工作。而所有这些设置和操作都是围绕着 simple-mock 库进行的，它使得开发者可以在不依赖后端的情况下进行前端开发，大大提升了开发效率和便利性。这就是这个脚本在Angular-cli项目中实现前端开发API Mock接口数据模拟功能的过程。这也是我们如何使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的详细说明。通过注入 simple-mock 相关 API 实现 Mock 功能的方式，适用于任何使用 http-proxy-middleware 作为 HTTP 代理的 node server 服务。这个脚本对于前端开发者来说是一个强大的工具。如果你有任何疑问或需要进一步了解，请随时与我联系。我会及时回复你的。感谢大家对狼蚁SEO网站的支持和关注！更多详细信息和完整的仓库代码可以在我们的网站上找到。在此也推荐大家查阅更多关于 simple-mock 和 http-proxy-middleware 的资料和研究。这些工具都能帮助我们更好地进行前端开发。