Vert.x，Web - 静态资源/模板

news2024/11/24 8:26:40

静态资源

Vert.x-Web带有开箱即用的处理器(StaticHandler)，用于处理静态Web资源(.html, .css, .js, …)，因此可以非常轻松地编写静态Web服务器。
默认静态文件目录为类路径下的webroot目录，对于maven的项目，按规范放在src/main/resources/webroot下，但可以配置。例如:
在这里插入图片描述
Vert.x Web相关代码如下:

public class WebServer1 {
	public static void main(String[] args) {
		Vertx vertx = Vertx.vertx();
		HttpServer server = vertx.createHttpServer();
		Router router = Router.router(vertx);
		
		// StaticHandler来处理静态文件
		// 需要注意的是静态文件要放到webroot(resources/webroot)里面
		StaticHandler staticHander = StaticHandler
				.create()
				//.create("D:/www/test/") // 指定web-root, 注意Windows下的路径格式, 是"/", 而不是"\"
				.setCachingEnabled(true)
				.setDirectoryListing(false)
				.setIndexPage("index.html");
		router.route("/html/*").handler(staticHander);
		server.requestHandler(router).listen(8080);
	}
}

index.html的代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Hello Vert.X</title>
  <link rel="stylesheet" href="./static/layui/css/layui.css">
  <script src="./static/layui/layui.js"></script>
</head>
<body>
  <div class="layui-container">
    <div class="layui-row layui-col-space12" style="margin-top: 18px;"></div>
    <div class="layui-card">
      <div class="layui-card-header" style="background-color: #dddddd;"><b>Hello Vert.x Web</b></div>
      <div class="layui-card-body">Vert.x-Web is a set of building blocks for building web applications with Vert.x.</div>
    </div>
  </div>
  </div>
</body>
</html>

通过浏览器访问http://127.0.0.1:8080/html/，浏览器返回index.html页面的内容。
在这里插入图片描述

模板

Vert.x Web为若干流行的模板引擎提供了开箱即用的支持，通过这种方式来提供生成动态页面的能力。TemplateEngine定义了使用模板引擎的接口。当渲染模板时会调用render方法。

最简单的使用模板的方式不是直接调用模板引擎，而是使用模板处理器TemplateHandler。这个处理器会根据 HTTP 请求的路径来调用模板引擎。

缺省情况下，模板处理器会在类路径下的templates目录中查找模板文件。这是可以配置的。该处理器会返回渲染的结果，并默认设置Content-Type消息头为text/html 。这也是可以配置的。

Vert.x Web提供了每一种模板引擎的配置。使用模板引擎需要先引入对应依赖，并在创建模板处理器时提供所使用的模板引擎实例。接下来以使用Thymeleaf模板引擎为例，首先需要在maven项目中引入依赖：

<dependency>
	<groupId>io.vertx</groupId>
	<artifactId>vertx-web-templ-thymeleaf</artifactId>
	<version>4.5.10</version>
</dependency>

注意，对于Thymeleaf模板引擎，不同版本的用法是有比较大的区别的，网上很多案例都是基于4.x版本之前的。4版本的用法建议参考github上的官方案例"vertx-examples-4.x"。

以下写个thymeleaf模板，并进行渲染，模板存放目录: webroot/templates/thymeleaf/
在这里插入图片描述
Vert.x Web相关代码:

ThymeleafTemplateEngine engine = ThymeleafTemplateEngine.create(vertx);
router.route("/thy/hello.html").handler(routingContext -> {
	JsonObject data = new JsonObject()
			.put("osName", System.getProperty("os.name"))
			.put("osArch", System.getProperty("os.arch"))
			.put("osVersion", System.getProperty("os.version"))
			.put("jvmName", System.getProperty("java.runtime.name"))
			.put("jvmVersion", System.getProperty("java.runtime.version"));
	engine.render(data, "webroot/templates/thymeleaf/hello-templ.html", ar -> { // 模板位置
		if (ar.succeeded()) {
			routingContext.response().end(ar.result());
		} else {
			routingContext.fail(ar.cause());
		}
	});
});

模板相关代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Hello Vert.X</title>
	<link rel="stylesheet" href="../html/static/layui/css/layui.css">
	<script src="../html/static/layui/layui.js"></script>
</head>
<body>
	<div class="layui-container">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md8">
				<table class="layui-table">
					<thead>
						<tr style="background-color: #94BDD8;">
							<th>服务器属性</th><th>属性值</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>OS Info</td><td th:text="${osName} + ', ' + ${osVersion} + ', ' + ${osArch}"></td>
						</tr>
						<tr>
							<td>JVM Info</td><td th:text="${jvmName} + ', ' + ${jvmVersion} "></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>