2019年9月24日
伪造你的Angular后端，直到你成功
这是一篇由火绒萨尔．你也想贡献自己的力量吗?与Alain联络://www.kaltexworkwear.com/
大多数时候，在构建Angular应用程序时，你通过一个使用JSON作为数据格式的REST API与后端进行通信。有时候你想开始构建一个Angular应用，但你没有一个后端来为你提供真实的数据。
不用再担心了!在本文中，我将向您介绍JSON Server，这是一个可以轻松模拟rest api的工具，因此您不需要有一个真正的后端就可以开始。
为什么是模拟API?
首先，让我们从为什么首先需要模拟API开始。我使用模拟API的前三个原因是原型设计，嘲笑,教学．
原型设计
使用模拟API，您无需等待后端团队就可以开始开发。你开始编写你的Angular应用程序，把它插入一个模拟API，然后当它准备好时切换到真正的后端。这还可以帮助您与后端团队合作设计服务器响应的潜在形状。
嘲笑
对于端到端测试，您通常不希望在运行测试套件时碰到真正的api。模拟API允许您为测试提供现实的API，而不必担心填充或重置数据库。
教学
在教程、演示、研讨会和在线课程中，模拟API可以非常方便地让您专注于教授前端技术，而不是担心设置后端。
什么是JSON服务器?
JSON Server是一个基于express的服务器，它模拟了一个全功能的REST API，使用JSON文件作为数据库。
在写这篇文章时，我试图找到描述JSON Server的最佳方式。然后我又看了一眼自述JSON服务器存储库。它以最好的方式描述了JSON Server。
JSON Server是一个帮助Frontend开发者的工具很快原型或模拟一个REST API。JSON Server的优点在于你不需要建立一个真正的数据库。您的数据库是一个简单的JSON文件。
设置JSON服务器
现在，让我们讨论一下如何设置JSON服务器。
搭建一个新的Angular应用程序
首先，让我们构建一个新的Angular应用程序我的程序使用Angular CLI:
Ng new my-app——defaults
更改目录为我的程序
我的程序光盘
安装JSON服务器
JSON Server可以作为一个包，你可以用NPM安装:
NPM安装——保存json-server
创建数据库文件
创建api / db.json文件内容如下:
｛
“团队”:(
｛
“id”: 1、
"name": "FC Barcelona"，
“教练”:“埃内斯托·巴尔韦德”，
描述:“世界上最好的足球队!”
},
｛
“id”: 2
"name": "Real Madrid"，
“教练”:“齐达内”，
"description": "世界上最差的足球队!"
｝
］
｝
该文件api / db.json定义API端点。在这个例子中，我们有一个端点叫做/团队这将返回一个足球队列表。
我说的是真正的橄榄球，不是美式橄榄球。
创建路由映射文件
创建一个名为api / routes.json内容如下:
｛
:“/ api / * / 1美元”
｝
缺省情况下，我们的路由没有前缀/ api．所以我们会用routes.json文件来配置JSON服务器，以前缀我们所有的API端点/ api．这非常重要，因为在我们的Angular应用程序中，我们希望所有的HTTP调用都以/ api．
添加一个脚本来启动服务器
的脚本部分中添加以下键/值对package.json文件:
"api": "json-server api/db. "api/routes。json——no-cors = true”
启动模拟API
现在，我们已经准备好使用以下命令启动模拟API:
NPM运行API
这将启动我们的模拟APIhttp://localhost:3000．
从Angular中与模拟API通信
设置HttpClientModule
在能够将HTTP请求发送到后端之前，必须进行以下设置HttpClientModule．打开app.module.ts文件并添加HttpClientModule到进口的数组AppModule：
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
从@angular/common/http导入{HttpClientModule};
@NgModule ({
声明:[
AppComponent
),
进口:[
BrowserModule,
HttpClientModule,
),
引导(AppComponent):
})
导出类AppModule {}
向后端发出请求
现在可以注入HttpClient根组件中的服务-AppComponent．接下来，创建名为团队美元它将保存从我们的得到请求。
import {Component} from @angular/core;
从@angular/common/http导入{HttpClient};
@ component ({
选择器:“app-root”,
templateUrl:“。/ app.component.html”,
styleUrls(“。/ app.component.css”):
})
导出类AppComponent {
Teams $ = this.http.get('http://localhost:3000/api/teams');
构造函数(私有http: HttpClient) {}
｝
显示团队列表
我们现在可以用异步管道到和* ngFor在组件模板中显示球队列表的指令:
< h2 > < / h2 >团队
< h3 > {{team.name}} < / h3 >
< p > {{team.description}} < / p >
< / div >
启动应用程序
我们已准备好提供应用程序:
发球——开球
将自动打开您的浏览器——打开国旗。但是，嘿，页面上什么也没有显示。打开浏览器的开发工具，您将看到由于CORS问题而导致请求失败。
![]()
这是因为我们的Angular应用程序和后端不在同一个域上——不同的端口相当于不同的域名。
解决CORS问题
要解决CORS问题，最简单的方法是完全避免跨域HTTP调用。大多数情况下，我们的前端和后端位于同一个域中，因此在生产中不存在任何CORS问题。这是一个开发时间问题，解决方案是利用Angular CLI的开发服务器的内置代理，让我们所有的HTTP调用都是相对的。
使我们的HTTP调用相对
取代http://localhost:3000/api/teams与/ api /团队组件内部:
teams$: Observable = this.http.get('/api/teams');
在生产中，这个请求会命中http://my-app.com/api/teams如果您的前端部署在my-app.com后端位于my-app.com/api．但是在开发过程中，请求会被击中http://localhost:4200/api/teams而我们的后端位于localhost: 3000 / api /团队．为了解决这个开发时间问题，让我们使用Angular CLI来设置一个代理。
创建代理配置对象
创建文件名proxy.conf.json在你的应用程序的根:
｛
" / api ": {
“目标”:“http://localhost: 3000”
｝
｝
打开angular.json文件并更新服务目标添加键/值对:“proxyConfig proxy.conf.json”
更新工作区配置文件以使用代理
｛
"服务":{
“建设者”:“@angular-devkit / build-angular: dev-server”,
"选项":{
“browserTarget”:“我的程序:构建”,
:“proxyConfig proxy.conf.json”
},
"配置":{
"生产":{
“browserTarget”:“我的程序:构建:生产”
｝
｝
｝
｝
使用此配置，在开发模式下，以/ api将转发至http://localhost:3000我们的模拟API所在的位置。不再有CORS问题，当我们将应用部署到生产环境时，不需要对Angular应用进行任何更改，就能让它与真正的后端一起工作。
重新启动服务器
重新启动服务器以考虑代理配置，并再次检查浏览器。
![]()
总结
在本文中，我们学习了如何利用JSON Server来构建模拟API。我们还学习了如何正确配置Angular应用，以利用CLI的内置代理来避免开发模式下的CORS问题。
