原文链接 /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 /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克隆代码：/logcorner/LogCorner.EduSync.Speech.ServiceBus/tree/develop
启动命令API
从此repo克隆代码：/logcorner/LogCorner.mand/tree/develop
启动查询API
从此repo克隆代码：/logcorner/LogCorner.EduSync.Speech.Query/tree/develop
启动前端
从此repo克隆代码：/logcorner/LogCorner.EduSync.Speech.Front/tree/develop
使用docker测试
创建一个docker网络
dockernetworkcreatespeech_network
为基础设施（kafka、elasticsearch、生产者和消费者）构建和运行多容器docker应用程序 ……\LogCorner.EduSync.Speech.ServiceBus\src
docker-composebuilddocker-composeup
为命令Api（sql server linux 和命令 Api）构建和运行多容器docker应用程序 …\LogCorner.mand\src
docker-composebuilddocker-composeup
为查询Api构建和运行多容器docker应用程序 ….\LogCorner.EduSync.Speech.Query\src
docker-composebuilddocker-composeup
为前端SPA（nginx 和 angular 前端）构建并运行容器docker应用程序 …….\LogCorner.EduSync.Speech.Front\logcorner-edusync-speech
docker-composebuilddocker-composeup
dockerps–all–format“table{{.ID}}\t{{.Image}}\t{{.Names}}\t{{.Ports}}”
http://localhost:4200/speech
代码源可在此处获得：
/logcorner/LogCorner.EduSync.Speech.Front/tree/develop
/logcorner/LogCorner.EduSync.Speech.Query/tree/develop
/logcorner/LogCorner.mand/tree/develop
/logcorner/LogCorner.EduSync.Speech.ServiceBus/tree/develop
