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

在本教程中，我將展示如何使用angular構(gòu)建SPA前端來發(fā)送命令和請求查詢。

SPA前端使用commandAPI發(fā)送命令（創(chuàng)建、更新或刪除語音），然后該命令將傳輸?shù)終afka服務(wù)總線，然后才可用于no-sql數(shù)據(jù)庫 elasticsearch。

Query API將使用no-sql數(shù)據(jù)庫elasticsearch來顯示新創(chuàng)建的數(shù)據(jù)（在即將發(fā)布的教程中，我將使用Signalr Notification通知SPA前端更新屏幕）

要學(xué)習(xí)本教程，您應(yīng)該熟悉angular。

環(huán)境變量

angular項目包含一個名為environments的文件夾。在這個文件夾中，我可以定義環(huán)境變量，例如：environment.test.ts來定義測試環(huán)境設(shè)置。

以下命令將使用測試環(huán)境運行構(gòu)建

ng run build –configuration=test

在我的演示中，我將進入默認環(huán)境，即 dev (environment.ts)

npm run build 會默認使用這個環(huán)境。

這里我定義了命令A(yù)pi端點和查詢Api端點

語音服務(wù)

SpeechService使用來自@angular/common/http的HttpClient服務(wù)來發(fā)送POST、GET、PUT或DELETE請求

SpeechListComponent

SpeechListComponent調(diào)用SpeechService從查詢Api中檢索數(shù)據(jù)

SpeechCreateComponent

SpeechCreateComponent調(diào)用SpeechService向命令A(yù)pi發(fā)送（POST）數(shù)據(jù)

測試

使用本地環(huán)境進行測試

搭建測試環(huán)境需要安裝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

啟動服務(wù)總線

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

啟動命令A(yù)PI

從此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測試

創(chuàng)建一個docker網(wǎng)絡(luò)

docker?network?create?speech_network

為基礎(chǔ)設(shè)施（kafka、elasticsearch、生產(chǎn)者和消費者）構(gòu)建和運行多容器docker應(yīng)用程序 ……\LogCorner.EduSync.Speech.ServiceBus\src

docker-compose?build docker-compose?up

為命令A(yù)pi（sql server linux 和命令 Api）構(gòu)建和運行多容器docker應(yīng)用程序 …\LogCorner.EduSync.Speech.Command\src

docker-compose?build docker-compose?up

為查詢Api構(gòu)建和運行多容器docker應(yīng)用程序 ….\LogCorner.EduSync.Speech.Query\src

docker-compose?build docker-compose?up

為前端SPA（nginx 和 angular 前端）構(gòu)建并運行容器docker應(yīng)用程序 …….\LogCorner.EduSync.Speech.Front\logcorner-edusync-speech

docker-compose?build docker-compose?updocker?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

總結(jié)

以上是生活随笔為你收集整理的基于事件驱动架构构建微服务第15部分：SPA前端的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。