Vert.x - SpringBoot 整合 vertx 使用 thymeleaf、freemarker 模板引擎

最新推荐文章于 2024-09-26 17:39:09 发布

原创最新推荐文章于 2024-09-26 17:39:09 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vertx

Vert.x 专栏收录该内容

5 篇文章

订阅专栏

一、模板引擎

在 SpringMVC 项目中使用模板引擎，使用较多的应该是 thymeleaf 及 freemarker 了吧，虽然现在前后端分离的浪潮已经席卷而来，但对于 SEO 或者页面静态话来说，后端的模板引擎还是具有一定的作用力。本篇文章继续上篇文章中搭建的 SpringBoot 项目中继续讲解，因此在看本篇文章之前，确保已经搭建了上篇文章的项目。

下面是上篇文章的地址：

https://blog.csdn.net/qq_43692950/article/details/124076793

下面分别对 thymeleaf 及 freemarker 的使用进行实践。

二、thymeleaf 模板引擎

首先引入 thymeleaf 模板引擎的依赖：

<dependency>
    <groupId>io.vertx</groupId>
    <artifactId>vertx-web-templ-thymeleaf</artifactId>
    <version>${vertx-version}</version>
    <classifier>shaded</classifier>
</dependency>

然后声明 thymeleaf 引擎：

@Bean
public ThymeleafTemplateEngine thymeleafTemplateEngine(Vertx vertx){
    return ThymeleafTemplateEngine.create(vertx);
}

在统一的 BaseVerticle 中声明引擎：

@Component
public abstract class BaseVerticle extends AbstractVerticle {
    @Autowired
    public Router router;

    @Autowired
    public ThymeleafTemplateEngine thymeleafTemplateEngine;
}

下面在resources 下新建 templates 目录，新建 index.html 文件：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<h1 th:text="'姓名：'+ ${name}"></h1>
<h1 th:text="'年龄：' + ${age}"></h1>
<h2>列表</h2>
<ul>
    <li th:each="item:${list}" th:text="${item}"></li>
</ul>
</body>
</html>

编写Verticle，渲染上面的 index.html

@Component
public class ThymeleafVerticle extends BaseVerticle {
    @Override
    public void start() throws Exception {
        router.get("/thymeleaf").handler(this::thymeleaf);
    }

    private void thymeleaf(RoutingContext ctx) {

        List<String> list = new ArrayList<>();
        for (int i = 1; i <= 10; i++) {
            list.add("序号：" + i);
        }

        JsonObject data = new JsonObject()
                .put("name", "小毕超")
                .put("age", "18")
                .put("list", list);

        thymeleafTemplateEngine.render(data, "templates/index.html", res -> {
            if (res.succeeded()) {
                ctx.response().putHeader("Content-Type", "text/html; charset=UTF-8").end(res.result());
            } else {
                ctx.fail(res.cause());
            }
        });
    }
}

下面启动 SpringBoot ，访问 http://localhost:8080/thymeleaf
在这里插入图片描述

三、freemarker 模板引擎

freemarker 模板引擎使用起来和 thymeleaf 基本相同：
引入 freemarker 模板引擎的依赖：

<dependency>
    <groupId>io.vertx</groupId>
    <artifactId>vertx-web-templ-freemarker</artifactId>
    <version>${vertx-version}</version>
    <classifier>shaded</classifier>
</dependency>

然后声明 freemarker 引擎：

@Bean
public FreeMarkerTemplateEngine freeMarkerTemplateEngine(Vertx vertx){
    return FreeMarkerTemplateEngine.create(vertx);
}

在统一的 BaseVerticle 中声明引擎：

@Component
public abstract class BaseVerticle extends AbstractVerticle {
    @Autowired
    public Router router;

    @Autowired
    public FreeMarkerTemplateEngine freeMarkerTemplateEngine;

    @Autowired
    public ThymeleafTemplateEngine thymeleafTemplateEngine;
}

下面在resources 下新建 templates 目录，新建 index.ftl 文件：

<!DOCTYPE html>
<html >
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<h1>${name}</h1>
<h1>${age}</h1>
<h2>列表</h2>

<ul>
    <#list list as item>
        <li>${item}</li>
    </#list>
</ul>

</body>
</html>

编写Verticle，渲染上面的 index.html

@Component
public class FreemarkerVerticle extends BaseVerticle {
    @Override
    public void start() throws Exception {
        router.get("/freemarker").handler(this::thymeleaf);
    }

    private void thymeleaf(RoutingContext ctx) {

        List<String> list = new ArrayList<>();
        for (int i = 1; i <= 10; i++) {
            list.add("序号：" + i);
        }

        JsonObject data = new JsonObject()
                .put("name", "小毕超")
                .put("age", "18")
                .put("list", list);

        freeMarkerTemplateEngine.render(data, "templates/index.ftl", res -> {
            if (res.succeeded()) {
                ctx.response().putHeader("Content-Type", "text/html;charset=UTF-8").end(res.result());
            } else {
                res.cause().printStackTrace();
                ctx.fail(res.cause());
            }
        });
    }
}

下面启动 SpringBoot ，访问 http://localhost:8080/freemarker
在这里插入图片描述

喜欢的小伙伴可以关注我的个人微信公众号，获取更多学习资料！