Vamos a hacer un blog muy sencillo 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 explicando en la introducción para poder continuar.
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.pug
index.pug
layout.pug
write.pug
public/
...
index.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