Aprendamos cómo usar javascript para programar un servidor basado en Node.js y subir la web a Heroku
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 ".gitignore":
node_modules
Instalar Express.js:
npm install express --save
Instalar servidor autolanzable:
npm install nodemon -g
Mostrar el index.html. En app.js, escribir:
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
Usar los documentos 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);
});
Recuperar el html de forma dinámica:
app.get('/:name', function (req, res) {
var file = __dirname + '/' + req.params.name + '.html';
res.sendFile(file);
});
Post
Vamos a probar a enviar un formulario y recuperarlo. Primero nos creamos el formulario en "contact.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;
}
Instalar el modulo de lectura de datos de formulario:
npm install body-parser --save
Después en app.js:
var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({ extended: false }));
Estructura:
<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>
Ejercicio: hacer un botón de dislike que llame a la ruta "/dislike" por POST y muestre en la consola del navegador lo que devuelve el servidor.