Construir Aplicaciones Web Usando Node.js

Spanish (Español) translation by James (you can also view the original English article)

Introducción

Aparte de construcción API, Node.js es ideal para crear aplicaciones web estándar. Tiene potentes herramientas para satisfacer el gusto de los desarrolladores web. En este tutorial, construir una aplicación web que puede servir como una biblioteca.

Edificio para conocer algunos tipos de middleware, verá cómo gestionar el envío del formulario en Node.js, y usted también podrá hacer referencia a dos modelos.

Vamos a empezar.

Para Empezar

Empiece instalando el generador expreso en su máquina.

1	npm install express-generator -g

Ejecute el comando expreso generador para generar la aplicación.

1	express tutsplus-library --view=pug

   create : tutsplus-library
   create : tutsplus-library/package.json
   create : tutsplus-library/app.js
   create : tutsplus-library/public
   create : tutsplus-library/routes
   create : tutsplus-library/routes/index.js
   create : tutsplus-library/routes/users.js
   create : tutsplus-library/views
   create : tutsplus-library/views/index.pug
   create : tutsplus-library/views/layout.pug
   create : tutsplus-library/views/error.pug
   create : tutsplus-library/bin
   create : tutsplus-library/bin/www
   create : tutsplus-library/public/javascripts
   create : tutsplus-library/public/images
   create : tutsplus-library/public/stylesheets
   create : tutsplus-library/public/stylesheets/style.css

   install dependencies:
     $ cd tutsplus-library && npm install

   run the app:
     $ DEBUG=tutsplus-library:* npm start

Ahora emigran a su trabajo, abra package.json y las dependencias similares a lo que tengo debajo.

#package.json

{
  "name": "tutsplus-library",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "connect-flash": "^0.1.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.5",
    "express-validator": "^4.2.1",
    "mongoose": "^4.11.12",
    "morgan": "~1.8.1",
    "pug": "~2.0.0-beta11",
    "serve-favicon": "~2.4.2"
  }
}

Ejecute el comando para instalar los paquetes.

1	npm install

Configurar el Archivo de Entrada

app.js se creó cuando ejecutó el comando generador; sin embargo, usted necesita configurar configuración extra. Edite el archivo para ver como lo que tengo debajo.

#app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
const session = require('express-session')
const expressValidator = require('express-validator')
const flash = require('connect-flash')
const mongoose = require('mongoose')

// 1
const genres = require('./routes/genres');
const books = require('./routes/books');

var app = express();

// 2
mongoose.Promise = global.Promise
const mongoDB = process.env.MONGODB_URI || 'mongodb://127.0.0.1/tutsplus-library'
mongoose.connect(mongoDB)

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 3
app.use(session({
  secret: 'secret',
  saveUninitialized: true,
  resave: true
}))

// 4
app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
    var namespace = param.split('.')
    , root = namespace.shift()
    , formParam = root

    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']'
    }
    return {
      param : formParam,
      msg : msg,
      value : value
    }
  }
}))

// 5
app.use(flash())
app.use(function (req, res, next) {
  res.locals.messages = require('express-messages')
  next()
})

// 6
app.use('/genres', genres);
app.use('/books', books);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Se requiere las dos rutas que va a hacer usan de en la construcción de esta aplicación. Se creará el archivo de rutas poco. Las rutas necesarias son asignadas como valores a dos variables diferentes que se utilizan al configurar el software intermedio para las rutas.
Establece Mangosta para uso global.Promise. La variable MongoDB se asigna la MONGODB_URI de su entorno o la ruta de acceso al servidor local de mongo. Esta variable se pasa como un argumento para conectarse al servidor de MongoDB corriente.
Configurar middleware sesión usando express-session. Este middleware es importante ya que mostrando mensajes flash en algunas partes de su aplicación.
Configurar middleware para la validación. Este middleware se utilizará para validar el formulario de entrada, asegurando que los usuarios de la aplicación no presente una forma vacía. La validación utiliza un paquete instalado, express-validator.
Configurar middleware que será muy útil al mostrar mensajes flash. Este middleware hace uso de connect-flash.
Se establecen las rutas de la aplicación hasta hacer uso del archivo de rutas que usted requirió. Pide apuntando a /genres y /books hará uso de los géneros y los libros rutas de archivos respectivamente. En este momento no ha creado los archivos de rutas, pero haremos pronto.

Libro y Modelo de Género

El modelo de libro hará uso de mangosta esquema para definir cómo se estructurarán los libros. Crear un directorio llamado models y un nuevo archivo llamado Book.js. Aquí es lo que parece.

#models/Book.js

const mongoose = require('mongoose')
mongoose.Promise = global.Promise
const Schema = mongoose.Schema

const bookSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a book name'
  },
  description: {
    type: String,
    trim: true
  },
  author: {
    type: String,
    trim: true,
  },
  genre: [{
    type: Schema.Types.ObjectId,
    ref: 'Genre'
  }]
})

module.exports = mongoose.model('Book', bookSchema)

Aquí tienes cuatro campos. El último campo se utiliza para almacenar cada libro pertenece al género. Aquí el campo de género hace referencia al modelo de género, que se creará a continuación. Por eso el tipo se establece en Schema.Types.ObjectId, que es donde se guardarán los ID de cada género se hace referencia. Ref especifica el modelo se está haciendo referencia a. Tenga en cuenta que este género está guardado como una matriz, lo que significa que un libro puede tener más de un género.

Vamos a seguir adelante a crear el modelo de Género.

#models/genre.js

const mongoose = require('mongoose')
mongoose.Promise = global.Promise
const Schema = mongoose.Schema

const genreSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a Genre name'
  }
})

module.exports = mongoose.model('Genre', genreSchema)

Para su género, necesita un campo: name.

Género Indice de Ruta y Visión

Para este tutorial, usted hará uso de dos rutas de senderos para su género: un camino para añadir nuevos géneros y otro que recoge los géneros tienes. Crear un archivo en su directorio de rutas llamado genres.js.

Empezar por exigir a todos los módulos que va a hacer uso.

#routes/genres.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose')
const Genre = require('../models/Genre')

A continuación, caer en la ruta que controla el archivo de índice para sus géneros.

router.get('/', (req, res, next) => {
  const genres = Genre.find({}).exec()
    .then((genres) => {
      res.render('genres', { genres: genres })
  }, (err) => {
    throw err
  })
});

Esta ruta se llama siempre que las solicitudes se realizan a /genres. Aquí se llama al método find en el modelo de género para obtener todos los géneros que se han creado. Estos géneros se procesan luego en un template llamado genres. Vamos a seguir adelante y crear que, pero en primer lugar, actualizar tu layout.pug a este aspecto:

#views/layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='https://bootswatch.com/paper/bootstrap.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
  body
    .container-fluid
      block header
        nav.navbar.navbar-inverse
          .container-fluid
            .navbar-header
              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-2')
                span.sr-only Toggle navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
              a.navbar-brand(href='#') Local Library
            #bs-example-navbar-collapse-2.collapse.navbar-collapse
              ul.nav.navbar-nav.navbar-right
                li
                  a(href='/books') View Books
                li
                  a(href='/books/add') Add New Book
                li
                  a(href='/genres') View Genres
                li
                  a(href='/genres/add') Add New Genre
        block content

Esto le dará su punto de vista una buena estructura para facilitar la navegación. Ahora cree un archivo de vista llamado genre.pug. En este archivo, será recorrer los géneros creados y salida de cada género en una lista desordenada.

Aquí está cómo debe buscar el archivo.

#views/genres.pug

extends layout

block content
  h1 Genre
  ul.well.well-lg
    each genre, i in genres
      li.well.well-sm
        p #{genre.name}

Añadir Vistas y Nuevas Rutas de Género

Volver a su routes/genres.js para agregar las rutas que se encargará de la creación de nuevos géneros.

#routes/genres.js

// 1
router.get('/add', (req, res, next) => {
  res.render('addGenre')
})

// 2
router.post('/add', (req, res, next) => {
  req.checkBody('name', 'Name is required').notEmpty()

  const errors = req.validationErrors()

  if (errors) {
    console.log(errors)
    res.render('addgenres', { genre, errors })
  }

  const genre = (new Genre(req.body)).save()
    .then((data) => {
      res.redirect('/genres')
    })
    .catch((errors) => {
      console.log('oops...')
      console.log(errors)
    })
})

// 3
module.exports = router;

El trabajo de este router es simplemente Mostrar la página para agregar nuevas rutas. Este router se llama siempre que las solicitudes se hacen a /genres/add camino.
Este router encarga de la presentación del formulario. Cuando se envía el formulario, verifique que un nombre es introducido por el usuario. Si no se ha introducido ningún nombre, la página es nuevamente procesada. Si los controles son buenos ir, se guarda el género y el usuario es redirigido a la página de /genres.
El módulo se exporta como un router.

Ahora puede seguir adelante y crear la página para agregar un nuevo género.

#views/addGenre.pug

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/genres/add")
        .form-group
          label.col-lg-2.control.label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')
      
      if errors
        ul
          for error in errors
            li!= error.msg

Libros de Rutas y Vistas

Crear un nuevo archivo de ruta para los libros y asígnele el nombre books.js. Como lo hizo antes con el género, empezar por la que requieren los módulos necesarios.

#routes/books.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose')
const Book = require('../models/Book')
const Genre = require('../models/Genre')

A continuación, configurar el router para la visualización de todos los libros guardados en la biblioteca. Tratar de por su propia cuenta de la manera como se estableció del género; Usted puede comprobar siempre hacia atrás para hacer las correcciones.

Supongo que conoces – aquí es cómo debe buscar.

router.get('/', (req, res, next) => {
  const books = Book.find({}).exec().then((books) => {
    res.render('books', { books: books })
  }, (err) => {
    throw err
  })
});

Cuando se llama a este router, se hace una solicitud para encontrar todos los libros guardados en la base de datos. Si todo va bien, los libros se muestran en la página de /books, otro que se produce un error.

Es necesario crear un nuevo archivo para la visualización de todos los libros, y aquí está cómo debe buscar.

#views/books.pug

extends layout

block content
  h1 Books
  ul.well.well-lg
    each book, i in books
      li.well.well-sm
        a(href=`/books/show/${book.id}`) #{book.name}
        p= book.description

Simplemente recorrer los libros devueltos y salida el nombre y descripción de cada libro con una lista desordenada. El nombre de los puntos de libro a la página individual del libro.

Añadir Vistas y Nuevas Rutas de Libro

El siguiente router que configurar encargará de la adición de nuevos libros. Aquí se utilizarán dos routers: uno simplemente hará que la página, y otro encargará de la presentación del formulario.

Este es el aspecto de los routers.

router.get('/add', (req, res, next) => {
  const genres = Genre.find({}).exec()
    .then((genres) => {
      res.render('addBooks', { genres })
    })
    .catch((err) => {
      throw err
    })
})

router.post('/add', (req, res, next) => {
  req.checkBody('name', 'Name is required').notEmpty()
  req.checkBody('description', 'Description is required').notEmpty()
  req.checkBody('genre', 'Genre is required').notEmpty

  const errors = req.validationErrors()

  if (errors) {
    console.log(errors)
    res.render('addBooks', { book, errors })
  }

  const book = (new Book(req.body)).save()
    .then((data) => {
      res.redirect('/books')
    })
    .catch((errors) => {
      console.log('oops...')
    })
})

En el primer router, se muestra la página de /addBooks. Este router se llama cuando se hace una petición a /add ruta de acceso. Desde libros añadidos se suponen que tienen los géneros, que desea mostrar los géneros que se han salvado a la base de datos.

1	const genres = Genre.find({}).exec()
2	.then((genres) => {

El código anterior todos los géneros encuentra en la base de datos y devuelve en los variable géneros. Con esto, usted será capaz de recorrer los géneros y mostrarlos como casillas de verificación.

El segundo router encarga de la presentación del formulario. En primer lugar, se compruebe el cuerpo de la solicitud para asegurarse de que algunos campos no están vacíos. Aquí es donde el middleware express-validator que establece en app.js práctico. Si hay errores, la página es nuevamente procesada. Si no hay ninguno, la nueva instancia de libro se guarda y se redirige al usuario a la página de /books.

Vamos a ir adelante y crear los puntos de vista para esto.

Crear un nuevo archivo de vista llamado addBooks.pug. Tenga en cuenta que el nombre de la vista coincida con el primer parámetro dado a res.render. Esto es porque están haciendo una plantilla. Durante la redirección, simplemente pase la ruta de acceso que desea redirigir, como lo hizo con res.redirect('/books').

Habiendo establecido, aquí es lo que deberían ser los puntos de vista.

#views/addBooks.pug

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/books/add")
        .form-group
          label.col-lg-2.control-label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          label.col-lg-2.control-label Author
          .col-lg-10
            input.form-control(type="text", name='author')
        .form-group
          label.col-lg-2.control-label Book Description
          .col-lg-10
            textarea#textArea.form-control(rows='3', name='description')
        .form-group
          label.col-lg-2.control-label Genre
          .col-lg-10
            for genre in genres
              .checkbox
                input.checkbox(type='checkbox', name='genre', id=genre._id, value=genre._id, checked=genre.checked)
                label(for=genre._id) #{genre.name}
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')
      
      if errors
        ul
          for error in errors
            li!= error.msg

Lo importante a notar aquí es la acción de la forma y el método. Cuando se hace clic en el botón Enviar, usted está haciendo una solicitud POST a /books/add. Otra cosa, una vez más se recorrer la colección de géneros volvió y cada uno de ellos.

Libro Ver Ruta y Visión

Nos dejó caer en la ruta para gestionar las peticiones realizadas a cada página de libros. Mientras estás allí, es importante el módulo de exportación también.

#routes/books.js

router.get('/show/:id', (req, res, next) => {
  const book = Book.findById({ _id: req.params.id })
  .populate({
    path: 'genre',
    model: 'Genre',
    populate: {
      path: 'genre',
      model: 'Book'
    }
  })
  .exec()
    .then((book) => {
      res.render('book', { book })
    })
    .catch((err) => {
      throw err
    })
})

module.exports = router;

Ninguna magia sucede aquí.

En primer lugar, las solicitudes para este router deben tener un id: el id del libro. Este identificador se obtiene de los parámetros de la petición mediante req.params.id. Esto se utiliza para identificar el libro específico que debe obtenerse de la base de datos, como los identificadores son únicos. Cuando el libro se encuentra, el valor de género del libro se rellena con todos los géneros que se han salvado a esta instancia de libro. Si todo va bien, se representa la vista de libro, que se produce un error.

Vamos a crear la vista para un libro. Aquí está cómo debe buscar.

block content
  .well.well-lg
    h1 #[strong Name:] #{book.name}
    ul
      li #[strong Description:] #{book.description}
      li #[strong Author]: #{book.author}
      li #[strong Genre:]
        each genre in book.genre
          #{genre.name}
          |,

Usted puede iniciar su servidor nodo ejecutando:

1	DEBUG=tutsplus-library:* npm start

Conclusión

Ya sabes cómo crear una aplicación web estándar en Node.js, no sólo una aplicación de tareas simples. Fuiste capaz de manejar el envío del formulario, dos modelos de referencia y establecer algunos middleware.

Puede ir más lejos mediante la extensión de la aplicación, trate de añadir la capacidad de eliminar un libro. Primero agregar un botón a la página del show, ir a los archivos de rutas y añadir un router para esto. Tenga en cuenta que esto va a ser una solicitud POST.

También se puede pensar más características para agregar a la aplicación. Espero que lo disfruté.