Registro de Películas con Flask y JavaScript

Integración de Frontend y Backend para Películas

A continuación, se presenta la implementación técnica para el registro y gestión de películas utilizando JavaScript en el cliente y Flask en el servidor.

Implementación del Cliente con JavaScript

El siguiente bloque de código gestiona la captura de datos del formulario y su envío mediante la Fetch API:

const API_URL = 'http://127.0.0.1:5000';

const formulario = document.getElementById("pelicula_Form");
const tituloInput = document.getElementById("titulo");
const directorInput = document.getElementById("director");
const anioInput = document.getElementById("anio");

formulario.addEventListener("submit", registrar_Pelicula);

async function registrar_Pelicula(event) {
    try {
        const titulo = tituloInput.value;
        const director = directorInput.value;
        const anio = anioInput.value;

        const respuesta = await fetch(`${API_URL}/api/peliculas`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ titulo, director, anio })
        });
        const data = await respuesta.json();

        if (respuesta.status === 201) {
            alert("Película registrada con éxito");
        }
    } catch (error) {
        alert("Error detectado: " + error);
    }
}

Configuración de la API REST con Flask

En el servidor, definimos las rutas necesarias para manejar las operaciones GET, POST y DELETE:

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/peliculas', methods=["GET", "POST"])
def get_post_peliculas():
    if request.method == "GET":
        peliculas_list = Pelicula.query.all()
        return jsonify([p.to_dict() for p in peliculas_list]), 200

    if request.method == "POST":
        data = request.get_json()
        titulo = data.get('titulo')
        director = data.get('director')
        anio = data.get('anio')

        nueva_pelicula = Pelicula(titulo, director, anio)
        db.session.add(nueva_pelicula)
        db.session.commit()
        return jsonify(nueva_pelicula.to_dict()), 201

@app.route('/api/peliculas/<int:id>', methods=["GET", "DELETE"])
def get_delete_pelicula(id):
    if request.method == "GET":
        pelicula = Pelicula.query.get(id)
        if pelicula:
            return jsonify(pelicula.to_dict()), 200
        else:
            return jsonify("Película no existe"), 404

    if request.method == "DELETE":
        pelicula = Pelicula.query.get(id)
        if pelicula:
            db.session.delete(pelicula)
            db.session.commit()
            return jsonify("Película eliminada con éxito"), 200
        else:
            return jsonify("Película no existe"), 404

if __name__ == '__main__':
    app.run(debug=True)