Sesion #5

  Duración 2 horas 10:00pm-12:00am

+Se trabajo en la conexion entre la pagina web, mas especificamente en la parte de listar los empleados registrados en la Base de Datos.

<header class="grid-container">

        <div class="container searchForm">

            <h2>Gestor de Planilla</h2>

        </div>

    </header>

    <h2>Lista de Empleados</h2>

    <div class="scrollable-table">

        <table>

            <thead>

                <tr>

                    <th>Nombre</th>

                    <th>Salario</th>

                </tr>

            </thead>

            <tbody id="empleados">

               

            </tbody>

        </table>

    </div>

+ Al igual que los scripts necesarios para que logre realizar la funcion de mostrar.

const url = 'http://127.0.0.1:5000/listar_empleados';

        fetch(url)

            .then(response => {

            if (!response.ok) {

                throw new Error('Error al obtener el archivo JSON');

            }

            return response.json();

        })

            .then(data => {

                cargarEmpleados(data.Empleados);

        })

            .catch(error => {

                console.error('Error:', error);

        });

        // Función para cargar empleados en la tabla

    function cargarEmpleados(empleados) {

        const empleadosLista = document.getElementById('empleados');

        empleadosLista.innerHTML = '';

   

        empleados.forEach(empleado => {

            const fila = document.createElement('tr');

       

            const nombreCelda = document.createElement('td');

            nombreCelda.textContent = empleado.Nombre;

            fila.appendChild(nombreCelda);

            const salarioCelda = document.createElement('td');

            salarioCelda.textContent = empleado.Salario;

            fila.appendChild(salarioCelda);

            empleadosLista.appendChild(fila);

        });

    }

+ Se nos presento un error en la conexion al servidor de python, se utilizo alrededor de 45 min solucionarlo, porque no sabiamos que era necesario lo siguiente en el codigo del servidor.

import pyodbc

from flask import Flask, request, jsonify

from flask_cors import CORS

app = Flask(__name__)

CORS(app)

Especificamente las lineas 3 y 6.

+Se logra la conexion y el resultado de la muestra de datos es la siguiente: