将HTML模板嵌入到AXUM应用
本章我们讨论如何将HTML模板嵌入到AXUM应用的二进制文件中。
目标
依赖
[dependencies]
tokio = { version = "1", features = ["full"] }
axum = { version = "0.7" }
serde = { version = "1", features = ["derive"] }
chrono = { version = "0.4", features = ["serde"] }
rust-embed = "8.5"
askama = "0.12"
// src/main.rs
use askama::Template;
use axum::{response::Html, routing::get, Router};
use chrono::Local;
use rust_embed::Embed;
#[derive(Embed)]
#[folder = "templates/"]
struct Asset;
#[derive(Template)]
#[template(path = "index.html")]
struct IndexTemplate {
now: String,
}
#[tokio::main]
async fn main() {
let tcp_listener = tokio::net::TcpListener::bind("0.0.0.0:9527").await.unwrap();
let app = Router::new().route("/", get(index_handler));
axum::serve(tcp_listener, app).await.unwrap();
}
async fn index_handler() -> Html<String> {
let tmp = IndexTemplate {
now: Local::now().format("%Y-%m-%d %H:%M:%S").to_string(),
};
Html(tmp.render().unwrap())
}
声明需要嵌入二进制文件中的资源目录
#[derive(Embed)]
#[folder = "templates/"]
struct Asset;
这里，我们将 templates/ 目录作为要嵌入的资源目录。
定义模板结构
#[derive(Template)]
#[template(path = "index.html")]
struct IndexTemplate {
now: String,
}
主函数
#[tokio::main]
async fn main() {
let tcp_listener = tokio::net::TcpListener::bind("0.0.0.0:9527").await.unwrap();
let app = Router::new().route("/", get(index_handler));
axum::serve(tcp_listener, app).await.unwrap();
}
没什么好说的。
首页
async fn index_handler() -> Html<String> {
let tmp = IndexTemplate {
now: Local::now().format("%Y-%m-%d %H:%M:%S").to_string(),
};
Html(tmp.render().unwrap())
}
将服务器当前时间渲染到模板中。
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AXUM中文网</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
</head>
<body>
<div class="alert alert-success mx-auto my-3" style="width: 50%">
现在时间是: {{ now }}
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>
- 为了美化，引入了 bootstrap
- 直接将结果渲染：
现在时间是: {{ now }}
通过 cargo build --release 编译之后，你只需要将生成的二进制文件进行发布、部署即可。而不需要额外把 templates 目录也进行发布、部署。
本章代码位于html-template目录