1

estoy trabajando en una aplicación web sencilla, pero es el primero contacto que tengo con un servidor nodeJs utilizando ExpressJs... Ya logré obtener los datos utilizando un método get y req.query directo desde la URL pero quisiera saber cómo obtener los datos desde un formulario.

Este es el código que tengo en el servidor:

const http = require('http');
const express = require('express');
var app = express();
const server  = http.createServer(app);
app.use(express.static("static"))

var arreglo=[
{no:0, numControl:"", nombre:"", paterno: "", materno:"", carrera:""},
]

app.get("/", function(req ,res){
    res.json({datos: arreglo});
});

app.get("/add", function(req ,res){
    console.log(req.query);
    let alumno={

        no:arreglo.length+1, 
        numControl:req.query.numControl, 
        nombre: req.query.nombre, 
        paterno: req.query.paterno, 
        materno: req.query.materno, 
        carrera: req.query.carrera
    }
    arreglo.push(alumno)
    console.log(arreglo)
    res.end();
})

server.listen(3000, function(){
    console.log("Servidor activo");
})

En el archivo html coloqué el formulario de la siguiente manera:

<body>
    <div id="app" class="app">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Num. Control</th>
                    <th>Nombre Completo</th>
                    <th>Carrera</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>{{ nombreCompleto(a) }}</td>
                    <td>{{ a.carrera }}</td>
                    <td><input type="checkbox" value="data"><br></td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>

        <div id="botones" class="botones">
            <button class="btn">Agregar</button>
            <button>Eliminar</button>
            <button>Modificar</button>
        </div><br>  
        <div>
            <form>
                <div>
                    <label>Nombre Completo:</label>
                    <input type="text" value="" id="nomComp">
                </div>
                <div>
                    <label>Numero de Control:</label>
                    <input type="text" name="NumeroControl" id="NumCon" value="">
                </div>  
                <div>
                    <label>Carrera</label>
                    <select name="carreras" id="carr">
                        <option value="siste" name="siste">Ing.Sistemas</option>
                        <option value="meca" name="meca">Ing. Mecatronica</option>
                        <option value="ambi" name="ambi">Ing. Ambiental</option>
                        <option value="elec" name="elec">Ing. Electronica</option>
                    </select>
                </div>
                    <input type="submit" name="Enviar">
            </form>
        </div>

    </div>
    <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" src="serverCRUDalumnos.js"></script>
</body>
</html>

Una disculpa si tengo errores en tabulación o simplemente es una pregunta absurda, pero soy un programador poco experimentado y me gustaría aprender.

  • 1
    ¿Quieres usar AJAX o simplemente que el formulario se envíe? Si es lo segundo, tienes que añadir en la etiqueta form la URL y el método (GET, supongo). Además tendrás que modificar tu código en Node porque recibirás un `form-data` no un JSON. – Pablo Lozano Oct 25 '19 at 08:35

1 Answers1

0

En primer lugar, si vas a usar Express no es necesario usar el módulo http de Node, (a menos que trabajes directamente sobre el mismo, como lo hace socket.io, por ejemplo).

En segundo lugar, si usas Node (imagino que usas al menos Node 8.0 o superior), evita usar var para declarar tus variables, es preferible siempre usar const y let.

Puedes ver: var, let, const… o nada en Javascript

Por otro lado, puedes enviar los datos del formulario directamente usando el evento submit() del formulario o mediante un elemento <button> o <input> de tipo submit.

También, tal como comenta @PabloLozano, puedes hacer uso de Ajax para realizar el envío del formulario desde el frontend hacia el backend.

Backend

Ahora, lo que necesitas es implementar una forma de recibir los datos del mismo en el lado del servidor (backend), y para ello debes crear un endpoint en Express.

La ruta que implementes es cosa tuya, existen diversidad de opiniones al respecto, y cada una expone los motivos del porqué hacerlo así.

Supongamos que la ruta que va a servir de endpoint es:

'/api/alumnos/add'

En esta ruta vamos a recibir los datos de un formulario.

Para que esto funcione, debemos establecer el método http que manejará dicha ruta, y debemos decidir cómo vamos a leer los datos.

Para este ejemplo, vamos usar el método POST, y leeremos los datos que se envían en el cuerpo (body) de la solicitud.

Para poder leer los datos que vienen en el cuerpo de la solicitud, debemos usar un middleware de Express para analizar (parse) su contenido.

A partir de la versión 4.16.0 Express dispone de los siguientes métodos middleware:

  • express.json() que nos permite analizar el cuerpo de la solicitud con contenido JSON.
  • express.urlencoded() que nos permite analizar el cuerpo de la solicitud con contenido urlencoded.

Con esto ya tenemos todo lo necesario para armar nuestro endpoint básico:

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 alumno = req.body;
  if(!alumno) {
    return res.status(400).json({error: 'No hay datos'});
  }
  alumno.no = alumnos.length + 1;
  console.log(alumno);
  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
  return res.status(200).json(alumnos);
});

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

Ya tenemos listo el backend con nuestro endpoint esperando datos en la ruta acordada.

Frontend

Aquí existen infinidad de opciones, aunque veo que usas Vue.js. No voy a entrar en detalles del uso de librerías o frameworks, ya que tu pregunta va más orientada a envío de datos de un formulario, lo cual existe antes que toda esta infinidad de frameworks y librerías vieran la luz.

Vamos a crear un formulario sencillo con los datos que va a recibir nuestro servidor de Express.

En tu pregunta tienes un modelo de ficha de alumno en un formulario, y eso es lo que haremos, usando simple y puro html:

<!--
  El siguiente formulario envía una solicitud: "POST", con un tipo de datos: "application/x-www-form-urlencoded"
  a la ruta: "/api/alumnos/add" del host o dominio.
-->
<form id="ficha" action="/api/alumnos/add" enctype="application/x-www-form-urlencoded" method="post">
  <div>
    <label for="nombre">Nombre Completo:</label>
    <input type="text" value="" id="nombre" name="nombre">
  </div>
  <div>
    <label for="control">Numero de Control:</label>
    <input type="text" value="" id="control" name="control">
  </div>
  <div>
    <label for="carrera">Carrera:</label>
    <select id="carr" name="carrera">
      <option value="" name="siste">--Seleccione:--</option>
      <option value="siste" name="siste">Ing.Sistemas</option>
      <option value="meca" name="meca">Ing. Mecatronica</option>
      <option value="ambi" name="ambi">Ing. Ambiental</option>
      <option value="elec" name="elec">Ing. Electronica</option>
    </select>
  </div>
  <input type="submit" value="Enviar">
</form>

Puedes leer en el comentario del código anterior lo siguiente:

  • El método http del formulario se establece a "post".
  • El tipo MIME de los datos del formulario se establece como "application/x-www-form-urlencoded".
  • La ruta o endpoint a la que se envían los datos es "/api/alumnos/add", la cual pertenece al host o dominio.

Un aspecto importante: el elemento <input> de tipo submit tiene un atributo value="Enviar" y no name="Enviar" como lo tienes en tu pregunta. La razón de esto es muy sencilla, te animo a que hagas la prueba con ambos valores y veas la diferencia.

Con esto ya tienes la forma de enviar datos de un formulario web hacia tu servidor de Express.

Si deseas un ejemplo, puedes ver el siguiente repositorio de Github, donde implemento todo lo anterior.

Mauricio Contreras
  • 13,660
  • 3
  • 18
  • 40
  • Muchas gracias!!! Sé que tengo varios errores en el código, te agradezco por las observaciones y recomendaciones, estoy estudiando apenas la carrera de Ing. Sistemas y la programación siempre es lo que más me ha costado entender. Sólo una pregunta, podrías explicarme cómo se haría el frontend utilizando Vue.js? Mi maestro quiere que a fuerza sea con VueJS y vueResource. Saludos y gracias nuevamente!! – José E Tejeda Medina Oct 26 '19 at 00:04
  • Me marcó un error cuando intenté ejecutar el servidor: internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'C:\Users\savan\Documents\ITSTB - JOSE TEJEDA\7mo Semestre\Interfaces Web\Unidad 1\web\\CRUD\ServidorAlum.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) – José E Tejeda Medina Oct 26 '19 at 00:14
  • El error marca una barra invertida de más por algún lado, por favor verifica eso: `...\web\\CRUD\...`. Es por eso que te salta el mismo. Verifica tus rutas en el archivo `package.json` y en cómo realizas los `requiere()`. Saludos – Mauricio Contreras Oct 26 '19 at 06:39