sql >> Base de Datos >  >> NoSQL >> MongoDB

Implementación de paginación con MongoDB, Express.js y Slush

MongoDB acepta y proporciona acceso a datos en formato de notación de objetos de Javascript (JSON), lo que lo convierte en una opción perfecta cuando se trata de servicios de transferencia de estado de representación (REST) ​​basados ​​en JavaScript. En esta publicación, echaremos un vistazo a la Paginación usando MongoDB y construiremos una aplicación Express/Mongojs simple usando slush-mongo. Luego, usaremos skip() y límite()  para obtener los registros requeridos de un conjunto de datos.

La paginación es una de las formas más sencillas de aumentar la UX cuando se trata de conjuntos de datos de promedio a grandes.

  1. Divida todos los datos en x registros por página para obtener (total de registros/x) páginas.
  2. A continuación, mostramos una paginación con el número de páginas.
  3. A medida que el usuario hace clic en el número de página, buscamos y recuperamos el conjunto de registros solo para esa vista en particular.

Puedes encontrar una demostración en vivo de la aplicación aquí y el código completo para esta aplicación aquí.

Configurar el proyecto de paginación

Cree una nueva carpeta llamada mongoDBPagination. Abra la terminal/prompt aquí. A continuación, instalaremos gulp , aguanieve y granizado-mongo módulos. Ejecutar:


$ [sudo] npm i -g gulp slush slush-mongo

Una vez hecho esto, ejecute:


$ slush mongo

Se le harán algunas preguntas y puede responderlas de la siguiente manera:


[?] Which MongoDB project would you like to generate? Mongojs/Express
[?] What is the name of your app? mongoDBPagination
[?] Database Name: myDb
[?] Database Host: localhost
[?] Database User:
[?] Database Password:
[?] Database Port: 27017
[?] Will you be using heroku? (Y/n) n

Esto creará una aplicación Express/Mongojs simple para nosotros. Una vez finalizada la instalación, ejecuta:


$ gulp

Luego, abra http://localhost:3000 en su navegador favorito y debería ver una tabla con una lista de rutas configuradas en la aplicación. Esto confirma que ha instalado todo correctamente.

Configurar una base de datos de prueba

A continuación, crearemos una nueva colección llamada 'testData ' y luego completar algunos datos de prueba en él. Luego, mostraremos estos datos en una tabla paginada. Abra una nueva Terminal/mensaje y ejecute:


$ mongo

Luego, seleccione su base de datos ejecutando:


use myDb

Luego, copie el fragmento a continuación y péguelo en el shell de mongo y presione regresar:

for(var i = 1; i <= 999; i++) {
 db.testData.insert({

 name: Math.random()
           .toString(36)
           .substring(7),

 age: Math.floor(Math.random() * 99),

 random: Math.random()
             .toString(36)
             .substring(7)
 });
}

Esto generará 999 registros de muestra con algunos datos aleatorios. Un registro de muestra se verá así:


{
 "_id":"5392a63c90ad2574612b953b",
 "name": "j3oasl40a4i",
 "age": 73,
 "random": "vm2pk1sv2t9"
}

Estos datos estarán paginados en nuestra aplicación.

Configurar la base de datos

Dado que agregamos una nueva colección, necesitamos actualizar nuestra configuración de Mongojs DB para leer desde 'testData ‘.

Abra mongoDBPagination/config/db.js y actualice la línea 17 desde:


var db = mongojs(uristring, ['posts']);

a:


var db = mongojs(uristring, ['posts', 'testData']);

Crear el punto final de paginación

Ahora, construiremos nuestro código de servidor creando un punto final REST, donde el cliente nos hará saber qué datos quiere.

Lógica de paginación

La lógica para la paginación es bastante simple. Nuestra colección de base de datos consta de registros y queremos recuperar y mostrar solo unos pocos en una instancia determinada. Esto es más una cuestión de UX para mantener el tiempo de carga de la página al mínimo. Los parámetros clave para cualquier código de paginación serían:

  1. Registros totales

    El número total de registros en la base de datos.

  2. Tamaño

    Tamaño de cada conjunto de registros que el cliente quiere mostrar.

  3. Página

    La página para la que se deben obtener los datos.

Digamos que el cliente quiere 10 registros de la primera página, solicitará:


{
   page : 1,
   size : 10
}

El servidor interpretará esto como:el cliente necesita 10 registros que comiencen desde el índice 0 (página:1).

Para obtener los datos de la tercera página, el cliente solicitaría:


{
   page : 3,
   size : 10
}

Ahora, el servidor interpretará como:el cliente necesita 10 registros que comiencen desde el índice 20 (página:1 * tamaño).

Entonces, al observar el patrón anterior, podemos concluir que si el valor de la página es 1, comenzaremos a obtener los datos del registro 0, y si el valor de la página es mayor que 1, comenzaremos a obtener los datos de la página multiplicada por el tamaño ( página*tamaño).

Soporte de MongoDB

Ahora tenemos una comprensión de la lógica de paginación, pero ¿cómo transmitimos lo mismo a MongoDB?

MongoDB nos proporciona 2 métodos para lograr esto

  1. saltar

    Una vez completada la consulta, MongoDB moverá el cursor al valor de skip.

  2. límite

    Una vez que MongoDB comience a completar registros, recopilará solo el límite número de registros.

¿Simple verdad? Usaremos estos dos métodos junto con find() para obtener los registros.

Continuar el desarrollo

Ahora, creemos un nuevo archivo llamado paginator.js dentro de mongoDBPagination/routes carpeta donde configuraremos nuestro punto final de paginación. Abra paginator.js y agregue el siguiente código:

module.exports = function (app) {
   var db = require('../config/db')
   api = {};

   api.testData = function (req, res) {
      var page = parseInt(req.query.page),
         size = parseInt(req.query.size),
         skip = page > 0 ? ((page - 1) * size) : 0;

      db.testData.find(null, null, {
         skip: skip,
         limit: size
      }, function (err, data) {
         if(err) {
            res.json(500, err);
         }
         else {
            res.json({
               data: data
            });
         }
      });
   };
   app.get('/api/testData', api.testData);
};
  • Líneas 6-7: Obtenemos el número de página y el tamaño de página de los parámetros de solicitud.
  • Línea 8: Configuramos el skip valor.
  • Línea 10: Consultamos la base de datos usando el método de búsqueda, pasando null como los primeros 2 argumentos para satisfacer la firma del método de find() .

En el tercer argumento del método de búsqueda, pasaremos el criterio de filtro y, una vez que obtengamos los resultados, responderemos con un JSON.

Para probar esto, asegúrese de que su servidor esté funcionando y navegue hasta:

http://localhost:3000/api/testdata?page=1&size=2

Debería ver los dos primeros registros de la colección y puede modificar los valores de página y tamaño para ver resultados diferentes.

Crear el cliente

Ahora crearemos el cliente que implementará la paginación usando tablas de Bootstrap para mostrar los datos y el complemento de bootpag para manejar el buscapersonas.

Primero, instalaremos Bootstrap. Ejecutar:


$ bower install bootstrap

A continuación, descargaremos jquery.bootpag.min.js de aquí a public/js carpeta. Actualizar views/index.html como:

<!DOCTYPE html>
<html>
<head>
	<title><%= siteName %></title>
	<link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="javascript:"><%= siteName %></a>
        </div>
      </div>
    </div>
    <div class="container">
    <h1>My Data</h1>
        <table class="table">
          <thead>
            <tr>
              <th>_id</th>
              <th>Name</th>
              <th>Age</th>
              <th>Random</th>
            </tr>
          </thead>
          <tbody>
            <!-- we will populate this dyanmically -->
          </tbody>
        </table>
        <div id="pager" class="text-center"></div>
        <input type="hidden" value="<%= totalRecords %>" id="totalRecords">
        <input type="hidden" value="<%= size %>" id="size">
    </div>
  <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery.bootpag.min.js"></script>
	<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>

Y finalmente, escribiremos la lógica para llenar la tabla. Abra js/script.js y rellénalo como:

// init bootpag
$('#pager').bootpag({
    total: Math.ceil($("#totalRecords").val()/$("#size").val()),
    page : 1,
    maxVisible : 10,
    href: "#page-{{number}}",
}).on("page", function(event, /* page number here */ num) {
    populateTable(num);

});

var template = "<tr><td>_id</td><td>name</td><td>age</td><td>random</td>";

var populateTable = function (page) {
	var html = '';
	$.getJSON('/api/testdata?page='+page+'&size='+ $("#size").val(), function(data){
		data = data.data;
		for (var i = 0; i < data.length; i++) {
			var d = data[i];
			html += template.replace('_id', d._id)
							.replace('name', d.name)
							.replace('age', d.age)
							.replace('random', d.random);
		};
		$('table tbody').html(html);
	});
};

// load first page data
populateTable(1);

Ahora, navega a:

http://localhost:3000

Ahora debería ver la tabla y el componente de buscapersonas. Puede hacer clic en los números de página para navegar a través de los datos.

¡Simple y fácil! Espero que tenga una idea sobre cómo implementar la paginación usando MongoDB.

Puede encontrar el código de esta aplicación aquí.

Para obtener más detalles sobre el rendimiento de la operación de paginación, consulte nuestra otra publicación de blog: Paginación rápida con MongoDB

Gracias por leer. Comente.
@arvindr21