No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Template para el index y los posts

17/21
Recursos

Puedes crear tantas p谩ginas HTML como tu aplicaci贸n necesite. En cualquier p谩gina web es fundamental poder enviar informaci贸n din谩micamente al template.

Pasaje de variables al template

Vamos a crear una p谩gina HTML para mostrar todos los registros. Para esto, modifica el index de tu aplicaci贸n para que devuelva un 鈥渃ontexto鈥 y lograr pasarle datos a tu HTML.

#[get("/")]
async fn index(pool: web::Data<DbPool>, template_manager: web::Data<tera::Tera>) -> impl Responder {
    let conn = pool.get().expect("Problemas al traer la base de datos");

    // Consulta para obtener todos los registros
    match web::block(move || {posts.load::<Post>(&conn)}).await {
        Ok(data) => {
            let data = data.unwrap();

            // Enviamos, a trav茅s del contexto, los datos al HTML
            let mut ctx = tera::Context::new();
            ctx.insert("posts", &data);

            // Pasamos los datos al template index.html
            HttpResponse::Ok().content_type("text/html").body(
                template_manager.render("index.html", &ctx).unwrap()
            )
        },
        Err(err) => HttpResponse::Ok().body("Error al recibir la data")
    }
}

En cuanto al HTML, Tera utiliza un lenguaje especial y muy f谩cil de utilizar para mostrar los datos o crear un ciclo for.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {% for post in posts %}
    <div>
        <h1>
            <a href="/blog/{{post.slug}}">{{ post.title }} </a>
        </h1>
        <p>{{ post.body }}</p>
    </div>
    {% endfor %}
</body>
</html>

A la vez que mostramos el t铆tulo y la descripci贸n del registro, estamos generando un enlace HTML para redireccionar a la p谩gina exclusiva del registro.

Captura de par谩metros

Para crear una p谩gina exclusiva para cada registro, normalmente se pasa un ID o una clave 煤nica del mismo a trav茅s de los par谩metros de URL. Vamos a crear una nueva p谩gina para capturar esta informaci贸n y renderizar un solo registro.

// Capturamos el par谩metro por URL
#[get("/blog/{blog_slug}")]
async fn get_post(
    pool: web::Data<DbPool>, 
    template_manager: web::Data<tera::Tera>, 
    blog_slug: web::Path<String>
) -> impl Responder {
    let conn = pool.get().expect("Problemas al traer la base de datos");

    let url_slug = blog_slug.into_inner();

    match web::block(move || {posts.filter(slug.eq(url_slug)).load::<Post>(&conn)}).await {
        Ok(data) => {
            let data = data.unwrap();

            // Si el post no existe, devolvemos 404
            if data.len() == 0 {
                return HttpResponse::NotFound().finish();
            }

            let data = &data[0];

            // Enviamos, a trav茅s del contexto, los datos del post al HTML
            let mut ctx = tera::Context::new();
            ctx.insert("post", data);

            HttpResponse::Ok().content_type("text/html").body(
                template_manager.render("post.html", &ctx).unwrap()
            )
        },
        Err(err) => HttpResponse::Ok().body("Error al recibir la data")
    }
}

El URL est谩 compuesto por una variable din谩mica /blog/{blog_slug} la cual podemos capturar como par谩metro gracias a blog_slug: web::Path<String>. Con este dato, buscamos y devolvemos el registro correspondiente o devolvemos 404 si el mismo no existe.

Mientras que en el HTML, solo muestras la informaci贸n de un solo registro.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ post.title }}</title>
</head>
<body>
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.body }}</p>
        <a href="/">Volver</a>
    </div>
</body>
</html>

De esta forma, ya sabes exponer un servidor HTTP con Rust y Actix, conectarte a una base de datos SQL con Diesel y renderizar la informaci贸n en un template HTML con Tera. Hemos completado todo el stack necesario para desarrollar tu primera p谩gina web con Rust. 隆Felicidades!


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 1

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

El motor de plantillas es muy similar a cualquier otro. Me hizo recordar a Angular + Twig de PHP.