如果您参与前端开发，那么您可能会知道以下情况：项目条款正在迅速缩小，您的管理层或客户，或两者兼而有之，希望他们一起目睹当前正在运行的应用程序，即使是假数据也是如此。 同时，可能会有一个背面，但是单词与正面的交互的api层根本没有。
因此，最近我遇到了这种情况，并且正在开发一个有角度的前端（人们坐在椅子上懒散地拍拍，有人点点头示意）。
现在，我将认真尝试。 一方面，情况并不少见，可以选择许多解决方案。
我想到了几种解决方案：
- 硬编码组件级数据
- 在解析程序服务级别上对数据进行硬编码，将其固定到必要的路由
- 数据服务提供商级别的硬编码数据
- 刷新api，并根据约定的合同返回硬编码的数据
但是，这些选择中的任何一个似乎都是取之不尽用之不竭的选择，每一个选择都有明显的缺点。
- 第一种选择立即消失了-绝对不方便的未使用解决方案，随着项目的发展，所有内容都必须重写。
- 可以执行此解决方案，但是同样，项目结构和组件的逻辑将被重写。
- 一个可能的选择是，您甚至可以异步返回存根数据，以模拟服务器调用，但是，就像在先前的问题解决方案中一样，我们的拦截器（如果存在，但是存在）将无法工作，事实证明，模仿工作有后盾变得不完整。
- 最后一个选项似乎是可以接受的，没有以前的选项所存在的问题，但是我不想仅仅出于卫生方面的原因在后端项目中编写硬代码。
结果，选择了另一个选项：提出一个单独的Web服务器，该Web服务器将根据路线和合同返回数据，并配置装配的单独配置和angular的执行。 事实证明，两者都很容易做到。
为了实现模拟服务器，选择了
express 。
让我们开始吧。
我们选择要为msk服务器编写代码的位置，例如，在ng项目旁边的模拟服务器目录中。
接下来，您需要初始化项目并使用express添加软件包。
npm init
npm install --save express
接下来，添加将向我们返回数据的代码。 我们创建index.js文件，我们采用第一个教程中的代码。
const express = require("express"); const app = express(); app.get("/url", (req, res, next) => { res.json(["Tony", "Lisa", "Michael", "Ginger", "Food"]); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
启动服务器
node index.js
与邮递员联系：
一切都超级好，服务器正在运行。 现在，让我们配置一条路由，就像从真实的api请求数据一样。 假设我们需要所有书籍的清单，并在books.json文件中填入书籍
[ { "rn": 0, "id": "0", "name": "Jungle", "type": 0, "wells": 10042, "default": false, "hidden": false, "author": "Admin" }, { "rn": 1, "id": "1", "name": "Main", "type": 1, "wells": 156, "default": true, "hidden": false, "author": "User" } ]
并更新应用程序文件：
const express = require("express"); const app = express(); app.get("/api/book/", (req, res, next) => { const books = require('./books'); res.json(books); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
并检查：
太好了
现在让我们开始使用角度应用程序。
将存储地址的配置添加回环境/ environment * .ts文件。
环境：
export const environment = { production: false, backend: 'http://localhost:5000/' }
环境产品
export const environment = { production: true, backend: 'http://localhost:5000/' }
如上所述，在正常模式，产品和开发模式下，我们将在端口5000上搜索.net核心api。 接下来，我们描述临时后台的配置
环境模拟
export const environment = { production: false, backend: 'http://localhost:3000/' }
如您所见，在这里，我们正在端口3000上寻找api，我们将在其中运行express。
现在，我们需要一个拦截器，该拦截器将根据配置将调用定向回正确的服务器。
@Injectable() export class RequestInterceptor implements HttpInterceptor { baseUrl: string; constructor() { this.baseUrl = environment.backend; } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(this.modifyRequest(req)); } private modifyRequest = (req: HttpRequest<any>): HttpRequest<any> => { if (req.url.startsWith('api/')) { const url = this.baseUrl; req = req.clone({ url: url + req.url }); } return req; } }
仍然需要配置新的配置，以组装和启动与模拟服务器一起使用的应用程序。
为此，我们需要稍微调整angular.json。
在项目的Architect / build / configuration部分中，添加一个新的模拟构建配置，并描述为此配置替换环境文件。 同样对于服务模式，创建模拟配置并指定所需的构建选项
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "your-project": { /*****/ "architect": { "build": { /*****/ "configurations": { "production": { /*****/ }, "mock": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.mock.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project:build" }, "configurations": { "production": { "browserTarget": "your-project:build:production" }, "mock": { "browserTarget": "your-project:build:mock" } } } }, /*****/ } } }
仅此而已，现在仍然可以按所需配置运行项目
ng serve --configuration=mock
并查看后面的呼叫在哪里飞走：
一切都很好。
实际上，当我们加强对项目的集成和端到端测试时，这种设计仍将对我们有很大帮助。 我将在不久的将来尝试撰写有关此内容的文章。