Breaking

Post Top Ad

Your Ad Spot

lunes, 26 de octubre de 2020

Tutorial del blog de Node.js

En este tutorial vamos a crear un blog impulsado por Node.js en el back-end, Bootstrap en el front-end y MongoDB como almacén de datos. Vamos a empezar desde cero y construir el proyecto paso a paso. Veremos cómo incluir todos los paquetes que necesitaremos en Node para crear el blog. Algunos de estos incluyen Express, Bcrypt, nodemon, express-edge, mongoose, body-parser, express-fileupload y express-session. Comenzaremos con las rutas básicas en el archivo index.js y luego trasladaremos gradualmente la aplicación a una arquitectura Model View Controller. Empecemos.


Configuración del proyecto de blog

En nuestra terminal, podemos crear nuestro directorio y ejecutarlo npm initpara comenzar.

node $ mkdir nodejs-blog-tutorial
node $ cd nodejs-blog-tutorial
nodejs-blog-tutorial $ npm init
Esta utilidad lo guiará a través de la creación de un archivo package.json.
Solo cubre los elementos más comunes e intenta adivinar valores predeterminados razonables.

Consulte la npm help jsondocumentación definitiva sobre estos campos.
y exactamente lo que hacen.

Úselo luego para instalar un paquete ynpm install 
guárdelo como una dependencia en el archivo package.json.

Presione ^ C en cualquier momento para salir.
nombre del paquete: (nodejs-blog-tutorial)
versión: (1.0.0)
descripción: Crea un blog usando Node.js
punto de entrada: (index.js)
comando de prueba:
repositorio git:
palabras clave: blog
autor:
licencia: (ISC)
A punto de escribir en C: nodenodejs-blog-tutorialpackage.json:

{
  "nombre": "nodejs-blog-tutorial",
  "versión": "1.0.0",
  "description": "Crea un blog usando Node.js",
  "main": "index.js",
  "guiones": {
    "test": "echo" Error: no se ha especificado ninguna prueba "&& exit 1"
  },
  "palabras clave": [
    "Blog"
  ],
  "autor": "",
  "licencia": "ISC"
}


¿Esta bien? (si)

Excelente. Ahora, instalaremos un buen tema Bootstrap de la buena gente de Start Bootstrap.

nodejs-blog-tutorial $ npm i iniciobootstrap-clean-blog
npm notice creó un archivo de bloqueo como package-lock.json. Debe enviar este archivo.npm WARN bootstrap@4.1.1 requiere un par de popper.js@^1.14.3 pero ninguno está instalado. Debe instalar las dependencias de pares usted mismo.
npm WARN nodejs-blog-tutorial@1.0.0 Sin campo de repositorio.

+ startbootstrap-clean-blog@4.1.1
agregó 4 paquetes de 10 contribuidores y auditó 4 paquetes en 5.224s
encontrado 0 vulnerabilidades

Tenga en cuenta que el paquete vive en el node_modulesdirectorio.
npm instalar startbootstrap-clean-blog

También vamos a necesitar Express, así que vamos a instalarlo.

nodejs-blog-tutorial $ npm i express
npm WARN bootstrap@4.1.1 requiere un par de popper.js@^1.14.3 pero ninguno está instalado. Debe instalar las dependencias de pares usted mismo.npm WARN nodejs-blog-tutorial@1.0.0 Sin campo de repositorio.

+ express@4.16.3
agregó 50 paquetes de 47 contribuyentes y auditó 123 paquetes en 4.111s
encontrado 0 vulnerabilidades

Mientras estamos en eso, podemos instalar nodemon para la recarga en caliente de nuestros archivos JavaScript. No es necesario tener que detener y reiniciar manualmente su aplicación de nodo constantemente.

nodejs-blog-tutorial $ npm i nodemon

Ahora agreguemos el punto de entrada a nuestro proyecto de blog node.js que es index.js .

nodejs-blog-tutorial $ touch index.js

También necesitaremos tener un directorio público en el proyecto.

nodejs-blog-tutorial $ mkdir public

Comencemos por incluir express, configurar nuestro directorio público y lanzar el servidor.


index.js


Construyendo una página de inicio

Para comenzar a construir la página de inicio, podemos crear un pagesdirectorio para almacenar archivos estáticos. Dentro de ese directorio podemos comenzar con un index.htmlarchivo.

nodejs-blog-tutorial $ mkdir páginas
nodejs-blog-tutorial $ cd pages
páginas $ touch index.html

No se emocione demasiado, sé que esta página de inicio es épica.


index.html

¡Vamos a mostrar esa página de inicio en el navegador ahora!


index.js

¡Esta funcionando!
página de inicio del blog

Para que las cosas se vean mucho mejor, podemos copiar el startbootstrap-clean-blogdirectorio al themedirectorio. La línea de comandos hace que esto sea rápido y fácil.

nodejs-blog-tutorial $ cp -r node_modules / tema startbootstrap-clean-blog

Tenga en cuenta que el themedirectorio tiene todo lo que necesitamos para que este blog se vea genial.
ellos carpeta para contener ui

Dado que hemos establecido el publicdirectorio donde serviremos los activos, necesitamos copiar los directorios vendor css imgjsTambién copiamos el tema index.htmlal pagesdirectorio.

nodejs-blog-tutorial $ cp -r theme / vendor public / vendor
nodejs-blog-tutorial $ cp -r theme / css public / css
nodejs-blog-tutorial $ cp -r theme / img public / img
nodejs-blog-tutorial $ cp -r theme / js public / js
nodejs-blog-tutorial $ cp -r theme / index.html pages / index.html
nodejs-blog-tutorial $ node index.js
Aplicación escuchando en el puerto 4000

Una vez que iniciamos el servidor y cargamos la página de inicio - ¡Guau! ¡Se ve bastante bien!
iniciar el blog de bootstrap clean


Agregar páginas de información, contactos y publicaciones

Primero podemos copiar about.html a nuestro pagesdirectorio.

nodejs-blog-tutorial $ cp -r theme / about.html pages / about.html

Ahora podemos agregar un controlador de ruta para atender las solicitudes /about.


index.js

Continúe y ejecute nodemon para que el servidor se reinicie cada vez que cambiemos nuestros archivos.

nodejs-blog-tutorial $ nodemon index.js
[nodemon] 1.17.5 [nodemon] para reiniciar en cualquier momento, ingrese rs[nodemon] mirando: *. *
[nodemon] iniciando la node index.js
aplicación escuchando en el puerto 4000

¡Aquí vamos! Una bonita página sobre.
blog sobre la página

Podemos hacer lo mismo con las páginas de contacto y publicación.

nodejs-blog-tutorial $ cp -r theme / contact.html pages / contact.html
nodejs-blog-tutorial $ cp -r theme / post.html pages / post.html

Agregue los nuevos controladores de ruta para /contacty me /postgusta.


index.js

¡Bingo!
página de contacto del blog

¡Excelente!
página de publicación única de blog


Motor de plantilla Edge con Express

Las páginas hasta ahora son estáticas. Queremos una situación más dinámica. Para esto, podemos usar el motor de plantillas Edge para usar con Express.

nodejs-blog-tutorial $ npm instalar express-edge --save

Así es como podemos especificar que ahora estamos usando el motor de plantilla Edge en index.js .


index.js

Ahora creemos el viewsdirectorio que contendrá nuestros .edgearchivos.

nodejs-blog-tutorial $ mkdir vistas
nodejs-blog-tutorial $ vistas táctiles / index.edge

En index.js , continúe y elimine este código.

Una vez que se haya eliminado el fragmento anterior, puede colocar este código en su lugar. Esto le dice a nuestra aplicación que ahora vamos a renderizar una plantilla de borde nombrada indexdesde la viewscarpeta en lugar de nuestro archivo estático original.


Diseños con Edge

Al igual que todos los demás motores de plantillas populares, podemos configurar archivos de diseño . Aquí agregamos un layoutsdirectorio dentro viewsy agregamos un app.edgearchivo.

nodejs-blog-tutorial $ mkdir vistas / diseños
nodejs-blog-tutorial $ vistas táctiles / diseños / app.edge

En app.edge, podemos agregar el marcado común que compartirán todas las páginas. El "medio" de la página se elimina y se reemplaza con @!section('content').

Ahora realmente podemos simplificar cualquier otro archivo que extienda el archivo layout.app . Por ejemplo, ahora podemos agregar este marcado a index.edge .

Aquí está el resultado en el navegador. ¡Se ve bastante bien!
Ejemplo de diseño de borde


Datos dinámicos con MongoDB

Nuestro sistema de blogs Node js utilizará MongoDB para almacenar publicaciones de blog. El objetivo es poder almacenar nuevas publicaciones de blog en MongoDB, y también recuperar publicaciones de blog de MongoDB y enviar esos datos a nuestros archivos de plantilla .edge que mostrarán los datos dinámicos. Podemos empezar instalando Mongoose.

nodejs-blog-tutorial $ npm i mangosta - guardar

Ahora podemos requerir mangosta en nuestro archivo index.js y conectarnos a la base de datos como vemos aquí. No olvide la propiedad useNewUrlParser .


Modelos de mangosta

Podemos crear un directorio dedicado para almacenar nuestros modelos Mongoose y comenzaremos con un archivo Post.js.

nodejs-blog-tutorial $ mkdir base de datos
nodejs-blog-tutorial $ cd database
base de datos $ mkdir modelos
base de datos $ modelos táctiles / Post.js

Post.js contendrá este código.


Nuevo formulario de publicación de blog

Agreguemos una página al blog donde se presenta un formulario al usuario para que pueda enviar una nueva publicación de blog.

nodejs-blog-tutorial $ vistas táctiles / create.edge

El siguiente marcado se puede colocar en el archivo create.edge .

Ahora necesitamos una ruta en index.js para presentar el formulario.

Ahora podemos visitar http: // localhost: 4000 / posts / new y tenemos un formulario para crear una nueva publicación de blog.
formulario de nueva publicación de blog


Configuración de solicitudes POST en Express

Nuestro formulario para una nueva publicación de blog enviará una solicitud POST y necesitamos configurar el código para manejar eso. También necesitaremos el paquete body-parser para leer los datos que se envían en la solicitud POST. Primero agreguemos el analizador corporal .

nodejs-blog-tutorial $ npm instalar body-parser

Ahora necesitamos usar body-parser en index.js . Los fragmentos relevantes están resaltados.

Ahora, si ingresa algunos datos en el formulario, notará que podemos inspeccionarlos en la consola si enviamos el formulario. ¡Agradable!

[nodemon] comenzando node index.js
Aplicación escuchando en el puerto 4000
{title: 'Este es el campo del título',
  descripción: 'Aquí está el campo de descripción',
  contenido: 'El contenido de la publicación está aquí'}

Almacenar nueva publicación de blog en MongoDB

Ahora que estamos obteniendo los datos del formulario, tenemos que hacer algo con ellos. Queremos almacenarlo en la base de datos. Usaremos el modelo Post.js que habíamos creado anteriormente.

Ahora podemos actualizar el /posts/storesimilar.

Eso debería ser suficiente para almacenar una nueva publicación en la base de datos. Continúe y complete el nuevo formulario de publicación de blog, luego haga clic en Enviar. Entonces podemos usar Compass para verificarlo y nuestros datos están allí.
publicaciones de blog de nodo en brújula


Visualización de publicaciones de blog desde la base de datos

Ahora podemos eliminar las páginas "estáticas" que representaban publicaciones de blog de antes y usar datos dinámicos de MongoDB para mostrar publicaciones de blog. Podemos modificar la /ruta para obtener ahora datos de MongoDB. Luego, pasaremos esos datos al archivo index.edge.

El archivo index.edge ahora debe arreglarse para tener en cuenta los datos dinámicos en lugar del marcado estático que teníamos antes. Usamos la @eachdirectiva en Edge para hacer esto. Esto nos permite recorrer varias publicaciones de blog almacenadas en la base de datos y mostrarlas.