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

上部分藍圖教程中咱們一塊兒探索瞭如何用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