Búsqueda en vivo de Ajax usando Angular y Node

La búsqueda en vivo es una de las partes más interactivas y obligatorias de cualquier aplicación web. Permite al usuario ver cómo su palabra clave de búsqueda está devolviendo el resultado y, por ese resultado, puede mejorar la palabra clave. La búsqueda Ajax, como la que usa Google, activa los usos del motor de búsqueda. La búsqueda de Facebook Graph es uno de los grandes ejemplos de manipulación de la búsqueda mediante palabras clave. Estos son ejemplos de búsqueda en vivo y si usted está buscando, entonces está en el lugar correcto.

DEMO EN VIVO DESCARGAR
En este tutorial, desarrollaré un cuadro de búsqueda en vivo simple ajax que toma la entrada del usuario y el resultado del filtro en vivo en la misma página. jQuery ahora es antiguo y los desarrolladores están cambiando a tecnología avanzada como Angular.js y Node.js para aplicaciones web de alto rendimiento. Entonces los usaremos para nuestra aplicación web aquí.

Si visita la página de demostraciones de Codeforgeek , intente poner palabras clave en el cuadro de texto y verá el resultado filtrado en vivo. Esto está sucediendo usando la palabra clave Angular.js. Así que vamos a sumergirnos en el código, primero te explicaré la estructura de directorios de nuestro proyecto.

Estructura de directorio después de completar la codificación.

Antes de la implementación, quiero explicar el funcionamiento de todo el sistema. Estamos usando la palabra clave ng-repeat ” para la búsqueda en vivo. Nos permite colocar los datos que necesitamos para la búsqueda en el extremo del cliente, por lo que para cada entrada clave no hay una llamada a la base de datos, lo que a su vez mejora el rendimiento del sistema. Aquí hay un gráfico que trata sobre el funcionamiento del sistema.


Creemos una base de datos simple y agreguemos algunos datos de muestra en ella.
Tengo una base de datos MySQL llamada ”
demos ” y dentro de una tabla llamada ” demo_cfg “. Cree cualquier base de datos de su elección usando phpmyadmin  y cree una tabla usando la siguiente Consulta O puede importar el archivo SQL que he proporcionado en las descargas. Aquí hay una estructura de tabla.

package.json
{
“name” : “demos-cfg” ,
“version” : “0.0.1” ,
“description” : “Búsqueda en vivo usando Angular y Node” ,
“main” : “Server.js” ,
“dependencias” : {
” ejs ” : ” ^ 1.0.0 ” ,
” express ” : ” ^ 4.8.6 ” ,
” mysql ” : ” ^ 2.4.3 ”
}
}

Permítame explicarle la lógica de back-end primero, vamos a crear un servidor Express que escucha en el puerto 7001. Tiene dos enrutadores (‘/’, ‘/ load’). En la primera solicitud, mostrará la página de inicio de la aplicación y en la segunda solicitud del enrutador cargará los valores de la base de datos. Hemos colocado todos los archivos JavaScript, CSS y archivos frontales (HTML) en una carpeta separada para evitar confusiones. Aquí está nuestro código esqueleto de Server.js.

Server.js
var express = require ( ‘express’ ) ;
var app = express ( ) ;
var mysql = require ( ‘mysql’ ) ;
var conexión = mysql. createConnection ( {

host
: ‘localhost’ ,

usuario
: ‘usuario mysql (generalmente root)’ ,

contraseña
: ‘Contraseña Mysql (generalmente en blanco)’ ,

base de datos
: ‘Su base de datos, en mi caso son demos’
} ) ;


conexión.
conectar ( función ( ) {

consola.
log ( “La base de datos MySQL está conectada” ) ;
} ) ;


aplicación.
use ( express. static ( __dirname + ‘/ css’ ) ) ;

aplicación.
use ( express. static ( __dirname + ‘/ js’ ) ) ;


aplicación.
set ( ‘vistas’ , __dirname + ‘/ vistas’ ) ;

aplicación.
motor ( ‘html’ , require ( ‘ejs’ ) . renderFile ) ;


aplicación.
get ( ‘/’ , function ( req , res ) {


res.
render ( ‘index.html’ ) ;

} ) ;


aplicación.
get ( ‘/ load’ , function ( req , res ) {


connection.
query (“seleccionar * de cfg_demos” ,
función ( err , filas , campos ) {
if ( err ) throw err ;

res.
end ( JSON. stringify ( filas ) ) ;
} ) ;

} ) ;


aplicación.
listen ( 7001 , function ( ) {

console.
log ( “La aplicación se inicia en el PUERTO 7001” ) ;
} ) ;

Como puede ver en el código, estamos haciendo nuestro código paso a paso. Primero definimos las dependencias, luego nos conectamos a la base de datos, luego definimos la ubicación de los archivos de front-end y finalmente definimos el enrutador y ejecutamos la aplicación. De esta manera, puede determinar fácilmente los errores si ocurrieron y también el código se ve hermoso.

Tenemos dos archivos JavaScript. app.js  y core.js  . En el primer archivo, definí la aplicación angular y en el segundo archivo puse el código del controlador angular. Déjame mostrarte los dos.

js / app.js
var app = angular.module (‘demos_cfg’, []);
js / core.js
aplicación. controller ( ‘main_control’ , function ( $ scope , $ http ) {

load_demos
( ) ;
function load_demos ( ) {

$ http.
get ( “http: // localhost: 7001 / load” ) . success ( function ( data ) {

$ alcance
.cargado_demos = datos ;
} )
}
} ) ;

Si eso es. Simplemente estamos llamando a la solicitud GET y obteniendo los datos almacenados en la variable $ scope.loaded_demos. Lo único que tenemos que hacer ahora es agregar un poco de código en el archivo HTML. Aquí tienes, archivo index.html.

vistas / index.html
 

< script src = “angular.js” type = “text / javascript” > < / script >
< script src = “app.js” type = “text / javascript” > < / script >
< script src = “core.js ” type = ” text / javascript “ > < / script > < div id = ” container “ > < span id = ” header “> CodeforGeek < /

 
span > < span id = “demo” >Demostraciones< / span >
< input id = “search” size = “40” type = “search” placeholder = “Buscar tutoriales, demostraciones y descargas …” / >
< tabla id = “showit” >
< tbody >
< tr >
< td >Título de la publicación< / td >
< td >Enlace del tutorial < / td >
< td > Enlace de demostración < / td >
< td > Enlace de descarga < / td >
< / tr >
< tr >
< td > {{data.title}} < / td >
< td > < botón id = “artículo” > < a href = “{{data.link}}” target = “_blank” rel =“noopener” > Leer artículo < / a > < / button > < / td >
< td > < button id = “demobutton” > < a href = “{{data.demo_link}}” target = “_blank” rel = ” noopener “ > Demostración en vivo < / a > < botón / > < / td >
< td > <button id = “downloadbutton” > <a href = “{{data.download}}” target = “_blank” rel = “noopener” >Descargar< / a > < / button > < / td >
< / tr >
< / tbody >
< / table >
< / div >

Tenga en cuenta esta línea ng-repeat = ”datos enloaded_demos | filtro: búsqueda . Esta línea básicamente realiza una búsqueda enloaded_demos, que no es más que datos de la base de datos. Esta búsqueda es en vivo y Angular lo hace internamente. No tienes que preocuparte por nada para hacerlo. Bastante interesante. Sí lo es.

Puede consultar la página Demos de codeforgeek para ver una demostración en vivo de este código.

Cómo ejecutar el código

Asegúrese de haber creado la base de datos con tablas como se muestra arriba. Descargue el código y cambie al directorio usando el símbolo del sistema y escriba

npm install

y una vez hecho esto, puedes ejecutar el proyecto usando

nodo Server.js

. Puede ver la salida en localhost: 7001.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *