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}`);
});