Angular13 如何创建一个模拟后端mockServe

在前端和后端的同时开发中，从事应用程序的 Angular 开发人员必须能够与虚假后端进行交互，以便通过模拟后端数据来创建 UI。其中我们就会使用 json-server 和 nodemon 的npm 包来帮助我们完成这个过程。

json-server 是一个提供完整假 REST API 的包，无需编码，可以毫不费力地进行设置。
Nodemon 是一种工具，可在检测到目录中的文件更改时自动重新启动 Node 应用程序，从而帮助开发基于Node.js的应用程序。

下面将简单介绍其步骤：

1. 创建新项目

使用 Angular CLI 工具命令创建一个全新的 Angular 项目：

ng new mock-server

这将设置一个名为 mock-server 的 Angular 项目，其中包含如下所示package.json。示例中使用的 Angular 版本是 v13，但是它适用于每个版本的 Angular 2+。

2. 安装 npm 包

npm install json-server --save-dev
npm install nodemon --save-dev

上述命令将最新版本的 json-server 和 nodemon 安装为 dev 依赖项，并将其添加到您的 package.json 文件中。

3. 在 JSON 文件中添加模拟数据

按服务器名称创建文件夹。名称可以是任何内容，具体取决于您的选择。在服务器文件夹 data/users/json 中创建另一个文件夹结构，并创建一个 getUsers.json 文件，其中包含 JSON 响应形式的模拟用户列表。创建上述文件夹结构是为了确保在添加多个虚假 API JSON 响应时保持一致性，并且它们可能属于应用中的单独功能模块。文件夹结构是基于功能模块创建的，就像我们在 Angular 应用程序中为功能模块所做的那样。

4. 添加index.js文件

要导出 server.js 文件中的 JSON 数据，请在 server/data/users 文件夹中创建一个 index.js 文件，该文件将模拟 JSON 响应（用户列表）导出为要在 server.js 文件中使用的模块。module.exports 是一个特殊对象，默认情况下包含在 Node.js 应用程序的每个 JavaScript 文件中。模块是表示当前模块的变量，导出是将作为模块公开的对象。

5. 添加一个 server.js 文件以将所有内容插入在一起

创建一个 server.js 文件，其中包含使用具有以下配置的Node.js设置 json-server 的配置：

上述节点服务器在端口号 3000 上运行。它侦听端点 /api/users 上的请求，以返回 http://localhost:3000/api/users 上的用户列表。

6. 在 package.json 中添加脚本

在server.js文件中完成服务器配置后，在package.json中创建一个脚本，如下所示：

"mock:server": "nodemon server/server.js --ext js,ts,json,html"

在命令行上添加 npm run mock：server，以查看服务器运行，并显示控制台消息“JSON Server running at port 3000”。 上述脚本在监视模式下运行，并侦听对 *.js、*.ts、*.json 和 *.html 类型的文件的任何更改，并自动重新启动节点服务器。

7. 进入浏览器并输入 URL

瞧！我们的模拟服务器已设置好并准备好进行测试。转到浏览器并点击地址栏中的 http://localhost:3000/api/users。您将能够在浏览器上看到用户列表。

同样，您可以为 POST、PUT、PATCH 和 DELETE 操作设置模拟端点。

8. 在 Angular 应用程序 UI 上测试它

在app.module.ts中注入 HttpClientModule，并在app.component.ts中注入 HttpClient 作为依赖注入。然后，在 ngOnInit（）生命周期钩子中，从模拟 API 端点 http://localhost:3000/api/users 获取用户列表，并在控制台中打印数据或将其绑定到 class 属性中以在 UI 中查看。

9. 直接上大大的文章链接

https://medium.com/geekculture/setting-up-a-mock-backend-with-angular-13-applications-26a21788f7dahttps://medium.com/geekculture/setting-up-a-mock-backend-with-angular-13-applications-26a21788f7da