Ejercicio FastAPI: listado de productos con archivos estáticos

Descripción

Configura FastAPI para servir archivos estáticos y crear una página que muestre un listado de productos con estilos CSS.

Crea una aplicación FastAPI que sirva archivos estáticos y muestre una página con un listado de productos.

Pasos a seguir:

Configura FastAPI para servir archivos estáticos desde un directorio llamado static
Configura Jinja2Templates para usar un directorio llamado templates
Crea una ruta GET en /productos que renderice un template llamado productos.html
El template debe mostrar una lista de 3 productos con la siguiente información:

Producto 1: "Laptop Gaming" - Precio: "€1,299"
Producto 2: "Mouse Inalámbrico" - Precio: "€45"
Producto 3: "Teclado Mecánico" - Precio: "€89"

Enlaza un archivo CSS llamado productos.css desde el directorio static/css/ usando url_for
El CSS debe aplicar los siguientes estilos:

Fuente Arial para todo el body
Color de fondo #f8f9fa para el body
Contenedor centrado con ancho máximo de 800px
Lista sin viñetas con padding de 20px para cada elemento
Color azul (#007bff) para los nombres de productos
Color verde (#28a745) para los precios

Recuerda instalar python-multipart para que StaticFiles funcione correctamente.

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Estructura de archivos esperada:

main.py (tu código principal)
templates/productos.html
static/css/productos.css

Solución al ejercicio de programación en FastAPI

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en FastAPI para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en FastAPI

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en FastAPI

⭐⭐⭐⭐⭐

4.9/5 valoración