基于事件驱动架构构建微服务第15部分:SPA前端
原文链接 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
基于事件驱动架构构建微服务第15部分:SPA前端相关推荐
- 基于事件驱动架构构建微服务第1部分:应用程序特定的业务规则
原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part1-applicatio ...
- 基于事件驱动架构构建微服务第16部分:Azure Active Directory B2C
原文链接: https://logcorner.com/building-micro-services-through-event-driven-architecture-part16-azure-a ...
- 基于事件驱动架构构建微服务第14部分:查询API
原文链接:https://logcorner.com/building-micro-services-through-event-driven-architecture-part14-query-ap ...
- 基于事件驱动架构构建微服务第11部分:持续集成
原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part12-continuou ...
- 基于事件驱动架构构建微服务第10部分:在docker容器内运行单元测试
原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part11-run-unit- ...
- 基于事件驱动架构构建微服务第19部分:使用 SignalR 和 Azure Active Directory 构建和保护实时通信...
原文链接:https://logcorner.com/building-micro-services-through-event-driven-architecture-part19-building ...
- 基于事件驱动架构构建微服务第5部分:容器化(Web Api Core 和 SQL Server Linux)
原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part5-dockerizat ...
- 基于事件驱动架构构建微服务第13部分:使用来自Apache KAFKA的事件并将投影流传输到ElasticSearch...
原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part13-read-mode ...
- 基于事件驱动架构构建微服务第12部分:向Apache KAFKA生成事件
原文链接:https://logcorner.com/building-microservices-through-event-driven-architecture-part12-produce-e ...
最新文章
- LeetCode简单题之相对名次
- Biztalk发布web服务时遭遇'SoapExceptionInternal SOAP Processing Failure'错误
- CSS控制鼠标的箭头
- SonarQube4.4+Jenkins进行代码检查实例之一
- Find Integer(费马大定理的使用)
- java method 创建_java中创建对象的5种方式
- CAS单点登录 - 用户登录与校验
- uefi模式下win10安装双系统ubuntu18.04LTS
- 批处理命令Start
- 【图像处理】直方图均衡化(附带Matlab及OpenCV3自编程实现代码)
- uFrame近况(2016年4月8日更新)
- Atlas系列一:Atlas功能特点FAQ
- 笔记︱信用风险模型(申请评分、行为评分)与数据准备(违约期限、WOE转化)
- idm6.40最新版exe下载器介绍
- 【总结】最专业最系统的CV内容,有三AI所有免费与付费的计算机视觉课程汇总(2022年7月)...
- perf工具简介+火焰图制作与解读
- 数据恢复国赛经验与方法分享(电子产品芯片级检测维修与数据恢复赛项)
- Java-底层建筑-JVM-第3篇-StringTable
- 微信小程序开发入门篇(二)
- 第3周学习:ResNet+ResNeXt