将HTML模板嵌入到AXUM应用

目标

我们的目标是,实现一个AXUM应用,获取服务器当前时间,并通过RUST渲染的HTML模板中。

依赖

Rust代码

// 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/ 目录作为要嵌入的资源目录。

定义模板结构

  • #[template(path = "index.html")]:指定模板文件是 index.html。默认情况下,askama会自动在 templates 目录里寻找该文件
  • 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目录

要查看完整内容,请先登录