首页 > 代码库 > vert.x学习（六），动态模板与静态文件的结合

vert.x学习（六），动态模板与静态文件的结合

2024-08-28 08:34:39   219人阅读

这篇学习在动态模板里面引入css，把动态模板与静态文件结合起来使用。

编写DynamicReference.java

package com.javafm.vertx.helloworld;

import io.vertx.core.Vertx;
import io.vertx.core.http.HttpServer;
import io.vertx.ext.web.Router;
import io.vertx.ext.web.handler.StaticHandler;
import io.vertx.ext.web.templ.ThymeleafTemplateEngine;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

/**
 * Created by lemontea <36634584@qq.com> on 16-12-20.
 */
public class DynamicReference {
    public static void main(String[] args) {
        Vertx vertx = Vertx.vertx();

        ThymeleafTemplateEngine engine = ThymeleafTemplateEngine.create();
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        resolver.setPrefix("templates");
        resolver.setSuffix(".html");
        resolver.setTemplateMode("HTML5");
        engine.getThymeleafTemplateEngine().setTemplateResolver(resolver);

        Router router = Router.router(vertx);

        // 配置动态文件访问路径
        router.route("/hello").handler(routingContext -> {
            routingContext.put("msg", "DynamicReference.");
            engine.render(routingContext, "/hello", res -> {
                if (res.succeeded()) {
                    routingContext.response().putHeader("Content-Type", "text/html").end(res.result());
                } else {
                    routingContext.fail(res.cause());
                }
            });
        });

        // 配置静态文件
        router.route("/*").handler(StaticHandler.create());

        HttpServer httpServer = vertx.createHttpServer();
        httpServer.requestHandler(router::accept).listen(8080);
    }
}

在这里通过/*来匹配所有的静态文件，而动态模板，则用单个的route来配置，这里是/hello

编写动态模板文件resources/templates/hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--在动态模板里面引用静态css文件-->
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1 th:text="${msg}"></h1>
</body>
</html>

在这里引入了一个style.css文件，给h1标签设置了颜色样式。这个css文件与上篇学习中的css文件是同一个。

运行http服务，在浏览器查看效果

技术分享

我们可以看到，访问动态页面的时候，为msg设置了值，并且引用了静态css文件。

 

原创文章，转载请注明出处。

vert.x学习（六），动态模板与静态文件的结合


联系
我们