Vert.x Thymeleaf 模板引擎入门

编程教程 > Java > Vert.x (277) 2024-11-26 14:39:04

前言

创建一个常规的web项目肯定需要一个模板引擎来实现，引用之前的项目《Vert.x 4 Web应用初识》基础结构

目前vert.x支持多款模板引擎，包括：

MVEL template engine
Jade template engine
Handlebars template engine
Thymeleaf template engine
Apache FreeMarker template engine
Pebble template engine
Rocker template engine
HTTL template engine
Rythm template engine
JTE template engine

这里主要讲解一个Java编程熟悉的模板引擎Thymeleaf

项目结构

Vert.x Thymeleaf 模板引擎入门_图示-4ee1c543d4b84aedafb592f760b1cf70.png — 项目结构

引入模板引擎依赖

maven pom.xml

<dependency>
  <groupId>io.vertx</groupId>
  <artifactId>vertx-web-templ-thymeleaf</artifactId>
  <version>4.5.9</version>
</dependency>

Vert.x Thymeleaf模板引擎使用

创建模板引擎和模板引擎处理器

这里模板引擎以Thymeleaf为例，编辑MainVerticle

代码聚焦

    TemplateEngine templateEngine= ThymeleafTemplateEngine.create(vertx);
    TemplateHandler templateHandler = TemplateHandler
      .create(templateEngine);
//      .create(templateEngine,"templates","text/html");

单个路径映射和处理

代码聚焦

//路径模板一对一映射
router.get("/about.html").handler(ctx->{
  ctx.put("hello","hello world");
  templateEngine.render(ctx.data(),"templates/about.html",bufferAsyncResult -> {
    // 如果模板解析成功，就将结果写到response
    if (bufferAsyncResult.succeeded()) {
      ctx.response().putHeader("Content-Type", "text/html").end(bufferAsyncResult.result());
    } else {  // 如果解析失败，就显示fail
      ctx.fail(bufferAsyncResult.cause());
    }
  });
});

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>about</title>
</head>
<body>
<h1 th:text="${hello}"></h1>
<th:block th:insert="~{templates/common.html::desc}"></th:block>
</body>
</html>

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="desc">
  <p>
    我是一段简单的介绍，每个页面都可以th:insert="~{common::desc}"引入哟
  </p>
</th:block>

注意上方代码，暂未使用templateHandler

使用浏览器访问 http://localhost:8080/about.html

Vert.x Thymeleaf 模板引擎入门_图示-0bab0cf080e14e93a67fc9d7af4dc41c.png

访问结果与预期一致。

不支持以下写法【红色提示】

router.get("/address.html").handler(ctx->{
  ctx.put("hello","hello world");
  ctx.next();
}).handler(templateHandler);

以上写法并不能将 /address.html 映射到 templates目录下address.html文件。

源码剖析

Vert.x Thymeleaf 模板引擎入门_图示-f040a096729348d88515f49de1b5a076.png — TemplateHandlerImpl实现类

TemplateHandlerImpl实现类中调用了一个处理文件路径的方法

Vert.x Thymeleaf 模板引擎入门_图示-22ec6f98dadf4ee6a923a9670ed8ddb0.png — 文件处理工具

方法中有个坑，非正则匹配的这里会截取路径全部，导致上面的file拿到 “”空串然后 TemplateHandlerImpl 调用模板引擎渲染时候路径拼接无法找到

Vert.x Thymeleaf 模板引擎入门_图示-520f27bbdcc14f7d8cd7e20385e80d70.png

正则匹配同时处理多个路径模板

上面一对一没用到TemplateHandler

TemplateHandler templateHandler = TemplateHandler
  .create(templateEngine);

这里正则匹配多个会用到，下面为正则匹配对应路径开头的最后都要走模板解析器处理

//指定目录映射动态模板
router.get("/dynamic/*").last().handler(templateHandler);

//指定后缀映射动态模板
router.getWithRegex(".+\\.html").last().handler(templateHandler);

注意：必须加last()排序到最后，否则可能设定了参数因排序问题导致解析失败或报错。

对应目录使用路径参考代码

router.get("/product/detail.html").handler(ctx->{
  ctx.put("hello","hello world");
  ctx.next();
});

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>product - detail</title>
</head>
<body>
<h1 th:text="${hello}"></h1>
<th:block th:insert="~{templates/common.html::desc}"></th:block>
</body>
</html>