首页 /  技术专区  /  Vert.x 宽屏模式 >

Vert.x整合前端模板

Vert.x-Web通过包括对几种流行的模板引擎的开箱即用的支持,包括动态页面生成功能。您也可以轻松添加自己的。

模板引擎由描述TemplateEngine为了渲染模板 render被使用。

使用模板的最简单方法不是直接调用模板引擎,而是使用 TemplateHandler该处理程序根据HTTP请求中的路径为您调用模板引擎。

默认情况下,模板处理程序将在名为的目录中查找模板templates可以配置。

处理程序将text/html默认使用内容类型返回渲染结果也可以配置。

创建模板处理程序时,您传入所需的模板引擎实例。模板引擎未嵌入vertx-web中,因此,您需要配置项目以访问它们。为每个模板引擎提供了配置。


1、引入依赖

这里thymeleaf需要slf4j的依赖,但是他却自己没有导入,需要我们手动添加。

<dependency>
  <groupId>io.vertx</groupId>
  <artifactId>vertx-web-templ-thymeleaf</artifactId>
</dependency>
<dependency>
  <groupId>org.slf4j</groupId>
  <artifactId>slf4j-log4j12</artifactId>
  <version>1.7.30</version>
</dependency>


2、编写TemplateVerticle程序

package vertx;

import io.vertx.core.AbstractVerticle;
import io.vertx.core.Promise;
import io.vertx.core.json.JsonObject;
import io.vertx.ext.web.Router;
import io.vertx.ext.web.templ.thymeleaf.ThymeleafTemplateEngine;

public class TemplateVerticle extends AbstractVerticle {

  //声明Router
  Router router;

  //第一步 声明ThymeleafTemplateEngine
  ThymeleafTemplateEngine thymeleafTemplateEngine;

  @Override
  public void start(Promise<Void> startPromise) throws Exception {

    //初始化Router
    router = Router.router(vertx);

    //第二步 初始化ThymeleafTemplateEngine
    thymeleafTemplateEngine = ThymeleafTemplateEngine.create(vertx);

    //配置Router解析url
    router.route("/").handler(
      req -> {
        var obj = new JsonObject();
        obj.put("name", "Hello World from backend");

        //第三步 ThymeleafTemplateEngine 直接 render
        thymeleafTemplateEngine.render(obj,
          "templates/index.html",
          bufferAsyncResult -> {
            if (bufferAsyncResult.succeeded()){
              req.response()
                .putHeader("content-type", "text/html")
                .end(bufferAsyncResult.result());
            }else{
              System.out.println("error");
            }
        });
      }
    );

    //将Router与vertx HttpServer 绑定
    vertx.createHttpServer().requestHandler(router).listen(8888, http -> {
      if (http.succeeded()) {
        startPromise.complete();
        System.out.println("HTTP server started on port 8888");
      } else {
        startPromise.fail(http.cause());
      }
    });
  }
}

3、需要在resources下面新建templates文件夹,并新建index.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1 th:text="${name}"></h1>
</body>
</html>

4、启动测试

image.png



头像
0/200
图片验证码