Acceso a una base de datos MongoDB desde NodeJS usando el framework Express y el motor de plantillas Jade (Pug). Se muestra cómo hacer una lectura de datos - un listado - y una escritura - inserción de datos recogidos en un formulario.
Si tienes poca o nula experiencia con MongoDB y/o NodeJS, te recomiendo echarle un vistazo a los siguientes repositorios antes de seguir:
- MongoDB - Instalación y primeros pasos
- Iniciación a NodeJS con ejemplos básicos
- NodeJS, Express y Jade (Pug). Ejemplos básicos.
La base de datos que se emplea en los ejemplos de este repositorio es la utilizada en el repositorio MongoDB - Instalación y primeros pasos.
Para importar a MongoDB la base de datos, primero clona este repositorio:
git clone https://github.com/LuisJoseSanchez/nodejs-mongodb-express-jade.gitEntra dentro del repositorio:
cd nodejs-mongodb-express-jadeY por último, restaura la base de datos de MongoDB:
mongorestore -d gestion dump/gestionmkdir mongodb-minicrud
cd mongodb-minicrud/
npm init
npm install express --save
npm install jade --save
npm install mongodb --saveAccederemos al listado mediante la URL http://localhost:8080/listado
Cre el fichero index.js:
var express = require('express');
var mongodb = require('mongodb')
var app = express();
app.set('view engine', 'jade');
var dbUrl = 'mongodb://localhost:27017/gestion';
app.get('/listado', function (req, res) {
mongodb.connect(dbUrl, function(err, db) {
db.collection('usuarios').find().toArray(function(err, docs) {
datos.usuarios = docs;
res.render('listado', datos);
});
});
});
app.listen(8080);Crea el fichero base.jade dentro de la carpeta views. Este fichero será la plantilla base.
Hemos utilizado MaterializeCSS para los estilos.
<!DOCTYPE html>
html(lang="es")
head
meta(charset="UTF-8")
title Mi página en Node + Express + Jade
// Compiled and minified CSS
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css")
// Compiled and minified JavaScript
script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js")
body
block contenido
hr
footer(class="center") © Luis José SánchezCrea el fichero listado.jade que será el que muestre los datos que le envía index.js.
extends ./base.jade
block contenido
div(class="container")
h1(class="center blue-text") Listado de usuarios
table(class="striped highlight")
tr
th Nombre
th Apellido
th Edad
th Pais
for u in usuarios
tr
td #{u.nombre}
td #{u.apellido}
td #{u.edad}
td #{u.pais}Ya tenemos un listado disponible en http://localhost:8080/listado. Vamos a implementar ahora la inserción de datos en la base de datos gestion de MongoDB.
Modificamos el fichero index.js:
var express = require('express');
var mongodb = require('mongodb')
var bodyParser = require('body-parser');
var app = express();
app.set('view engine', 'jade');
app.use(bodyParser.urlencoded({extended: true}));
var dbUrl = 'mongodb://localhost:27017/gestion';
app.get('/formulario', function (req, res) {
res.render('formulario');
});
app.post('/graba-usuario', function (req, res) {
let usuario = {
nombre: req.body.nombre,
apellido: req.body.apellido,
edad: req.body.edad,
pais: req.body.pais
};
console.log(JSON.stringify(usuario));
mongodb.connect(dbUrl, function(err, db) {
db.collection('usuarios').insert(usuario);
});
res.render('graba-usuario');
})
app.get('/listado', function (req, res) {
mongodb.connect(dbUrl, function(err, db) {
db.collection('usuarios').find().toArray(function(err, docs) {
datos.usuarios = docs;
res.render('listado', datos);
});
});
});
app.listen(8080);Crea el fichero formulario.jade que será el formulario que recoga los datos que se van a grabar: nombre, apellido, edad y pais.
extends ./base.jade
block contenido
div(class="container")
div(class="row")
h1 Registro de usuarios
form(action="/graba-usuario", method="post")
div(class="row")
div(class="col s12 m6 l6")
label(for="nombre") Usuario
input(type="text", name="nombre", placeholder="Nombre" id="nombre")
div(class="col s12 m6 l6")
label(for="apellido") Apellido
input(type="text", name="apellido", placeholder="Apellido" id="apellido")
label(for="edad") Edad
input(type="tenumber", name="edad", placeholder="Edad" id="edad")
label(for="pais") Pais
input(type="text", name="pais", placeholder="Pais" id="pais")
div(class="row")
div(class="col s12 center")
input(type="submit", value="Aceptar")Por último, el fichero graba-usuario.jade indicará que los datos se han guardado correctamente.
extends ./base.jade
block contenido
div(class="container")
p Usuario guardado correctamente.Para introducir nuevos datos, puedes ir a http://localhost:8080/formulario y para ver un listado con todos los usuarios a http://localhost:8080/listado.
Si te ha resultado útil este repositorio 🔧 recuerda que puedes ponerle una estrellita ⭐