Programación web dinámica

Servidor

Primero hay que ejecutar las primeras dos instrucciones que aparecen en el recuadro superior (desde la línea de comandos/terminal) y, una vez hecho eso, se crea el archivo que se describe en el recuadro inferior

 

Por último, se ejecuta la última instrucción del recuadro superior

npm init -y
npm install express

// crear archivo server.js

node server.js | npm start

Servidor

const express = require("express");
const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.send("¡Hola, mundo!");
});

app.listen(PORT, () => {
  console.log(
    `El servidor está escuchando en la dirección http://localhost:${PORT}`
  );
});

npm install pug --save
const express = require("express");
const app = express();
const PORT = 3000;

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.render("index");
});

app.listen(PORT, () => {
  console.log(
    `El servidor está escuchando en la dirección http://localhost:${PORT}`
  );
});

Ejecuta la siguiente línea desde la línea de comando

Escribe lo siguiente en el el archivo views/index.pug

#intro
        h1 ¡Hola, mundo!
        h3 Esto es una vista generada por JS

Por último, ajusta el archivo server.js

const express = require("express");
const app = express();
const PORT = 3000;

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.redirect("/principal");
});

app.get("/principal", (req, res) => {
  res.render("index");
});

app.get("/contacto", (req, res) => {
  res.render("index");
});

app.get("/extra", (req, res) => {
  res.render("index");
});

app.listen(PORT, () => {
  console.log(
    `El servidor está escuchando en la dirección http://localhost:${PORT}`
  );
});

Ajusta, de nuevo, el archivo server.js

const express = require("express");
const app = express();
const PORT = 3000;

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.redirect("/principal");
});

app.get("/principal", (req, res) => {
  res.render("index", {
    etiquetas: "principal, inicio",
    contenido: "Este es el contenido de la página principal",
  });
});

app.get("/contacto", (req, res) => {
  res.render("index", {
    etiquetas: "contacto, correo",
    contenido: "Y se supone que acá va el formulario de contacto",
  });
});

app.get("/extra", (req, res) => {
  res.render("index", {
    etiquetas: "extra, misceáneos",
    contenido: "Este espacio está reservador para... whatever",
  });
});

app.listen(PORT, () => {
  console.log(
    `El servidor está escuchando en la dirección http://localhost:${PORT}`
  );
});

Ajusta, de nuevo, el archivo server.js...

body
    .wrap
        .information
            .information__heading
                span.information__heading__tag= etiquetas
            p.information__description #{contenido}

... y el archivo views/index.pug

const data = require("./data/paginas.json");
const express = require("express");
const app = express();
const PORT = 3000;

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.redirect("/principal");
});

app.get("/principal", (req, res) => {
  res.render("index", data.principal);
});

app.get("/contacto", (req, res) => {
  res.render("index", data.contacto);
});

app.get("/extra", (req, res) => {
  res.render("index", data.extra);
});

app.listen(PORT, () => {
  console.log(
    `El servidor está escuchando en la dirección http://localhost:${PORT}`
  );
});

Ajusta, de nuevo, el archivo server.js...

{
  "principal": {
    "etiquetas": "principal, inicio",
    "contenido": "Este es el contenido de la página principal"
  },
  "contacto": {
    "etiquetas": "contacto, correo",
    "contenido": "Y se supone que acá va el formulario de contacto"
  },
  "extra": {
    "etiquetas": "extra, misceáneos",
    "contenido": "Este espacio está reservador para... whatever forever"
  }
}

... y agrega el archivo data/paginas.json con el contenido siguiente:

const data = require("./data/paginas.json");
const express = require("express");
const app = express();
const PORT = 3000;

app.use(express.static(__dirname + "/public"));
app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.redirect("/principal");
});

app.get("/principal", (req, res) => {
  res.render("index", data.principal);
});

app.get("/contacto", (req, res) => {
  res.render("index", data.contacto);
});

app.get("/extra", (req, res) => {
  res.render("index", data.extra);
});

app.listen(PORT, () => {
  console.log(
    `El servidor está escuchando en la dirección http://localhost:${PORT}`
  );
});

Por último, vuelve a ajustar el archivo server.js...

doctype html
html
head
    title=titulo
    link(rel='stylesheet', href='/css/estilo.css')
    script(src='js/script.js')
    meta(name='viewport' content='windth=device-width, initial-scale=1')
body
    .wrap
        .information
            .information__heading
                span.information__heading__tag= etiquetas
            p.information__description #{contenido}

... el archivo views/index.pug...

... el archivo data/paginas.json...

{
  "principal": {
    "etiquetas": "principal, inicio",
    "contenido": "Este es el contenido de la página principal",
    "titulo": "Principal"
  },
  "contacto": {
    "etiquetas": "contacto, correo",
    "contenido": "Y se supone que acá va el formulario de contacto",
    "titulo": "Contacto"
  },
  "extra": {
    "etiquetas": "extra, misceáneos",
    "contenido": "Este espacio está reservador para... whatever forever",
    "titulo": "Extra"
  }
}

body {
    background-color: #efefef;
}

... agrega el archivo public/css/estilo.css...

... y agrega el archivo public/js/script.js

console.log("Cargando script.js");

Programación web dinámica: Servidor

By Gilberto 🦁

Programación web dinámica: Servidor

Servidor

  • 28

More from Gilberto 🦁