Node con Gaitan

chuleta:  https://brusbilis.com/chuletas/servidor/expressjs/

Fuente; Node parte 7: Instalar Express

vamos a crear una nueva carpeta a la que yo voy a llamar: “primer_proyecto_express”

Vamos a entrar dentro de esa carpeta:

cd primer_proyecto_express

npm install -g express-generator

Y vamos a escribir desde la consola lo siguiente:

express

Una vez creado el esqueleto nos informará que sería bueno instalar también las dependencias, lo que ya veremos más adelante. Así que vamos a hacerle caso y vamos a instalarlas:

npm install

con la instruccion anterior se crea la carpeta NODE_MODULES

Bien, ahora que ya tenemos nuestro proyecto instalado podemos iniciarlo. Si entramos ahora dentro del mismo veremos que hay un archivo llamado app.js. Éste es nuestro archivo principal, así que vamos a compilarlo:

node app.js 

APP.JS

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// descomentar después de colocar su favicon en / public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
app.get('/prueba', function(req, res){
   res.send('Acción de prueba ');
});
// atrapar 404 y reenviar al controlador de errores
app.use(function(req, res, next) {
  var err = new Error('Not Found  -  NO encontrado');
  err.status = 404;
  next(err);
});
// error handler  - controlador de errores
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');
});
app.listen(3000, function(){
console.log("Escuchando en el puerto 3000");
});
module.exports = app;

var index = require('./routes/index');var users = require('./routes/users');

app.use('/', index);

app.use('/users', users);

app.get('/prueba', function(req, res){ res.send('Acción de prueba ');

/routes/index

var express = require('express');var router = express.Router();
/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { title: 'EXPRESS' });});
module.exports = router;

/routes/users

var express = require('express');var router = express.Router();
/* GET users listing. */router.get('/', function(req, res, next) {  res.send('Respondiendo con un recurso');});
module.exports = router;

Node.js, parte 8: Express y Jade

También, por supuesto, podemos combinar id y class:

div#contenedor.clase1.clase2 Contenido

Esto le devolverá al navegador:

<div id="contenedor" class="clase1 clase2">Contenido</div>

Etiquetas con atributos

Además de los id y las class, los elementos html pueden contener otros atributos, por ejemplo el elemento img, debería tener de forma obligatoria src y alt. Estos atributos se escriben dentro de un paréntesis y separados por coma:

[elemento](atributo1="valor1", atributo2="valor2")

Por ejemplo si quisiéramos mostrar una imagen:

img(src="https://www.google.com.ar/images/srpr/logo11w.png", alt="Imagen de Google")

Variables, condicionales y ciclos de repetición 

Si bien dentro de nuestras vistas no se resuelve la lógica, en muchas ocasiones es necesario escapar el código html para evaluar condiciones o recorrer ciclos de repetición.

En Jade debemos utilizar el signo menor (-) para indicar que estamos escapando dentro de una plantilla, y el signo igual (=) para imprimir variables.

Por ejemplo podríamos crear e imprimir una variable de esta forma:

-var saludo = "Hola a todos";
p= saludo

Como se ve en el ejemplo, escapamos dentro de la vista con el signo menor, para crear una variable llamada saludo. Y luego imprimimos el valor de la misma con un párrafo y el signo igual.

También podemos crear condicionales:

-var me_gusta_node = true;
-if(me_gusta_node)
  p Me gusta Node
-else
  p No me gusta Node

O recorrer ciclos de repetición:

-var colores = new Array('Verde', 'Amarillo', 'Rojo');
ul 
  -each item in colores
    li= item

También podemos pasar variables desde la acción al controlador. No lo dije antes, pero el método .render() permite pasar un segundo parámetro, que es un json con datos que se podrán acceder en la vista.

Vamos a modificar:

app.get('/prueba', function(req, res){
   res.render('prueba');
});

Por:

app.get('/prueba', function(req, res){
   res.render('prueba', {
      fruta: 'Manzana',
      color: 'Rojo'
   });
});

Incluir vistas

A su vez también podemos incluir otras vistas dentro de nuestra plantilla jade. Para ello vamos a crear un nuevo archivo en la carpeta “views”, al que yo llamaré “prueba2.jade” con el siguiente código:

-var frutas = new Array('Banana', 'Manzana', 'Naranja');
ul 
  -each item in frutas
    li= item

Y dentro de nuestra vista “prueba.jade” vamos a agregar la palabra include, seguida por el nombre de la vista:

include prueba2

Esto último es muy importante, ya que podremos recortar pedazos de código de vistas para que sean reutilizable, y así evitar repetir código como cabeceras, menús, pie de página, etc.

parte 9: Métodos GET y POST con express  (OJO LEER)

APP.JS

var mensajes = require('./routes/mensajes');

app.get('/mensaje/:indice', mensajes.get_mensaje); 

app.get('/enviar_mensaje', mensajes.get_enviar_mensaje);
app.post('/enviar_mensaje', mensajes.post_enviar_mensaje);

ROUTES/MENSAJES.JS

var lista = new Array();function enviar_mensaje(req, res){   res.render('mensajes/enviar_mensaje', {      lista: lista   });}exports.get_enviar_mensaje = function(req, res){   enviar_mensaje(req, res);}exports.post_enviar_mensaje = function(req, res){   var asunto = req.body.asunto;   var mensaje = req.body.mensaje;   lista.push({      asunto: asunto,      mensaje: mensaje   })   enviar_mensaje(req, res);}
exports.get_mensaje = function(req, res){   var indice = req.params.indice;   var mensaje = (lista[indice] != undefined) ? lista[indice] : null;   res.render('mensajes/mensaje', {      mensaje: mensaje   });}

VIEWS/MENSAJES/Mensaje.jade

extends ../layoutblock content  h1 Mensaje  -if(mensaje)    h2= mensaje.asunto    div= mensaje.mensaje  -else    p Mensaje no encontrado  p    a(href="/enviar_mensaje") Volver atrás

VIEWS/MENSAJES/Enviar_Mensaje.jade

extends ../layout
block content
  h1 Enviar mensaje
  form(method="post", action="/enviar_mensaje")
    label Asunto
    br
    input(type="text", name="asunto")
    br
    label Mensaje
    br
    textarea(cols="40", rows="10", name="mensaje")
    br
    input(type="submit", value="Enviar mensaje")
  ul
    ul
      -for (i in lista)
        li
          a(href="/mensaje/#{i}") #{lista[i].asunto}