Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Vue.js Express

 

En este tutorial vamos a construir un pequeño proyecto usando la pila MEVN. MEVN es el acrónimo de MongoDB, Express, VueJS y Node.js como aplicación de pila completa. MongoDB es nuestro mecanismo de almacenamiento de datos, Express es el middleware para manejar las solicitudes HTTP y el enrutamiento, VueJS es el JavaScript del lado del cliente para representar datos y Node.js es el servidor en el que se ejecutará nuestra aplicación. Como beneficio adicional, incluiremos un tema de Bootswatch genial para que el CSS se vea bien. Empecemos.


Crear directorio y ejecutar npm init

Para comenzar, agregaremos un nuevo directorio para contener nuestro código de servidor y ejecutaremos un npm init -ypara inicializar un archivo package.json por nosotros.

nodo $ mkdir MEVN-Tutorial
nodo $ cd MEVN-Tutorial
Tutorial de MEVN $ npm init -y
Escribió en C: \ node \ MEVN-Tutorial \ package.json:
{
  "nombre": "Tutorial MEVN", "versión": "1.0.0",
  "descripción": "",
  "main": "index.js",
  "guiones": {
    "prueba": "echo \" Error: no se especificó ninguna prueba \ "&& salida 1"
  },
  "palabras clave": [],
  "autor": "",
  "licencia": "ISC"
}

Agregar dependencias al proyecto

Ahora podemos agregar todas las dependencias que usaremos en este proyecto. Agregaremos express, morgan, cors y body-parser para comenzar. Express se usa para crear la API, morgan se usa para registrar solicitudes http en la consola, cors permite que el cliente hable con el front-end y body-parser es lo que se usa para permitir que el back-end lea los datos enviados desde la parte delantera.

MEVN-Tutorial $ npm instalar express morgan cors body-parser
npm notice creó un archivo de bloqueo como package-lock.json. Debe enviar este archivo.npm WARN MEVN-Tutorial@1.0.0 Sin descripción
npm WARN MEVN-Tutorial@1.0.0 Sin campo de repositorio.
+ express@4.16.3
+ body-parser@1.18.3
+ morgan@1.9.0
+ cors@2.8.4
agregó 63 paquetes de 50 contribuyentes y auditó 161 paquetes en 4.205s
encontrado 0 vulnerabilidades

Agregar un archivo index.js

Agreguemos un archivo index.js a nuestro proyecto, ya que este será el punto de entrada a la aplicación.

MEVN-Tutorial $ touch index.js

Esqueleto del proyecto MEVN


Pruebe nuestro servidor

Tenemos todo listo para probar nuestro servidor. Solo necesitamos agregar un poco de código para que funcione.
index.js

Ahora podemos ejecutar el proyecto así.

MEVN-Tutorial $ node index.js
escuchando en 4000

Si cargamos http: // localhost: 4000 / en nuestro navegador, podemos ver que el servidor está funcionando. ¡Excelente!
el servidor está funcionando respuesta json


Crear cliente El directorio de clientes

Vamos a utilizar Vue.js en el lado del cliente, así que sigamos adelante y comencemos a configurarlo ahora. Primero instalaremos Vue Cli.

Tutorial de MEVN $ npm i @ vue / cli

Una vez que esté completo, ejecutemos el vue create clientcomando y elija las opciones Enrutador y Linter / Formateador.
vue cli 3 preajustes manuales
vue cli paso 2
vue cli paso 3
vue cli paso 4
vue cli paso 5

Cuando termine de leer todas las indicaciones, debería ver algo como lo siguiente. Básicamente, ahora estamos construyendo el front-end para nuestra api back-end dentro de la carpeta del cliente usando Vue cli.

✨  Creando proyecto en C: \ node \ MEVN-Tutorial \ client.
🗃  Inicializando el repositorio de git ...
 ⚙  Instalando complementos CLI. Esto podría tomar un tiempo...


> yorkie@2.0.0 instalar C: \ node \ MEVN-Tutorial \ client \ node_modules \ yorkie
> nodo bin / install.js

configurar ganchos de Git
hecho

agregó 1081 paquetes de 734 colaboradores y auditó 10674 paquetes en 101.129 y encontró 0 vulnerabilidades

🚀  Invocar generadores ...
 📦  Instalar dependencias adicionales ...

agregaron 109 paquetes de 43 contribuyentes y auditaron 12463 paquetes en 41.475s
encontrado 0 vulnerabilidades

⚓  Ejecutando ganchos de finalización ...

📄  Generando README.md ...

🎉  Cliente de proyecto creado con éxito.
👉  Comience con los siguientes comandos:

 $ cd cliente
 $ npm ejecutar servir

¡Guauu! ¡Qué bueno que es Vue cli! Ok, ya que dice que podemos ejecutar esos dos comandos, lo haremos y luego visitaremos http: // localhost: 8080 / # / para ver nuestra instalación de Vue en ejecución.
vue cli 3 npm ejecutar servir

Ahora solo para cambiar las cosas, incluiremos el CSS para el tema Bootswatch Sketchy agregándolo a index.html como vemos aquí.
Bootswatch sketch css incluye

Ahora, cuando miremos nuestra parte frontal, ¡mira el efecto genial!
botas vue

Excelente. Ahora tenemos una interfaz que consumirá la API que aún estamos construyendo. De hecho, volvamos al código de back-end y continuemos construyendo lo que se necesita.


Conexión a MongoDB con Monk

En un tutorial diferente usamos Mongoose para conectarnos a nuestro servidor MongoDB. En este episodio, usaremos Monk, que es un paquete más ligero para un uso rápido. Así que instalemos Monk ahora y mientras estamos en eso, podemos instalar Joi también para una validación de datos simple.

MEVN-Tutorial $ npm i monk joi

Crea un modelo de mensaje

En ese mismo momento. Estamos listos para crear un modelo para almacenar mensajes que un usuario pueda enviar a nuestra api. En nuestro proyecto, podemos añadir un dbdirectorio y luego el lugar connection.jsmessages.jslos archivos allí.

Tutorial de MEVN $ mkdir db
Tutorial MEVN $ cd db
db $ touch connection.jsdb $ touch messages.js

connection.js
En el archivo connection.js, podemos agregar este código que nos permitirá conectarnos a MongoDB.

messages.js
Este es el modelo para trabajar con mensajes.


Agrega una ruta para recibir mensajes de Mongodb

En index.js, podemos agregar este código.

Incluso podemos probar esto ahora. En un símbolo del sistema, podemos ejecutar mongodpara iniciar nuestro servidor Mongo. Luego, tendremos que ejecutar node index.jspara lanzar nuestro proyecto. En ese momento, si visitamos http: // localhost: 4000 / messages, obtendremos una matriz vacía. Esto es bueno en realidad, porque significa que estamos hablando con la base de datos de Mongo, simplemente no tenemos ningún mensaje allí todavía.


Agrega una ruta para crear un mensaje

En index.js , agreguemos una ruta para manejar una solicitud POST a la API que agregará un nuevo mensaje a la base de datos.


POST a API usando Postman

Lo que podemos hacer ahora es enviar una solicitud POST a la API mediante Postman.
publicar solicitud a través del cartero

Ahora usemos Compass para ver si los datos están en la base de datos. ¡Se ve bien!
nuevo mensaje en mongodb

Además, si visitamos http: // localhost: 4000 / messages, ahora vemos el mensaje que está almacenado en la base de datos devuelto en formato JSON.
respuesta json de la pila mevn


Consume API y muestra mensajes con Vue

Nuestra API ahora está funcionando. Puede aceptar y devolver mensajes en formato JSON. Ahora queremos renderizar uno o más mensajes en la pantalla usando nuestro Vue Client. Podemos comenzar agregando el siguiente código de Vue a Home.vue .

Para probar esto ahora, necesitamos ejecutar instancias de nodo. En el directorio MEVN-Tutorial debemos ejecutar node index.jspara iniciar nuestro servidor API. Luego, también debemos iniciar nuestro cliente abriendo un símbolo del sistema * diferente * y ejecutándolo npm run servedesde el directorio del cliente . ¡Ojalá tenga sentido! Una vez que esté completo, tendremos dos instancias en ejecución.

http: // localhost: 4000 / messages proporcionará la API de backend.
http: // localhost: 8080 / # / proporcionará nuestro servicio al cliente.

Ok, con ambos en ejecución y nuestro archivo Home.vue poblado con algunas marcas de Vue, podemos ver que nuestros datos se están procesando en la página. ¡Resbaloso!
datos de la API de representación del cliente vue

Esto está muy bien. Nuestro navegador realiza una solicitud GET a un servidor Express, que a su vez responde con datos JSON de una base de datos MongoDB. En ese momento, nuestro código Vue.js consume esos datos JSON y los muestra en la página. ¡Excelente!


Agregar un formulario de Vue para enviar mensajes nuevos

Ahora podemos agregar este código a Home.vue para que tengamos un formulario para agregar un nuevo mensaje.

Sigamos adelante y completemos manualmente el formulario con algunos datos nuevos para un mensaje y probémoslo.
vuejs formulario post solicitud a api

Una vez que hacemos clic en enviar, la solicitud POST se envía a nuestra API, junto con los datos que ingresamos en el formulario. Ahora vemos el nuevo mensaje en la página. ¡Excelente!
se muestra un nuevo mensaje

Agreguemos un mensaje más para asegurarnos de que todo esté funcionando.
segundo ejemplo de publicación vue en API

Una vez más, vemos el nuevo mensaje en la página junto con los dos primeros que habíamos agregado antes.
vue para la visualización de la lista


Resumen del tutorial de Mongo Express Vue.js Node.js

Con esto concluye este tutorial que exploró los conceptos básicos para trabajar con la pila MEVNPor supuesto, es probable que haya oído hablar de la pila MEAN que utiliza Mongo, Express, Angular y Node. Este enfoque elimina Angular de la pila e inserta Vue.js en su lugar. Curiosamente, este fue uno de los primeros tutoriales en los que el lado del cliente no hace más que simplemente interactuar con una API. Express, Mongo y Node trabajaron juntos para proporcionar la API, mientras que Vue.js proporcionó la aplicación del lado del cliente que envía y recibe datos JSON con esa API. ¡Excelente!


Publicar un comentario

0 Comentarios