原文链接 https://logcorner.com/building-micro-services-through-event-driven-architecture-part15-spa-front-end/

在本教程中，我将展示如何使用angular构建SPA前端来发送命令和请求查询。

SPA前端使用commandAPI发送命令（创建、更新或删除语音），然后该命令将传输到Kafka服务总线，然后才可用于no-sql数据库 elasticsearch。

Query API将使用no-sql数据库elasticsearch来显示新创建的数据（在即将发布的教程中，我将使用Signalr Notification通知SPA前端更新屏幕）

要学习本教程，您应该熟悉angular。

环境变量

angular项目包含一个名为environments的文件夹。在这个文件夹中，我可以定义环境变量，例如：environment.test.ts来定义测试环境设置。

以下命令将使用测试环境运行构建

ng run build –configuration=test

在我的演示中，我将进入默认环境，即 dev (environment.ts)

npm run build 会默认使用这个环境。

这里我定义了命令Api端点和查询Api端点

语音服务

SpeechService使用来自@angular/common/http的HttpClient服务来发送POST、GET、PUT或DELETE请求

SpeechListComponent

SpeechListComponent调用SpeechService从查询Api中检索数据

SpeechCreateComponent

SpeechCreateComponent调用SpeechService向命令Api发送（POST）数据

测试

使用本地环境进行测试

搭建测试环境需要安装kafka，elastic search https://logcorner.com/building-microservices-through-event-driven-architecture-part12-produce-events-to-apache-kafka/

启动zookeeper

zookeeper-server-start.bat config\zookeeper.properties

启动kafka

kafka-server-start.bat config\server.properties

kafka-topics –zookeeper 127.0.0.1:2181 –topic Speech –create –partitions 3 –replication-factor 1

启动ElasticSearch 和 Kibana

bin/kibana

http://localhost:5601

启动服务总线

从此repo克隆代码：https://github.com/logcorner/LogCorner.EduSync.Speech.ServiceBus/tree/develop

启动命令API

从此repo克隆代码：https://github.com/logcorner/LogCorner.EduSync.Speech.Command/tree/develop

启动查询API

从此repo克隆代码：https://github.com/logcorner/LogCorner.EduSync.Speech.Query/tree/develop

启动前端

从此repo克隆代码：https://github.com/logcorner/LogCorner.EduSync.Speech.Front/tree/develop

使用docker测试

创建一个docker网络

docker network create speech_network

为基础设施（kafka、elasticsearch、生产者和消费者）构建和运行多容器docker应用程序 ……\LogCorner.EduSync.Speech.ServiceBus\src

docker-compose build
docker-compose up

为命令Api（sql server linux 和命令 Api）构建和运行多容器docker应用程序 …\LogCorner.EduSync.Speech.Command\src

docker-compose build
docker-compose up

为查询Api构建和运行多容器docker应用程序 ….\LogCorner.EduSync.Speech.Query\src

docker-compose build
docker-compose up

为前端SPA（nginx 和 angular 前端）构建并运行容器docker应用程序 …….\LogCorner.EduSync.Speech.Front\logcorner-edusync-speech

docker-compose build
docker-compose up

docker ps –all –format “table {{.ID}}\t{{.Image}}\t{{.Names}}\t{{.Ports}}”

http://localhost:4200/speech

代码源可在此处获得：

• https://github.com/logcorner/LogCorner.EduSync.Speech.Front/tree/develop

• https://github.com/logcorner/LogCorner.EduSync.Speech.Query/tree/develop

• https://github.com/logcorner/LogCorner.EduSync.Speech.Command/tree/develop

• https://github.com/logcorner/LogCorner.EduSync.Speech.ServiceBus/tree/develop