首页 > 编程学习 > Vert.x - SpringBoot 整合 vertx 使用 thymeleaf、freemarker 模板引擎

一、模板引擎

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

下面是上篇文章的地址:

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

下面分别对 thymeleaffreemarker 的使用进行实践。

二、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 {@Autowiredpublic Router router;@Autowiredpublic 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 {@Overridepublic 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 {@Autowiredpublic Router router;@Autowiredpublic FreeMarkerTemplateEngine freeMarkerTemplateEngine;@Autowiredpublic 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 {@Overridepublic 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
在这里插入图片描述
在这里插入图片描述
喜欢的小伙伴可以关注我的个人微信公众号,获取更多学习资料!


本文链接:https://www.ngui.cc/zz/1443312.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000