Node.js y Express: Aplicación con MongoDB Parte II

CRUD (continuación)

Empecemos esta parte con el read/retreave.

Obteniendo la lista de usuarios (read/retreave)

Abrimos controllers/user/index.js y agregamos un control adore para la ruta “get /user”, este se encargará de encontrar todos los usuarios que existan en la base de datos y mostrarlos en una vista:

app.get('/user', function(request, response) { db .User .find() .exec(function (error, users) { if (error) return res.json(error); return response.render('index', { users: users }); }); });

12345678910111213141516 appget('/user',function(request,response){   db  User  find()  exec(function(error,users){   if(error)returnresjson(error);   returnresponserender('index',{  users:users  });   }); });

Ahora procedemos a crear la vista. En el directorio views del mismo módulo. Agregamos index.jade. aquí vamos a desplegar una lista de usuarios:

h1 Usuarios ol each user, i in users li span #{user.name}

123456 h1 Usuarios ol  eachuser,iinusers  li  span#{user.name}

Luego de esto reinicidamos el servidor en la consola y navegamos a “localhost:3000/user” y veremos nuestra lista de ususarios.

Actualizando usuarios (update)

Agreguemos un controlador para editar los datos del usuario. El procedimiento consiste en crear dos controladores, uno para mostrar un formulario de edición de usuario y otro para recibir los cambios y guardarlos en la base de datos.

Creemos primero el controlador para mostrar el formulario:

app.get('/user/edit/:id', function(request, response) { var userId = request.params.id; db .User .findById(userId, function (error, user) { if (error) return response.json(error); response.render('edit', user); }); });

123456789101112131415 appget('/user/edit/:id',function(request,response){   varuserId=requestparamsid;   db  User  findById(userId,function(error,user){   if(error)returnresponsejson(error);   responserender('edit',user);   }); });

Ahora el controlador para guardar en base de datos:

app.put('/user/:id', function(request, response) { var user = request.body, userId = request.params.id; delete user.id; delete user._id; db .User .findByIdAndUpdate(userId, user, function (error, users) { if (error) return response.json(error); response.redirect('/user'); }); });

12345678910111213141516171819 appput('/user/:id',function(request,response){   varuser=requestbody,  userId=requestparamsid;   deleteuserid;  deleteuser_id;   db  User  findByIdAndUpdate(userId,user,function(error,users){   if(error)returnresponsejson(error);   responseredirect('/user');   }); });

Eliminamos el id del objeto “user” que llegó al controlador ya que este no debería poder ser modificado.

Ahora creamos la vista en el directorio views

h1 Editar Usuario form(method="POST", action="/user/" + _id) p Nombre: input(type="text" name="name", value=name) p Fecha de nacimiento: input(type="date" name="birthdate", value=birthdate) p ¿Es administrador?: input(type="checkbox" name="isAdmin", checked=isAdmin) input(type="hidden" name="_method" value="put") p button(type="submit") Enviar

1234567891011121314151617 h1 Editar Usuario form(method="POST",action="/user/"+_id)   pNombre:  input(type="text"name="name",value=name)   pFecha de nacimiento:  input(type="date"name="birthdate",value=birthdate)   p¿Es administrador?:  input(type="checkbox"name="isAdmin",checked=isAdmin)   input(type="hidden"name="_method"value="put")   p  button(type="submit")Enviar

En este formulario agregamos los valores en los campos para ser editados, estos valores vienen directo desde el controlador.

También podrás notar que agregamos un campo oculto input(type="hidden" name="_method" value="put"). Como los formularios solo soportan los métodos GET y POST, tenemos que emplear este truco para poder usar PUT o DELETE dependiendo del caso.

La experiencia de usuario es uno de los propósitos más importantes del desarrollo de software. Dicho esto, la mejor manera de seleccionar un usuario para editar sus datos es agregar un link al lado de cada uno en la lista que creamos anteriormente para que nos direcciones a la vista de editar. La lista debe lucir ahora de la siguiente manera:

h1 Usuarios ol each user, i in users li #{user.name} - a(href="/user/edit/"+user.id) editar

123456 h1 Usuarios ol  eachuser,iinusers  li#{user.name} -  a(href="/user/edit/"+userid)  editar

Eliminando usuarios (Delete/Destroy)

Este es probablemente el más sencillo de todos. Igual que el “editar”, la mejor opción es agregar un link a cada usuario en la lista que permita direccionarnos a una ruta que elimine el usuario. La lista ahora cambia de la siguiente manera:

h1 Usuarios ol each user, i in users li #{user.name} | a(href="/user/edit/"+user.id) editar | - a(href="/user/delete/"+user.id) eliminar

12345678 h1 Usuarios ol  eachuser,iinusers  li#{user.name} |  a(href="/user/edit/"+userid)  editar  |  -  a(href="/user/delete/"+userid)  eliminar

Para terminar agregamos el controlador para eliminar:

app.get('/user/delete/:id', function(request, response) { var userId = request.params.id; db .User .findByIdAndRemove(userId, function (error, users) { if (error) return response.json(error); response.redirect('/user'); }); });

123456789101112131415 appget('/user/delete/:id',function(request,response){   varuserId=requestparamsid;   db  User  findByIdAndRemove(userId,function(error,users){   if(error)returnresponsejson(error);   responseredirect('/user');   }); });

Conclusión

Con este tutorial cerramos esta serie, pero no te preocupes, no será el ultimo tutorial que ofrezca Codehero sobre node.js.

Ahora que ya tienes los conocimientos básicos para desarrollar usando esta poderosa herramienta, quiero ver tus propias apps. Escríbenos en los comentarios y haznos saber de ti.

Gracias por leer. Hasta la próxima.