Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Node.js
Code

Construir Aplicaciones Web Usando Node.js

by
Difficulty:BeginnerLength:LongLanguages:

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.

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

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

Ejecute el comando para instalar los paquetes.

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.

  1. 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.
  2. 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.
  3. Configurar middleware sesión usando express-session.  Este middleware es importante ya que mostrando mensajes flash en algunas partes de su aplicación.
  4. 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.
  5. Configurar middleware que será muy útil al mostrar mensajes flash. Este middleware hace uso de connect-flash.
  6. 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.

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.

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.

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

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:

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.

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.

  1. 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.
  2. 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.
  3. El módulo se exporta como un router.

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

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.

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.

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.

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.

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.

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.

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.

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.

Usted puede iniciar su servidor nodo ejecutando:

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é.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.