0

Estoy haciendo un crud en el cual tengo que pasarle alumnos, quiero enviar un objeto JSON con mi server ExpressJS utilizando un metodo post, quiero que los datos sean enviados a la url '/api/alumnos/add'
El usuario en la lista si se ve reflejado en en la paguina.

    <div id="app" class="app">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Num. Control</th>
                    <th>Nombre Completo</th>
                    <th>Carrera</th>
                    <th>Opcion</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="lista.length==0">
                    <td colspan="5">Aún no hay elementos registrados</td>
                </tr>
                <tr v-else v-for="(a, i) in lista">
                    <td>{{ a.no }}</td>
                    <td>{{ a.numControl }}</td>
                    <td>{{ a.nomCompleto }}</td>
                    <td>{{ a.carrera }}</td>
                    <td><input type="checkbox" value="data"><br></td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
        <div>
            <br><br>
            <form>
                <div>
                <label>Numero de Control:</label>
                <input type="text">
                </div>  
                <div>
                <label>Nombre Completo:</label>
                <input>
                </div>
                <div id="botones" class="botones">
                    <br>
                    <button v-on:click="created()">Agregar</button>
                    <button>Eliminar</button>
                    <button>Modificar</button>
                </div>
            </form>
        </div> 
    </div>

Esto es lo que tengo para enviar informacion pero no se mandarla al servidor

    <script type="text/javascript" language="javascript" src="vueJS/vue.js"></script>
    <script type="text/javascript" language="javascript" src="vueJS/vue-resource.js"></script>
    <script type="text/javascript">
        new Vue ({
            el: "#app",
            created: function(){
                this.enviar();
            },
            methods:{
                enviar: function(){
                    this.$http.post('/api/alumnos/add').then(response => {
                        // get body data
                        this.data.lista = response.body;
                    }, response => {
                        //error
                    });
                }
            },          
            data: {
                lista: [
                {
                     no:0, numControl:"", nomCompleto:"", carrera:""
                }
                ]
            }
        })

    </script>
</body>

Este es mi server express en el cual si puedo mandarle informacion a traves de la extensión postman en x-www-form-urlencoded, cuando envio datos en postman llegan al servidor y quiero que esos datos se reflejen en mi html


const express = require('express');
const app = express();

//middlewares
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(express.static('static'));

/*************************************************************************************/

// depósito de datos temporal

let alumnos = []; // <- se inicia vacío con la aplicación

//rutas o endpoints
app.post('/api/alumnos/add', (req, res, next) => {

  const dAlumno = {
    no:         { required:false },
    numControl: { required:true, msg: "Falta el numero de control" },
    nombre:     { required:true, msg: "Falta el nombre" },
    paterno:    { required:true, msg: "Falta el apellido paterno" },
    materno:    { required:true, msg: "Falta el apellido materno" },
    carrera:    { required:true, msg: "Falta la carrera" },
  };

  let alumno={};
  let errors=[];

  for(const k in dAlumno){
    if(req.body[k]){
      alumno[k]=req.body[k];
    }
    else{
      if(dAlumno[k].required){
        errors.push(dAlumno[k].msg);
      }
    }
  }

  if(errors.length>0) {
    return res.status(400).json({errors: errors});
  }

  if(alumno.no){

  }
  else{
    alumno.no = alumnos.length + 1;  
    alumnos.push(alumno);
  }

  // podemos enviar el array de alumnos, así por cada vez que accedemos a este
  // a este endpoint vamos viendo los datos almacenados
  console.log(alumnos)
  return res.status(200).json({status: true});
});

// la siguiente ruta capturará todos los métodos http a cualquier ruta que no haya
// sido declarada anteriormente
app.all('/', (req, res, next) => {
  return res.status(200).json({message: 'Servidor listo'})
});


/***********************************************************************************/
//iniciamos el servidor
const port = 3000;
app.listen(port, () => {
  console.info(`Servidor escuchando en puerto: ${port}`);
});
4
  • Hola Jose, por que POST y no GET? Estas obteniendo datos del servidor por lo que comentas. Y cual es el error? parece que no lo expresas muy bien que es lo que pasa con tu código, que te dice la consola tanto del navegador como del servidor? no llegan los datos al HTML? Quieres que se actualicen en vivo? Estoy atento, un saludo. Commented el 11 nov. 2019 a las 2:01
  • Gracias por contestar, ese método fue el que me pidieron en la universidad, como puedes notar no soy un programador experimentado pero quisiera aprender poco a poco. Error aún no tenemos, ya generamos un metodo en nuestro servidor de alumnos que va a recibir un JSON que contiene la lista con los 3 valores, nomCompleto, numControl y carrera. Lo que no sabemos es como enviar desde el archivo HTML ese objeto JSON utilizando Vue-Resource con POST como el maestro lo quiere. Commented el 11 nov. 2019 a las 2:16
  • Puedes intentar habilitar la opción emulateJSON de vue-resource a true? Commented el 11 nov. 2019 a las 2:30
  • La verdad no sé cómo hacer eso Commented el 11 nov. 2019 a las 2:40

1 respuesta 1

0

Parece que no estas enviando ningún tipo de dato al servidor, solo estas realizando una petición POST como si fuese GET, por lo cual expreso mi confusión en mi comentario de tu pregunta, pero como lo que dices es y cito:

Esto es lo que tengo para enviar información pero no se mandarla al servidor

Asumo que quieres mandar los datos capturados en el HTML, por lo que tienes que obtenerlos y enviarlos de la siguiente manera:

// Datos obtenidos del DOM con cualquier método
const formData = {
 someProp: this.someProp,
 someValue: 'some value'
};

//POST DATA

this.$http.post('/api/alumnos/add', formData, {emulateJSON: true})
.then(response => {
     console.log(response.body); 
     foo..
}, response => {
     console.error(response.body); 
     foo..
});

Note que la data que queremos mandar como Json va después de la URL en la petición POST como parámetro y luego las opciones.

También podrías utilizar Fetch:

fetch('/api/alumnos/add', {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
})
.then(res => res.json())
.then(json => {console.log(json); foo..})

También recomiendo utilizar los modulos cookie-parser y body-parser para trabajar con el body de las peticiones en el servidor.

Espero que te sea de ayuda, un saludo.

1
  • Muchas gracias!!! Igualmente un saludo. Commented el 11 nov. 2019 a las 2:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.