域名 AXUM.RS 将于2025年10月到期。我们无意再对其进行续费,我们希望你能够接续这个域名,让更多 AXUM 开发者继续受益。
  • 方案1️⃣AXUM.RS 域名 = 3000
  • 方案2️⃣方案1️⃣ + 本站所有专题原始 Markdown 文档 = 5000
  • 方案3️⃣方案2️⃣ + 本站原始数据库 = 5500
如果你有意接续这份 AXUM 情怀,请与我们取得联系。
说明:
  1. 如果有人购买 AXUM.RS 域名(方案1️⃣),或者该域名到期,本站将启用新的免费域名继续提供服务。
  2. 如果有人购买了 AXUM.RS 域名,且同时购买了内容和/或数据库(方案2️⃣/方案3️⃣),本站将关闭。届时我们或许会以另一种方式与你再相遇。

将HTML模板嵌入到AXUM应用

目标

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

[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"

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;

定义模板结构

#[derive(Template)]
#[template(path = "index.html")]
struct IndexTemplate {
    now: String,
}
  • #[template(path = "index.html")]:指定模板文件是 index.html。默认情况下,askama会自动在 templates 目录里寻找该文件
  • now: String:当前服务器时间

主函数

没什么好说的。

首页

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 目录也进行发布、部署。

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