Scribd
Cargar
51 vistas3 páginas

Nodejs - Express - Forms: Recursos

El documento proporciona instrucciones para crear una página de inicio de sesión en una aplicación Express utilizando formularios. Explica cómo enviar datos del formulario al servidor a través de los métodos POST y GET, y validar las credenciales de inicio de sesión. También incluye enlaces a recursos adicionales sobre el desarrollo de aplicaciones web con Express.

Cargado por

otakun
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
51 vistas3 páginas

Nodejs - Express - Forms: Recursos

El documento proporciona instrucciones para crear una página de inicio de sesión en una aplicación Express utilizando formularios. Explica cómo enviar datos del formulario al servidor a través de los métodos POST y GET, y validar las credenciales de inicio de sesión. También incluye enlaces a recursos adicionales sobre el desarrollo de aplicaciones web con Express.

Cargado por

otakun
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

31/1/22 11:46 NodeJS - Express - Forms: DESARROLLO DE APLICACIONES WEB Y MÓVILES

NodeJS - Express - Forms

Recursos

Crea un proyecto básico, siguiendo las instrucciones de NodeJS - Express


(https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express) y NodeJS - Express -
Bootstrap (https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-bootstrap) .

Otra alternativa es que utilices el proyecto plantilla. Desde la línea de comandos:

Clona el proyecto, con: git clone https://github.com/DAWFIEC/sitioExpress.git


Accede a la carpeta del proyecto: cd sitioExpress
Cámbiate a la rama: git checkout express-bootstrap
Instala los módulos: npm install
Verifica que funcione correctamente al levantar los servicios: npm run devstart
Desde el navegador, accede a http://localhost:3000/ (http://localhost:3000/)

Página de ingreso

Para crear la página de ingreso, o login, utiliza los archivos del recurso login.rar
(https://aulavirtual.espol.edu.ec/courses/3423/files/1410075/download?wrap=1) .  La plantilla
del login es HTML Snippets for Twitter Boostrap framework
(https://bootsnipp.com/snippets/dldxB) .

Copia el archivo login.js dentro de la carpeta routes. 


Copia el archivo login.ejs dentro de la carpeta views.
Copia el archivo login.css dentro de la carpeta public/stylesheets. 
Copia el archivo usuario.svg dentro de la carpeta public/icons.

https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-forms?module_item_id=135966 1/3
31/1/22 11:46 NodeJS - Express - Forms: DESARROLLO DE APLICACIONES WEB Y MÓVILES

En el app.js, enlaza la ruta "/login" con el login.js.


 

Envío de datos con POST

Realiza las siguientes modificaciones para enviar los datos desde el formulario del cliente
al servidor.

En el archivo views/login.ejs, en la etiqueta <form>

Agregue el atributo action con el valor "/login/validate"


Agregue el atributo method con el valor "post"

En el archivo routes/login.js, agregue el manejador para procesar requerimientos


POST:

let bd = {

'usuario': 'abc',

'contrasenia': '123'

...

router.get('/', ...

...

router.post('/validate', function(req, res, next) {

let usuario = req.body.user;

let contrasenia = req.body.password;

console.log("usuario: ", usuario)

console.log("contraseña: ", contrasenia)

//Validación

if(usuario == bd['usuario'] && contrasenia == bd['contrasenia']) {

res.redirect('/');

} else {

res.redirect('/login')

});

Verifica los resultados en el navegador. Comprueba los resultados al acceder a la ruta


raíz "/",

https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-forms?module_item_id=135966 2/3
31/1/22 11:46 NodeJS - Express - Forms: DESARROLLO DE APLICACIONES WEB Y MÓVILES

Ingresa los datos usuario = "abc" y contraseña "123"


 

Envío de datos con GET

Ahora, prueba el envío de datos desde el cliente al servidor mediante el método GET, con
las siguientes instrucciones.

En el archivo views/login.ejs, en la etiqueta <form>

Modifique el atributo method con el valor "get"

En el archivo routes/login.js, agregue el manejador para procesar requerimientos


GET para la ruta "/validate". Sigue la guía que se encuentra en Get Query Strings
and Parameters in Express.js (https://stackabuse.com/get-query-strings-and-
parameters-in-express-js) .
Verifica los resultados en el navegador. Comprueba los resultados al acceder a la ruta
raíz "/",
Ingresa los datos usuario = "abc" y contraseña "123"
 

Fuentes

HTML Snippets for Twitter Boostrap framework : Bootsnipp.com. (2021). Retrieved 1 August
2021, from https://bootsnipp.com/snippets/dldxB (https://bootsnipp.com/snippets/dldxB)
Express Tutorial Part 6: Working with forms - Learn web development | MDN. (2021).
Retrieved 1 August 2021, from https://developer.mozilla.org/en-US/docs/Learn/Server-
side/Express_Nodejs/forms (https://developer.mozilla.org/en-US/docs/Learn/Server-
side/Express_Nodejs/forms)

Usuario iconos vectoriales gratuitos diseñados por Smashicons. (2021). Retrieved 1 August
2021, from https://www.flaticon.es/icono-gratis/usuario_149452?
related_id=149452&origin=pack (https://www.flaticon.es/icono-gratis/usuario_149452?
related_id=149452&origin=pack)

Get Query Strings and Parameters in Express.js. (2021). Retrieved 1 August 2021, from
https://stackabuse.com/get-query-strings-and-parameters-in-express-js
(https://stackabuse.com/get-query-strings-and-parameters-in-express-js)

https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-forms?module_item_id=135966 3/3

También podría gustarte