基于Axum-Rust实现服务端渲染：如何发送完整HTML文件？

当然可以用Axum发送完整HTML文件，甚至实现服务端渲染——只是多数教程侧重API开发才会大量讲JSON传输，HTML渲染其实是Axum的基础能力之一。下面给你几种实用的实现方式：

1. 直接返回静态HTML字符串 #

最简单的方式是用Axum提供的Html响应类型，直接返回硬编码或读取到的HTML内容：

use axum::{response::Html, routing::get, Router};
use std::net::SocketAddr;

#[tokio::main]
async fn main() {
    let app = Router::new().route("/", get(home));

    let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
    axum::Server::bind(&addr)
        .serve(app.into_make_service())
        .await
        .unwrap();
}

async fn home() -> Html<&'static str> {
    Html("<html><body><h1>Hello from Axum!</h1></body></html>")
}

2. 读取本地HTML文件返回 #

如果你的HTML是存放在本地文件里的，可以直接读取文件内容并返回，同时处理文件不存在的情况：

use axum::{http::StatusCode, response::Html, routing::get, Router};
use std::fs;

async fn serve_html() -> Result<Html<String>, StatusCode> {
    match fs::read_to_string("./templates/index.html") {
        Ok(content) => Ok(Html(content)),
        Err(_) => Err(StatusCode::NOT_FOUND),
    }
}

// 然后在Router中注册这个handler即可

3. 实现服务端渲染（带动态数据） #

和Express的模板引擎类似，你可以搭配Rust生态里的模板引擎（比如Tera、Handlebars）来渲染带动态数据的HTML：
以Tera为例，先在Cargo.toml中添加依赖：

[dependencies]
axum = "0.7"
tokio = { version = "1.0", features = ["full"] }
tera = "1.0"

然后编写渲染逻辑：

use axum::{response::Html, routing::get, Router};
use tera::{Context, Tera};
use std::sync::Arc;

#[tokio::main]
async fn main() {
    // 初始化模板引擎，加载templates目录下的所有html文件
    let tera = Arc::new(Tera::new("./templates/**/*.html").unwrap());

    let app = Router::new()
        .route("/user/:name", get(user_page))
        .with_state(tera);

    let addr = ([127, 0, 0, 1], 3000).into();
    axum::Server::bind(&addr)
        .serve(app.into_make_service())
        .await
        .unwrap();
}

async fn user_page(
    axum::extract::Path(name): axum::extract::Path<String>,
    axum::extract::State(tera): axum::extract::State<Arc<Tera>>,
) -> Html<String> {
    let mut context = Context::new();
    context.insert("name", &name);
    context.insert("age", &28);

    // 渲染user.html模板
    let rendered = tera.render("user.html", &context).unwrap();
    Html(rendered)
}

对应的templates/user.html内容示例：

<html>
    <body>
        <h1>Hello, {{ name }}!</h1>
        <p>Your age is {{ age }}</p>
    </body>
</html>

这样就能实现和Express类似的服务端渲染效果——从路由获取参数，注入模板，最终返回渲染后的完整HTML。

内容的提问来源于stack exchange，提问作者Coderkid