Morioh
Login
Iñigo Martínez

Iñigo Martínez

10 months ago

Cómo recuperar datos de MongoDB en Node.js con Mongoose

En este tutorial, aprenderemos cómo recuperar datos de una base de datos MongoDB usando Mongoose en una aplicación Node.js Express y mostrarlos en una plantilla HTML EJS en este completo tutorial. Cubriremos todo, desde configurar su entorno de desarrollo hasta escribir el código Node.js, Mongoose y EJS necesario.

Este tutorial creará una tabla usando la biblioteca bootstrap 4. Luego cree una ruta e importe en el archivo app.js para recuperar datos de mongodb en node js express y mostrarlos en html ejs.

  • Paso 1: crear la aplicación Node Express js
  • Paso 2: Instale las dependencias de mangosta de express flash ejs body-parser
  • Paso 3: conecte la aplicación a MongoDB
  • Paso 4: crear modelo
  • Paso 5: crear rutas
  • Paso 6: crear una tabla HTML y una lista de visualización
  • Paso 7: importar módulos en App.js
  • Paso 8: inicie el servidor de aplicaciones

Paso 1: crear la aplicación Node Express js

Ejecute el siguiente comando en la terminal para crear la aplicación Node js:

mkdir my-app
cd my-app
npm init -y

Paso 2: Instale los módulos express flash ejs body-parser mongoose

Ejecute el siguiente comando en la terminal para expresar las dependencias de flash ejs body-parser mysql:

npm install -g express-generator
npx express --view=ejs

npm install

npm install express-flash --save
npm install express-session --save
npm install body-parser --save
npm install mongoose

Paso 3: conecte la aplicación a MongoDB

Cree el archivo Database.js en el directorio raíz de su aplicación y agregue el siguiente código para conectar su aplicación a la base de datos mongodb:

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/test', {useNewUrlParser: true});
var conn = mongoose.connection;
conn.on('connected', function() {
    console.log('database is connected successfully');
});
conn.on('disconnected',function(){
    console.log('database is disconnected successfully');
})
conn.on('error', console.error.bind(console, 'connection error:'));
module.exports = conn;

Paso 4: crear modelo

Cree el directorio Modelos y dentro de este directorio cree el archivo userModel.js; Luego agregue el siguiente código:

const mongoose = require("../database");
 
// create an schema
var userSchema = new mongoose.Schema({
            name: String,
            email:String
        });
 
var userModel=mongoose.model('users',userSchema);
 
module.exports = mongoose.model("Users", userModel);

Paso 5: crear rutas

Crear rutas; así que visite el directorio de rutas y abra el archivo de ruta users.js; Luego agregue las siguientes rutas:

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var userModel = require('../models/userModel');
 
 
/* GET home page. */
router.get('/', function(req, res, next) {
      
    userModel.find((err, docs) => {
        if (!err) {
            res.render("list", {
                data: docs
            });
        } else {
            console.log('Failed to retrieve the Course List: ' + err);
        }
    });
 
});
module.exports = router;

Paso 6: crear una tabla HTML y una lista de visualización

Cree un formulario html para mostrar la lista desde la base de datos mongodb; Así que visite el directorio de vistas y cree el archivo list.ejs dentro de él. Luego agregue el siguiente código:

<!DOCTYPE html>
<html>
<head>
  <title>fetch data from mongodb using node js and display in html</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
  <div>
    <a href="/customers" class="btn btn-info ml-3">Fetch  data from mongodb using node js and display in html</a>
</div>    
<!--   <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
<% } %> -->
  
<% if (messages.success) { %>
    <p class="alert alert-success mt-4"><%- messages.success %></p>
<% } %>  
<br>
  <table class="table">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
 
  </tr>
</thead>
<tbody>
  <% if(data.length){
 
  for(var i = 0; i< data.length; i++) {%>  
  <tr>
    <th scope="row"><%= (i+1) %></th>
    <td><%= data[i].name%></td>
    <td><%= data[i].email%></td>
  </tr>
  <% }
           
   }else{ %>
       <tr>
          <td colspan="3">No user</td>
       </tr>
    <% } %>    
  
</tbody>
</table>
</body>
</html>

Paso 7: importar módulos en App.js

Importe las dependencias de mangosta del analizador corporal de la sesión flash rápida en app.js; Como se muestra abajo:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var flash = require('express-flash');
var session = require('express-session');
var usersRouter = require('./routes/users');
 
 
var app = express();
 
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
 
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
app.use(session({ 
    secret: '123456catr',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 }
}))
 
app.use(flash());
app.use('/list', usersRouter);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});
 
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
 
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
 
// port must be set to 3000 because incoming http requests are routed from port 80 to port 8080
app.listen(3000, function () {
    console.log('Node app is running on port 3000');
});
 
module.exports = app;

Paso 8: inicie el servidor de aplicaciones

Puede utilizar el siguiente comando para iniciar el servidor de aplicaciones node js:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/list

En este tutorial, ha aprendido cómo buscar y mostrar datos en una lista html de la base de datos mongoDB utilizando la aplicación mongoose node js express.

1.70 GEEK