这篇学习在动态模板里面引入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学习（六），动态模板与静态文件的结合的更多相关文章

  1. 我的django之旅（二）模板和静态文件

    我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...

  2. django模板和静态文件

    1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个网页,那么工作量就会十分巨大.模板是一种方便的标签,存在于HTML文件中,我 ...

  3. Djanjo 的app 模板路径 静态文件 完整版登录 新手三件套 以及orm

    一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册 二:模板路径配置: 1 templates文件夹 ...

  4. Django学习（6）配置静态文件

      本文将详细讲述如何在Django中配置静态文件,如图片(images),JavaScript,CSS等.   我们将要实现的网页如下: 当按下按钮"Change Text"时, ...

  5. django 模板使用静态文件

    1.新建项目 2.新建app,并在install_app中添加该app 3.和app文件夹并列新建static.和TEMPLATES  文件夹,分别放静态文件和模板 4.setting.py中设置 T ...

  6. Django app安装，配置mysql，时区，模板，静态文件，媒体，admin

    1.创建app python manage.py startapp 名字 Migrations 数据库同步目录,记录数据库同步的记录 init 包文件 Admin.py django自带的后台管理文件 ...

  7. 【spring】ApplicationListener传递参数到页面（解决静态+动态资源路径+静态文件的缓存控制）

    一.相对路径还是绝对路径的问题 前端页面加载资源或者请求的时候到底是使用相对路径还是绝对路径,想必大家都很清楚,用的是当然是相对路径,因为这样增加了项目的灵活性,不需要经常的改动.那既然是相对路径就需 ...

  8. flask 安装及基础学习（url_for反转，静态文件引入）

    pip3 install flask pycharm 创建项目 默认的代码解释说明(及开启debug模式) #encoding:utf-8 from flask import Flask #从flas ...

  9. ASP.NET Core 2 学习笔记（五）静态文件

    之前的ASP.NET网站,只要把*.html.*.css.*.jpg.*.png.*.js等静态文件放在项目根目录,默认都可以直接被浏览:但ASP.NET Core 小改了浏览静态文件的方式,默认根目 ...

随机推荐

  1. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  2. ASP.NET知识总结（2.对比Get和Post提交方式）

    2.对比Get和Post提交方式 get:<1>在地址栏中通过?key1=value1&key2=value2...的方式传值 <2>传递的数据用户可以直接在url中看 ...

  3. [译]SQL Server分析服务的权限配置

    简介: 本文介绍如何配置SSAS数据库和cube相关维度的安全设置. 相对数据引擎来说,在Management Studio中配置分析服务的安全设置基本没什么区别.但是也会有一些限制,比如SSAS的权 ...

  4. [笔记]HTML

    链接 <a href="链接地址">链接显示名</a> <a name="C4">target</a> < ...

  5. linux 使用命令笔记

    这篇随笔用来记载常用的 linux 终端命令 1． 重命名 方案a. mv old.c new.c     //正规命令,把old.c 重命名为: new.c 方案b. cp old.c new.c ...

  6. AutoCompleteTextView自动补全文本框

    AutoCompleteTextView的作用是在输入框中输入我们想要输入的信息,就会出现其他与其相关的提示信息 下面是实例代码: MainActivity.java package com.shao ...

  7. 廖雪峰js教程笔记14 file文件操作

    在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file" ...

  8. 什么是shell

    Shell本身是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释和执行用户输入的命令:作为程序设计语言,它定义了各种 ...

  9. Git Merge Commit忘了选分支？数据丢失？ 刚刚做的都丢失了？别急！

    1.打开终端,进入到对应的git 目录,也就是你的项目目录. 2.然后输入 git reflog,找到自己commit的版本 3.根据对应的编码输入指令,如:git checkout e53fa44( ...

  10. JS:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...