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 ".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('/:nombre', function (req, res) { var file = __dirname + '/' + req.params.nombre + '.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.