如何同时向客户端发送HTML、CSS与JavaScript文件

你的第二个代码片段里，函数先后创建了两个HttpResponse，但Rust函数只会返回最后一个，所以客户端实际收到的是CSS内容，自然看不到完整网站。Web服务的核心逻辑是不同资源对应不同请求路径：浏览器会先请求HTML，然后根据HTML里的<link>、<script>标签，分别请求CSS和JS文件，你需要为这些请求分别返回对应的资源内容。

方法一：手动为每个资源编写路由 #

假设你的HTML文件中已经正确引用了CSS和JS：

<!-- homepage.html -->
<link rel="stylesheet" href="/static/style.css">
<script src="/static/script.js"></script>

对应的Rust代码可以这样写：

use actix_web::{get, HttpResponse, Responder, App, HttpServer};

// 首页路由：返回HTML内容
#[get("/")]
async fn get_homepage() -> impl Responder {
    let html = include_str!("../../../../Frontend/Code/homepage.html");
    HttpResponse::Ok().content_type("text/html").body(html)
}

// CSS资源路由：返回CSS内容
#[get("/static/style.css")]
async fn get_css() -> impl Responder {
    let css = include_str!("../../../../Frontend/Code/style.css");
    HttpResponse::Ok().content_type("text/css").body(css)
}

// JS资源路由：返回JS内容
#[get("/static/script.js")]
async fn get_js() -> impl Responder {
    let js = include_str!("../../../../Frontend/Code/script.js");
    HttpResponse::Ok().content_type("application/javascript").body(js)
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(get_homepage)
            .service(get_css)
            .service(get_js)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

方法二：用静态文件托管简化配置 #

如果你的静态资源（CSS、JS、图片等）较多，手动写路由太繁琐，可以用Actix-web的Files服务直接托管整个静态目录：

use actix_web::{get, HttpResponse, Responder, App, HttpServer, fs::Files};

#[get("/")]
async fn get_homepage() -> impl Responder {
    let html = include_str!("../../../../Frontend/Code/homepage.html");
    HttpResponse::Ok().content_type("text/html").body(html)
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(get_homepage)
            // 将/static路径映射到你的前端静态文件目录
            .service(Files::new("/static", "../../../../Frontend/Code").show_files_listing())
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

这样只要HTML里的资源引用路径（比如/static/style.css）和目录里的文件路径对应，浏览器就能自动请求到对应的资源。

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