首页 /  技术专区  /  Vert.x 宽屏模式 >

Vert.x整合静态资源

Vert.x-Web带有开箱即用的处理程序,用于提供静态Web资源,因此您可以非常轻松地编写静态Web服务器。

服务静态资源,如.html.css.js或任何其他静态资源,您使用的一个实例 StaticHandler

对静态处理程序处理的路径的任何请求都将导致文件从文件系统上的目录或类路径提供。默认静态文件目录为,webroot但是可以配置。

在以下示例中,所有对以开头的路径的请求/static/都将从目录中得到webroot

router.route("/static/*").handler(StaticHandler.create());


例如,如果存在带有路径/static/css/mystyles.css请求,则静态服务将在directory中查找文件webroot/css/mystyle.css

它还会在类路径上查找名为的文件webroot/css/mystyle.css这意味着您可以将所有静态资源打包到一个jar文件(或fatjar)中,然后像这样分发它们。

当Vert.x首次在类路径中找到资源时,它将提取该资源并将其缓存在磁盘上的临时目录中,因此不必每次都这样做。

处理程序将处理范围感知的请求。当客户端向静态资源发出请求时,处理程序将通过在Accept-Ranges标头上声明单元来通知其可以处理范围感知的请求包含Range具有正确单位以及开始和结束索引标头的其他请求将接收具有正确Content-Range标头的部分响应


1、编写StaticFileVerticle程序

package vertx;

import io.vertx.core.AbstractVerticle;
import io.vertx.core.Promise;
import io.vertx.core.json.JsonObject;
import io.vertx.ext.web.Router;
import io.vertx.ext.web.handler.StaticHandler;
import io.vertx.ext.web.templ.thymeleaf.ThymeleafTemplateEngine;

public class StaticFileVerticle extends AbstractVerticle {

  //声明Router
  Router router;

  //声明ThymeleafTemplateEngine
  ThymeleafTemplateEngine thymeleafTemplateEngine;

  @Override
  public void start(Promise<Void> startPromise) throws Exception {

    //初始化Router
    router = Router.router(vertx);

    //初始化ThymeleafTemplateEngine
    thymeleafTemplateEngine = ThymeleafTemplateEngine.create(vertx);

    //整合静态资源 第一步
    router.route("/static/*").handler(StaticHandler.create());

    //配置Router解析url
    router.route("/").handler(
      req -> {
        var obj = new JsonObject();
        obj.put("name", "Hello World from backend");

        //ThymeleafTemplateEngine 直接 render
        thymeleafTemplateEngine.render(obj,
          "templates/index.html",
          bufferAsyncResult -> {
            if (bufferAsyncResult.succeeded()){
              req.response()
                .putHeader("content-type", "text/html")
                .end(bufferAsyncResult.result());
            }else{
              System.out.println("error");
            }
          });
      }
    );

    //将Router与vertx HttpServer 绑定
    vertx.createHttpServer().requestHandler(router).listen(8888, http -> {
      if (http.succeeded()) {
        startPromise.complete();
        System.out.println("HTTP server started on port 8888");
      } else {
        startPromise.fail(http.cause());
      }
    });
  }
}

2、在resources新建webroot文件夹,下面复制bootstrap.min.css,bootstrap.min.css文件这里我就不提供了,你也可以写自己的css,如果需要的朋友可以在下面留言给我,我私发给你。

image.png

3、修改templates下面index.html文件,引入bootstrap.min.css,并加入样式。

<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/static/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">ok</button>
    <h1 th:text="${name}"></h1>
  </div>
</body>
</html>

4、启动测试

image.png

样式生效,操作成功。


改用自定义访问路径

//整合静态资源 第一步
//router.route("/static/*").handler(StaticHandler.create());
//整合静态资源 自定义访问路径
router.route("/*").handler(StaticHandler.create());

html中也要修改

<link rel="stylesheet" href="/bootstrap.min.css" />

这样就可以直接访问不用加static了

image.png



头像
0/200
图片验证码