Bereitstellung von HTML/CSS/JS mit Rocket

Question

Ich versuche, das Rust Rocket-Framework als Backend zum Hosten meiner Website zu verwenden, aber es fällt mir schwer, grundlegende HTML-Dateien und die zugehörigen Dateien bereitzustellen.

Soweit es geht, ist dies der Code für meine „Website“. Ich bin mir wirklich nicht sicher, wie ich das machen soll. Da ich neu in der Backend-Entwicklung bin, dachte ich, ich würde mal nachsehen, ob es hier eine Antwort gibt.

#[macro_use] extern crate rocket;


use std::fs::File;

use rocket::{response::{Redirect}, fs::FileServer};

#[get("/")]
fn index() -> Redirect {
    let redirect = Redirect::to(uri!("/home"));
    redirect
}

#[launch]
fn rocket() -> _ {
    rocket::build().mount("/", routes![index])
}

Ich bin mir nicht sicher, wie man die Frontend-Dateien am besten erstellt. Jeder Rat/Hilfe ist willkommen. Bitte gehen Sie vorsichtig mit mir um, da ich wenig Erfahrung in der Backend-Entwicklung habe.

Ich habe die auf GitHub aufgeführten statischen Beispiele ausprobiert, glaube jedoch, dass ich auf ein Problem gestoßen bin: Ich kann die HTML-Seite anzeigen, aber die Bilder, CSS- und JavaScript-Dateien werden nicht korrekt bereitgestellt.

Answer 1

我想出了一个更简单的解决方案。您可以简单地使用 FileServer 来托管您的静态文件，如下所示：

#[launch]
fn rocket() -> _ {
    rocket::build()
        .mount("/", routes![index])
        .mount("/css", FileServer::from(relative!("/templates/css")))
        .mount("/js", FileServer::from(relative!("/templates/js")))
        .mount("/fonts", FileServer::from(relative!("/templates/fonts")))
        .mount("/img", FileServer::from(relative!("/templates/img")))
        .attach(Template::fairing())
}

因此，每当我的 HTML 模板尝试调用 CSS 文件时，Rocket 都会从 /templates/css 目录提供 CSS 文件。

Answer 2

这是最适合我的代码。我想为那些可能正在努力进入后端 Web 开发（尤其是 Rust）的人解释一下这一点。

#[macro_use] extern crate rocket;


use rocket::{fs::NamedFile, response::Redirect};
use std::path::{Path, PathBuf};


#[get("/")]
fn index() -> Redirect {
    let redirect = Redirect::to(uri!("/home"));
    redirect
}

#[get("/home")]
async fn home () -> Option {
    NamedFile::open("client/index.html").await.ok()
}


#[get("/")]
async fn files(file: PathBuf) -> Option {
    NamedFile::open(Path::new("client").join(file)).await.ok()
}


#[launch]
fn rocket() -> _ {
    rocket::build().mount("/", routes![index, home, files])
}

我将从第一部分开始。

#[macro_use] extern crate rocket;


use rocket::{fs::NamedFile, response::Redirect};
use std::path::{Path, PathBuf};

^ 这只是我们对我需要使用的内容的声明。

#[get("/")]
fn index() -> Redirect {
    let redirect = Redirect::to(uri!("/home"));
    redirect
}

#[get("/home")]
async fn home () -> Option {
    NamedFile::open("client/index.html").await.ok()
}

^ 此部分用于重定向空白索引 URL，以不给出 404，并转到末尾带有“/home”的 URL。这只是我个人的喜好，但现在你也知道怎么做了！

最后，我通过查看 NamedFile 的 Rust 分析器示例来确定如何具体打开不同的文件。

#[get("/")]
async fn files(file: PathBuf) -> Option {
    NamedFile::open(Path::new("client").join(file)).await.ok()
}

^ 此部分用于处理其他文件，例如 HTML 文档中链接的 CSS 和 JavaScript。我想这不是一个非常安全的方法，但对于投资组合网站来说，我不需要非常强大的安全性。

#[launch]
fn rocket() -> _ {
    rocket::build().mount("/", routes![index, home, files])
}

^ 最后，您只需安装路线即可。这样做似乎对我有用。我相信更聪明、更有经验的人可以用比我更优雅的方式解释它，但如果你像我一样处于紧要关头，并且你无计可施，希望这是一个急需的救生圈当你溺水时。