这篇学习在动态模板里面引入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

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

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

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

 

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