History: Node.js y Heroku

Revision made 8 years ago by Francisco Presencia. Go to the last revision.

Hola

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

En un archivo que nos creamos llamado ".gitig­nore":

node_modules

In­stalar Ex­press.js:

npm install express --save

In­stalar ser­vidor auto­lanz­able:

npm install nodemon -g

Mostrar el index.html. En app.js, escribir:

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

Usar los documen­tos generados:

app.use(express.static('public'));

Crear un path que te caza todo:

app.get('/:nombre', function (req, res) {
  console.log(req.params);
  res.send(req.params);
});

Re­cuperar el html de forma dinámica:

app.get('/:nombre', function (req, res) {
  var file = __dirname + '/' + req.params.nombre + '.html';
  res.sendFile(file);
});

Post

Vamos a pro­bar a en­viar un for­mulario y re­cuperar­lo. Primero nos creamos el for­mulario en "con­tact.html":

<!DOCTYPE html>
<html>
  <head>
    <title>Página Web</title>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.1.1/picnic.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <form action="/contacto" method="POST" class="contact">
      <h1>Contacto</h1>
      <input placeholder="Nombre">
      <input placeholder="Apellidos">
      <input placeholder="Edad">
      <input type="submit" value="Enviar">
    </form>

  </body>
</html

Y en "style.css":

.contact {
  width: 500px;
  margin: 100px auto;
}

.contact input {
  margin-top: 0;
  margin-bottom: 10px;
}

In­stalar el modulo de lec­tura de datos de for­mulario:

npm install body-parser --save

Después en app.js:

var bodyparser = require('body-parser');

app.use(bodyparser.urlencoded({ extended: false }));

Estruc­tura:

<main>
  <div class="gallery">
    <div class="flex three">
      <div class="element" data-id="1">
        <img src="/images/mandarinas.jpg">
        <button class="like">Like</button>
        <button class="dislike error">Dislike</button>
      </div>
      <div class="element" data-id="2">
        <img src="/images/naranjas.jpg">
        <button class="like">Like</button>
        <button class="dislike error">Dislike</button>
      </div>
      <div class="element" data-id="3">
        <img src="/images/mandarinas.jpg">
        <button class="like">Like</button>
        <button class="dislike error">Dislike</button>
      </div>
    </div>
  </div>
</main>

Ejer­cicio: hacer un botón de dis­like que llame a la ruta "/dis­like" por POST y muestre en la con­sola del navegador lo que de­vuel­ve el ser­vidor.