Skip to content

Latest commit

 

History

History
233 lines (202 loc) · 6.24 KB

dia77.md

File metadata and controls

233 lines (202 loc) · 6.24 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Master en Programación de Aplicaciones con JavaScript y Node.js

JS, Node.js, Frontend, Express, Patrones, IoT, HTML5_APIs, Asincronía, Websockets, ECMA6, ECMA7

Clase 77

Express en resumen

  • GET Básico

    app.get('/hola', function(req, res){
    res.send('hemos abierto una nueva ruta!');
});

  • POST Básico

    • app.js
    app.post('/', function(req, res){
  res.send(req.body);
});
    • index.jade
    section.container
h1 Manda tu mensaje!

form(method='post', action='/')
  fieldset
    legend Mandame tu mensaje:
    p.contenido
      label Tu mensaje
      input(name='mensaje')
    p.acciones
      input(type='submit', value='Enviar')
    • respuesta
    {
  "mensaje": "Hola Cracks!"
}

  • Parámetros en las rutas

    • app.js
    app.get('/hola/:usuario', function(req, res){
    res.send('Hola '+req.params.usuario+'. Hemos abierto una nueva ruta personalizada!');
});

  • Simulando una respuesta de una base de datos en las rutas:

    • app.js
    app.get('/consulta/:usuario', function(req, res){
    var datos = {
        marca: "Seat",
        modelo: "Ibiza",
        edad: 20,
        ITVPasada: true,
        seguroPasado: true
    };
    
    res.render('consulta.jade', {usuario: req.params.usuario, datos: datos});
});
    • consulta.jade
    .datos
  h3 Datos: 
  p= "El Coche de "+usuario+" es un "+datos.marca+" "+datos.modelo
    
  h3 Detalles técnicos:
  ul
      li= "ITV en regla: " +datos.ITVPasada 
      li= "seguro en regla: " +datos.seguroPasado

Utilidades

PUG (antes Jade)

Jade_logo

Jade... ya no se llama jade. Ahora se llama PUG

PUG_logo

Implementaciones en otros lenguajes

  • php

  • scala

  • ruby

  • python

  • java

  • Entendiendo la mécanica

    • index.jade:
    doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
    • index.html:
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

  • Bootstrap:

    • index.jade:
    doctype html
html
  head
    title title
    include ./includes/styles.jade
  body
    .row
      .container
        .jumbotron
          h1 Hola, desde Bootstrap!
          p ¿Qué te parece?
          p
            a.btn.btn-primary.btn-lg(href='http://getbootstrap.com/', role='button') Aprende más!
    include ./includes/scripts.jade
    • includes/styles.jade
    //- includes/styles.jade
// Bootstrap
link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
    • includes/scripts.jade
    //- includes/scripts.jade
// Jquery
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
// Bootstrap
script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
    • index.html
    <!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <!-- Bootstrap-->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        </head>
        <body>
            <div class="row">
                <div class="container">
                    <div class="jumbotron">
                        <h1>Hello, desde Bootstrap!</h1>
                        <p>¿Qué te parece?</p>
                        <p>
                            <a href="http://getbootstrap.com/" role="button" class="btn btn-primary btn-lg">Aprende más!</a>
                        </p>
                    </div>
                </div>
            </div>
            <!-- Jquery-->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <!-- Bootstrap-->
            <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        </body>
    </html>

  • Pug - Github

  • Pug - Getting Started

  • Jade Syntax Documentation by example