Vert.x Blueprint 系列教程(二) | Vert.x Kue 教程（Web部分）

Kerr1Gan 發布于2019-08-14 14:21 / 3296人閱讀

摘要：上部分藍圖教程中我們一起探索了如何用開發一個基于消息的應用。對部分來說，如果看過我們之前的藍圖待辦事項服務開發教程的話，你應該對這一部分非常熟悉了，因此這里我們就不詳細解釋了。有關使用實現的教程可參考藍圖待辦事項服務開發教程。

上部分藍圖教程中我們一起探索了如何用Vert.x開發一個基于消息的應用。在這部分教程中，我們將粗略地探索一下kue-http模塊的實現。

Vert.x Kue REST API

kue-http模塊中只有一個類KueHttpVerticle，作為整個REST API以及UI服務的實現。對REST API部分來說，如果看過我們之前的 Vert.x 藍圖 | 待辦事項服務開發教程的話，你應該對這一部分非常熟悉了，因此這里我們就不詳細解釋了。有關使用Vert.x Web實現REST API的教程可參考 Vert.x 藍圖 | 待辦事項服務開發教程。

將Kue UI與Vert.x Web進行適配

除了REST API之外，我們還給Vert.x Kue提供了一個用戶界面。我們復用了 Automattic/Kue 的用戶界面所以我們就不用寫前端代碼了（部分API有變動的地方我已進行了修改）。我們只需要將前端代碼與Vert.x Web適配即可。

首先，前端的代碼都屬于靜態資源，因此我們需要配置路由來允許訪問靜態資源：

router.route().handler(StaticHandler.create(root));

這樣我們就可以直接訪問靜態資源咯～

注意到Kue UI使用了Jade（最近貌似改名叫Pug了）作為模板引擎，因此我們需要一個Jade模板解析器。好在Vert.x Web提供了一個Jade模板解析的實現: io.vertx:vertx-web-templ-jade，所以我們可以利用這個實現來渲染UI。首先在類中定義一個JadeTemplateEngine并在start方法中初始化：

engine = JadeTemplateEngine.create();

然后我們就可以寫一個處理器方法來根據不同的任務狀態來渲染UI：

private void render(RoutingContext context, String state) {
  final String uiPath = "webroot/views/job/list.jade"; // (1)
  String title = config().getString("kue.ui.title", "Vert.x Kue");
  kue.getAllTypes()
    .setHandler(resultHandler(context, r -> {
      context.put("state", state) // (2)
        .put("types", r)
        .put("title", title);
      engine.render(context, uiPath, res -> { // (3)
        if (res.succeeded()) {
          context.response()
            .putHeader("content-type", "text/html") // (4)
            .end(res.result());
        } else {
          context.fail(res.cause());
        }
      });
    }));
}

首先我們需要給渲染引擎指定我們前端代碼的地址 (1)。然后我們從Redis中獲取其中所有的任務類型，然后向解析器context中添加任務狀態、網頁標題、任務類型等信息供渲染器渲染使用 (2)。接著我們就可以調用engine.render(context, path, handler)方法進行渲染 (3)。如果渲染成功，我們將頁面寫入HTTP Response (4)。

現在我們可以利用render方法去實現其它的路由函數了：

private void handleUIActive(RoutingContext context) {
  render(context, "active");
}

然后我們給它綁個路由就可以了：

router.route(KUE_UI_ACTIVE).handler(this::handleUIActive);

是不是非常方便呢？不僅如此，Vert.x Web還提供了其它各種模板引擎的支持，比如 FreeMaker, Pebble 以及 Thymeleaf 3。如果感興趣的話，你可以查閱官方文檔來獲取詳細的使用指南。

展示時間！

是不是等不及要看UI長啥樣了？現在我們就來展示一下！首先構建項目：

gradle build

kue-http需要kue-core運行著（因為kue-core里注冊了Event Bus服務），因此我們先運行kue-core，再運行kue-http。不要忘記運行Redis:

redis-server
java -jar kue-core/build/libs/vertx-blueprint-kue-core.jar -cluster -ha -conf config/config.json
java -jar kue-http/build/libs/vertx-blueprint-kue-http.jar -cluster -ha -conf config/config.json

為了更好地觀察任務處理的流程，我們再運行一個示例：

java -jar kue-example/build/libs/vertx-blueprint-kue-example.jar -cluster -ha -conf config/config.json

好啦！現在在瀏覽器中訪問http://localhost:8080，我們的Kue UI就呈現在我們眼前啦！

My Blog: 「千載弦歌，芳華如夢」 - sczyh30"s blog

GPU云服務器云服務器 vert.x linux系列教程云服務器建站教程系列 web建站教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/64954.html

Vert.x Blueprint 系列教程(二) | 開發基于消息的應用 - Vert.x Kue

摘要：本文章是藍圖系列的第二篇教程。這就是請求回應模式。好多屬性我們一個一個地解釋一個序列，作為的地址任務的編號任務的類型任務攜帶的數據，以類型表示任務優先級，以枚舉類型表示。默認優先級為正常任務的延遲時間，默認是任務狀態，以枚舉類型表示。本文章是 Vert.x 藍圖系列的第二篇教程。全系列： Vert.x Blueprint 系列教程(一) | 待辦事項服務開發教程 Vert.x B...

elina 2019-08-14 14:23 評論0 收藏0
Vert.x Blueprint 系列教程(一) | 待辦事項服務開發教程

摘要：本文章是藍圖系列的第一篇教程。是事件驅動的，同時也是非阻塞的。是一組負責分發和處理事件的線程。注意，我們絕對不能去阻塞線程，否則事件的處理過程會被阻塞，我們的應用就失去了響應能力。每個負責處理請求并且寫入回應結果。本文章是 Vert.x 藍圖系列的第一篇教程。全系列： Vert.x Blueprint 系列教程(一) | 待辦事項服務開發教程 Vert.x Blueprint 系...

frank_fun 2019-08-14 14:08 評論0 收藏0
Vert.x Blueprint 系列教程(三) | Micro-Shop 微服務應用實戰

摘要：本教程是藍圖系列的第三篇教程，對應的版本為。提供了一個服務發現模塊用于發布和獲取服務記錄。前端此微服務的前端部分，目前已整合至組件中。監視儀表板用于監視微服務系統的狀態以及日志統計數據的查看。而服務則負責發布其它服務如服務或消息源并且部署。本文章是 Vert.x 藍圖系列的第三篇教程。全系列： Vert.x Blueprint 系列教程(一) | 待辦事項服務開發教程 Vert....

QiShare 2019-08-14 14:36 評論0 收藏0
Vert.x入坑須知（4）

摘要：主要是避免引入太多的復雜性，并且出于靈活部署的需要。以應用為例，由于實際上是在上執行，若它被阻塞，即導致后續請求全部無法得到處理。因此，最合適的做法就是對于簡單業務，采用異步庫。本系列其他文章入坑須知入坑須知入坑須知最開始覺得這個系列也就最多3篇了不起了（因為事不過三嘛），沒曾想居然迎來了第四篇！ Kotlin 由于最近決定投身到區塊鏈的學習當中的緣故，出于更好的理解它的基本概念，自...

summerpxy 2019-08-15 15:45 評論0 收藏0
使用Vert.x構建Web服務器和消息系統

摘要：而不是開始，將服務使用多線程的請求重量級的容器。是啟動多個輕便單線程的服務器和流量路由到他們。亮點應用程序是事件驅動，異步和單線程的。通過使用事件總線傳遞消息通信。為了建立一個消息系統，則需要獲得該事件總線。摘要如果你對Node.js感興趣，Vert.x可能是你的下一個大事件：一個建立在JVM上一個類似的架構企業制度。這一部分介紹Vert.x是通過兩個動手的例子（基于Vert.x...

DrizzleX 2019-08-14 14:06 評論0 收藏0