Mostrar datos de la base de datos en navegador con Actix

Ahora que ya establecimos la conexión con la BBDD y levantamos un servidor HTTP, es momento de mostrar los datos de la base en el navegador.

Visualización de datos en el browser

Los endpoints del tipo GET son de lectura de datos. Los navegadores web puedes obtener los mismos para renderizarlos con HTML y CSS y mostrarle al usuario la información. Vemos cómo puedes enviar datos de la base, pasando por el backend y llegando estos al navegador.

Paso 1. Imports necesarios

Importamos todo lo necesario, macros, variables de entorno, Actix, Diesel, esquemas y modelos:

#[macro_use]

extern crate diesel;

pub mod schema;
pub mod models;

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

use dotenv::dotenv;
use std::env;

use diesel::prelude::*;
use diesel::pg::PgConnection;

pub type DbPool = r2d2::Pool<ConnectionManager<PgConnection>>;
use diesel::r2d2::{self, ConnectionManager};
use diesel::r2d2::Pool;

use self::models::Post;
use self::schema::posts::dsl::*;

Paso 2. Endpoint GET

La URL base de una aplicación web suele recibir el nombre de index. Configuremos una función que reciba el pool de conexión desde el main() y ejecute la consulta a la base de datos.

#[get("/")]
async fn index(pool: web::Data<DbPool>) -> impl Responder {
    // Traemos el POOL para disponer de la conexión a la BBDD
    let conn = pool.get().expect("Problemas al traer el pool de conexión.");

    // El 'match' responde en caso de éxito o error en la consulta
    match web::block(move || {posts.load::<Post>(&conn)}).await {
        Ok(data) => {
            return HttpResponse::Ok().body(format!("{:?}", data));
        },
        Err(err) => HttpResponse::Ok().body("Error al recibir los datos.")
    }
}

Paso 3. Exponemos servidor HTTP

Finalmente, levantamos el servidor HTTP y exponemos la ruta index().

#[actix_web::main]
async fn main() -> std::io::Result<()> {

    dotenv().ok();
    let db_url = env::var("DATABASE_URL").expect("La variable de entorno DATABASE_URL no existe.");

    let connection = ConnectionManager::<PgConnection>::new(db_url);

    // El POOL sirve para compartir la conexión con otros servicios
    let pool = Pool::builder().build(connection).expect("No se pudo construir el Pool.");

    HttpServer::new(move || {
        // Compartimos el pool de conexión a cada endpoint
        App::new().service(index).app_data(web::Data::new(pool.clone()))
    }).bind(("127.0.0.1", 8080)).unwrap().run().await
}

Ingresando a 127.0.0.1:8080/, observarás el JSON que contiene todos los posts de tu base de datos. Ahora es tarea del equipo de front-end darle forma y color a esos datos.

---

Contribución creada por: Kevin Fiorentino.