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