Electronic Joint Business

Solution for E-Business

axon

用 vert.x 和 angular.js 构建基础 Axon 框架示例

在邮件列表上我常看到不断有人在问哪可以找到基础示例,最好用到了 vert.x 。由于本人对 Axon 和 vert.x 都略知一二,所以我想略尽薄力。这里我基于 vert.x 创建了个非常基础的 Axon 应用1。它用来维护个人的“待办事项”。这些事项可通过连接的网络浏览器间查阅,用户可以创建新的“待办事项”,也可以把某个事项标为“完成”。

我在浏览 Devoxx 站点时,正好学习了一个 javascript 前端框架 AngularJS 。这对 vert.x 技术栈来说是个很棒的补强。之前我一直使用 Bootstrap 来完成前端的工作,所以这个框架用起来很是顺手。图1-1 演示了本应用的最终效果。如果你想知道这个应用是怎么创建的,请继续阅读。

概述
我们创建的是个待办事项的演示。我们希望可以在网上创建待办事项。待办事项可被存储,当其他人连接到这个 Web 应用时也可以看到相同的待办事项。一旦待办事项被更新,或者将它们标为“完成”,这些变动会被推至其他连接的浏览器。图1-2 给出了示例的设计架构。你可以从 github 上检出这个示例。你可以查阅示例中的 readme 文件来运行本示例。

图1-2 中中包含了大量信息。首先客户端(在本例中是浏览器)通过 vert.x 事件总线与后端通讯。创建新事项或者或标记事项“已完成”都是在总线上发送给某个端点的一条消息。这些消息被侦听该端点的处理器( handler) 检出。接着,处理器通过 Axon 网关发出相应的命令(command) 让命令处理器(command handler)进行后续步骤,命令处理器使用 ToDo 聚合体 (aggregate) 来完成实际操作。Axon 用事件来改变状态。这些事件也为 ToDo 事件侦听器所使用,该组件会发送消息给 vert.x 事件总线以持久化待办事项,还会发送消息给客户端在侦听的主题。在客户端上,我们通过 AngularJS 控制器注册了个侦听器来侦听这些 vert.x 事件并更新数据模型。所有的更改会为视图自动拾取并更改。

听起来挺复杂的,下面我们逐一对某些片段进行讲解。

>>> 阅读全文

 

, , , , , ,