Algo bastante útil a la hora de recoger datos en una petición, en una página web, son las variables de tipo GET. Variables que son visibles en la url lo cual nos permite por ejemplo darle un aspecto de tipo dinámico a la misma, por ejemplo un buscador, en donde se recuperan variables dependerán de los valores que se pasen por la url.
Una url con una variable de tipo GET tiene un aspecto como éste:
https://mipagina/?productos=zapatos
En este caso nuestra página recuperará una variable llamada productos con un valor «zapatos».
Incluso la url puede recuperar más de una variable por ejemplo:
https://mipagina/?productos=zapatos&color=negro
Bien, ahora para recuperar una variable de tipo GET con Node deberíamos tener un código como éste:
var http = require('http');
var url = require('url');
http.createServer(function(peticion, respuesta){
var query = url.parse(peticion.url,true).query;
var variableget = query.variableget;
respuesta.writeHead(200, {'Content-Type': 'text/html'});
respuesta.end(variableget);
}).listen(3000, '127.0.0.1');
console.log('Servidor iniciado.');
Primero incluimos los módulos de http y url, módulos que ya hemos utilizado anteriormente. Y luego creamos un objeto que nos permitirá acceder a las distintas variables GET:
var query = url.parse(peticion.url,true).query;
Para recuperar el valor de cada variable GET debemos llamar al objeto e invocar una propiedad con el mismo nombre de variable.
Si iniciamos el servidor con este código y escribimos en nuestro navegador algo como esto:
https://localhost:3000/?variableget=hola
Entonces nos mostrará por pantalla el valor de variableget que es «hola».
Bien ahora para finalizar la publicación vamos a hacer un pequeño ejemplo. Vamos a crear tres grupos de animales: aves, mamíferos y reptiles y los mostraremos en un combo y al seleccionar uno nos devolverá un listado de animales que pertenecen al mismo.
Para ello vamos a crear una carpeta nueva dentro de nuestros proyectos y dentro un archivo index.js y un directorios llamado modulos, y dentro de este último un archivo llamado animales.js al que editaremos con el siguiente código:
var lista = {
'aves': new Array('Loro' , 'Canario'),
'mamiferos': new Array('Perro' , 'Caballo' , 'Tigre'),
'reptiles': new Array('Cocodrilo', 'Tortuga', 'Iguana')
};
function dibujarCodigoHtml(grupo){
var html = '<!DOCTYPE html>';
html += '<html>';
html += '<head>';
html += '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
html += '</head>';
html += '<body>';
html += '<form action="">';
html += '<label> Seleccione el tipo de animal: </label>';
html += '<select name="grupo"> ' + listarGrupos(grupo) + ' </select>';
html += '<input type="submit" value="Listar" />';
html += '</form>';
html += listarAnimales(grupo);
html += '</body>';
html += '</html>';
return html;
}
function listarGrupos(grupo){
var html = '<option value=""> --- </option>';
var selected;
for (var item in lista) {
selected = (item == grupo) ? 'selected="selected"' : '';
html += '<option '+selected+' value="'+item+'"> ' + item + ' </option>';
}
return html;
}
function listarAnimales(grupo){
var html = '';
if(lista[grupo] != undefined){
html += '<ul>';
for (var i in lista[grupo]) {
html += '<li>' + lista[grupo][i] + '</li>';
}
html += '</ul>';
}
return html;
}
exports.dibujarCodigoHtml = dibujarCodigoHtml;
Analicemos el código. En primer lugar creamos un json con el listado de categorías y animales:
var lista = {
'aves': new Array('Loro' , 'Canario'),
'mamiferos': new Array('Perro' , 'Caballo' , 'Tigre'),
'reptiles': new Array('Cocodrilo', 'Tortuga', 'Iguana')
};
Luego creamos una función llamada dibujarCodigoHtml() que nos devolverá un código html con un formulario que dentro tendrá un combo y un botón para enviar el formulario:
function dibujarCodigoHtml(grupo){
var html = '<!DOCTYPE html>';
html += '<html>';
html += '<head>';
html += '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
html += '</head>';
html += '<body>';
html += '<form action="">';
html += '<label> Seleccione el tipo de animal: </label>';
html += '<select name="grupo"> ' + listarGrupos(grupo) + ' </select>';
html += '<input type="submit" value="Listar" />';
html += '</form>';
html += listarAnimales(grupo);
html += '</body>';
html += '</html>';
return html;
}
A su vez dentro de ésta se llamarán a otras dos, listarGrupos(), que recibirá como parámetro el grupo actual y nos devolverá un listado con todos los grupos:
function listarGrupos(grupo){
var html = '<option value=""> --- </option>';
var selected;
for (var item in lista) {
selected = (item == grupo) ? 'selected="selected"' : '';
html += '<option '+selected+' value="'+item+'"> ' + item + ' </option>';
}
return html;
}
Y una función llamada listarAnimales() que también recibirá como parámetro el grupo y buscará los animales que haya en ese grupo.
function listarAnimales(grupo){
var html = '';
if(lista[grupo] != undefined){
html += '<ul>';
for (var i in lista[grupo]) {
html += '<li>' + lista[grupo][i] + '</li>';
}
html += '</ul>';
}
return html;
}
Finalmente exportamos la función dibujarCodigoHtml() para que pueda llamarse desde el objeto al que se la ha exportado el módulo:
exports.dibujarCodigoHtml = dibujarCodigoHtml;
Ahora sólo nos queda editar nuestro archivo index.js para llamar a este módulo y pasar a la función dibujarCodigoHtml() el valor de la variable GET grupo para que pueda listar los animales del mismo dependiendo que cuál venga en la url:
var http = require('http');
var url = require('url');
var animales = require('./modulos/animales');
http.createServer(function(peticion, respuesta){
var query = url.parse(peticion.url,true).query;
var grupo = (query.grupo != undefined) ? query.grupo : '';
respuesta.writeHead(200, {'Content-Type': 'text/html'});
respuesta.end(animales.dibujarCodigoHtml(grupo));
}).listen(3000, '127.0.0.1');
console.log('Servidor iniciado.');
Simplemente importamos el módulo y al recibir cada petición recuperamos el valor de una variable GET llamada grupo. Con el método o función dibujarCodigoHtml(), al cual le pasamos como parámetro el valor del grupo, devolvemos el código html con el formulario y la lista de animales si el usuario ha elegido algún grupo.
Anterior: Introducción a Node.js, parte 3: Crear módulos
Siguiente: Introducción a Node.js, parte 5: Enviar formularios por POST
Hola Fercho, de nuevo reitero, me gusta tus tutoriales 😀 pero me invade una pequeña duda: ¿Como puedo enlazar un css al codigo html que esta en animales.js? Dentro de modulos y de la carpeta raiz, ingrese el css e ingrese dentro de animales.js, la linea de mi css, en mi caso: html += »;
Al compilarlo, me sale la pagina sin el formato ¿A que se debe?