Melayan HTML/CSS/JS menggunakan Rocket

Question

Saya cuba menggunakan rangka kerja Rust Rocket sebagai bahagian belakang untuk mengehos tapak web saya, tetapi saya sedang bergelut untuk menyediakan fail HTML asas dan fail berkaitannya.

Setakat ini, ini adalah kod untuk "laman web" saya. Saya benar-benar tidak pasti bagaimana untuk melakukan ini, dan sebagai baru dalam pembangunan backend saya fikir saya akan melihat jika ada jawapan di sini.

#[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])
}

Saya tidak pasti cara terbaik untuk membina fail bahagian hadapan. Sebarang nasihat/bantuan amat dihargai. Sila bertenang kerana saya mempunyai sedikit pengalaman dalam pembangunan bahagian belakang.

Saya telah mencuba contoh statik yang disenaraikan di GitHub, namun, saya rasa saya menghadapi masalah: Saya boleh melihat halaman HTML, tetapi imej, CSS dan fail JavaScript tidak disiarkan dengan betul.

Answer 1

Saya dapati penyelesaian yang lebih mudah. Anda hanya boleh menggunakan FileServer untuk mengehoskan fail statik anda seperti ini:

#[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())
}

Jadi apabila templat HTML saya cuba memanggil fail CSS, Rocket menyediakan fail CSS daripada direktori /templates/css.

Answer 2

Ini adalah kod yang paling sesuai untuk saya. Saya ingin menerangkan perkara ini kepada anda yang mungkin cuba memasuki pembangunan web bahagian belakang (terutamanya 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])
}

Saya akan mulakan dengan bahagian pertama.

#[macro_use] extern crate rocket;


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

^ Ini hanyalah kenyataan kami tentang apa yang perlu saya gunakan.

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

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

^ Bahagian ini digunakan untuk mengubah hala URL indeks kosong untuk tidak memberikan 404 dan pergi ke URL dengan "/home" di hujungnya. Ini hanya pilihan peribadi saya, tetapi sekarang anda tahu cara melakukannya juga!

Akhirnya, saya mengetahui cara untuk membuka fail yang berbeza secara khusus dengan melihat contoh penghurai Rust untuk NamedFile.

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

^ Bahagian ini digunakan untuk mengendalikan fail lain seperti CSS dan JavaScript yang dipautkan dalam dokumen HTML. Saya rasa ini bukan pendekatan yang sangat selamat, tetapi untuk tapak portfolio saya tidak memerlukan keselamatan yang sangat kuat.

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

^ Akhir sekali, anda hanya perlu memasang laluan. Melakukan ini nampaknya berkesan untuk saya. Saya pasti orang yang lebih bijak, lebih berpengalaman boleh menerangkannya dengan cara yang lebih elegan daripada yang saya boleh, tetapi jika anda berada dalam keadaan secubit seperti saya dan anda berada di hujung akal anda, semoga ini adalah kehidupan yang sangat diperlukan pengawet apabila anda lemas.