History: Hacer un Blog

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

Vamos a hacer un blog desde cero. Va a tener una funcionalidad muy básica, sin ni siquiera incluir un sistema de usuarios.

Preparación

Tendremos que tener instalado todo lo que hemos ido explicando a lo largo del resto de pasos.

Creamos una nueva carpeta que se llame "Blog" y accedemos a ella desde la terminal. Dentro creamos la siguiente estructura de archivos:

Blog/
  controller/
    blog.js
  model/
    post.js
  views/
    article.jade
    index.jade
    layout.jade
    write.jade
  public/
    ...

  app.js
  Procfile
  package.json

Configuración del servidor

Empecemos por app.js, que es donde se está ejecutando el servidor basado en express.js. Dentro de app.js tendremos:

// Definición de las variables a usar
var express = require('express');
var app = express();

var bodyparser = require('body-parser');
var mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/test');

var blogController = require('./controller/blog');



// Configuración del servidor
app.set('views', './views');
app.set('view engine', 'jade');

app.use(express.static('public'));
app.use(bodyparser.urlencoded({ extended: false }));



// Las rutas que acepta blog
app.get('/', blogController.index);
app.get('/write', blogController.write);
app.post('/write', blogController.save);
app.get('/:id', blogController.article);


// Lanzar el servidor en el puerto que toca
app.listen(process.env.PORT || 3000, function () {
  console.log('Example app listening on port 3000!');
});

Como vemos, lo único que están haciendo las rutas es llamar al controlador que se encuentra en controller/blog.js y el resto de app.js es configuración de diferentes tipos del servidor.

Ahora abrimos controller/blog.js a ver qué tiene:

var postModel = require('../model/post.js);

// Muestra una lista con todos los artículos
module.exports.index = function(req, res){
  postModel.find({}, function(err, posts){
    res.render('index', { posts: posts });
  });
}

// Muestra un único artículo
module.exports.article = function(req, res){
  postModel.findOne({ _id: req.params.id }, function(err, entry){
    if (err) console.log(err);
    res.render('article', entry);
  });
}

// Muestra el formulario para escribir un nuevo artículo
module.exports.write = function(req, res){
  res.render('write');
}

// Guarda el nuevo post cuando lo enviamos
module.exports.save = function(req, res){
  var entry = new postModel(req.body);
  entry.save(function(err, saved){
    if (err) console.log(err);
    res.json(saved);
  });
}

Y por último, dentro del model/post.js tendremos:

var mongoose = require('mongoose');

var personSchema = mongoose.Schema({
  author: { type: String },
  author: { type: mongoose. },
  title: { type: String },
  content: { type: String },
  time: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Person', personSchema);

Views

Ahora nos creamos las views necesarias. Para layout.jade:

doctype html
html
  head
    block title
      title Página Web
    meta(charset="utf-8")
    meta(name='viewport' content='width=device-width, initial-scale=1')
    link(rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.1/plugins.min.css")
    link(rel="stylesheet" href="style.css")
  body

    nav
      a.brand(href="/") Mi super blog

    block content

Para index.jade:

extend ./layout.jade

block content
  p Hola! Mostrando la lista de entradas:
  
  each entry in posts
    div.card(data-id=entry._id)
      header
        h2= entry.title
      section= entry.body

Y en project.jade:

extend ./layout.jade

block title
  title= project.title + " - Mi Web"

block content
  h2= project.title
  article= project.body