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

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

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

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

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

環(huán)境變量

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

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

ng run build –configuration=test

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

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

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

語(yǔ)音服務(wù)

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

SpeechListComponent

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

SpeechCreateComponent

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

測(cè)試

使用本地環(huán)境進(jìn)行測(cè)試

搭建測(cè)試環(huán)境需要安裝kafka，elastic search https://logcorner.com/building-microservices-through-event-driven-architecture-part12-produce-events-to-apache-kafka/

啟動(dòng)zookeeper

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

啟動(dòng)kafka

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

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

啟動(dòng)ElasticSearch 和 Kibana

bin/kibana

http://localhost:5601

啟動(dòng)服務(wù)總線

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

啟動(dòng)命令A(yù)PI

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

啟動(dòng)查詢API

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

啟動(dòng)前端

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

使用docker測(cè)試

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

docker?network?create?speech_network

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

docker-compose?build docker-compose?up

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

docker-compose?build docker-compose?up

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

docker-compose?build docker-compose?up

為前端SPA（nginx 和 angular 前端）構(gòu)建并運(yùn)行容器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前端的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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