Post Top Ad

Your Ad Spot

lunes, 29 de junio de 2020

Vue.js Express Tutorial

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 la aplicación de pila completa. MongoDB es nuestro mecanismo de almacenamiento de datos, Express es el middleware para manejar solicitudes y enrutamiento HTTP, VueJS es el JavaScript del lado del cliente para procesar datos y Node.js es el servidor en el que se ejecutará nuestra aplicación. Como una ventaja adicional, incluiremos un tema genial de Bootswatch 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 para nosotros.
nodo $ mkdir MEVN-Tutorial
nodo $ cd MEVN-Tutorial
Tutorial 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. Para comenzar, agregaremos express, morgan, cors y body-parser. Express se usa para crear la API, Morgan se usa para registrar solicitudes http en la consola, cors le permite al cliente hablar con el front-end, y body-parser es lo que se usa para permitir que el back-end lea los datos enviados desde El frente.
Tutorial MEVN $ npm install express morgan cors body-parser
El aviso npm creó un archivo de bloqueo como package-lock.json. Debe confirmar 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.
Tutorial MEVN $ touch index.js
Esqueleto del proyecto MEVN

Pruebe nuestro servidor

Tenemos todo en su lugar para probar nuestro servidor. Solo necesitamos agregar un poco de código para que funcione.
index.js
Ahora podemos ejecutar el proyecto así.
Tutorial MEVN $ node index.js
escuchando en 4000
Si cargamos http: // localhost: 4000 / en nuestro navegador, podemos ver que el servidor está funcionando. ¡Excelente!
el servidor funciona respuesta json

Crear cliente El directorio de clientes

Vamos a usar Vue.js en el lado del cliente, así que sigamos adelante y comencemos a configurarlo ahora. Primero instalaremos el Vue Cli.
Tutorial MEVN $ npm i @ vue / cli
Una vez que se haya completado, ejecutemos el vue create clientcomando y elijamos las opciones de 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 pasar por todas las indicaciones, debería ver algo como lo siguiente. Básicamente, ahora estamos construyendo el front-end para nuestra API de back-end dentro de la carpeta del cliente usando Vue cli.
✨  Creación de 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 Git
hecho

Se agregaron 1081 paquetes de 734 contribuyentes y se auditaron 10674 paquetes en 101.129 y encontraron 0 vulnerabilidades.

🚀  Invocación de generadores ...
 📦  Instalación de dependencias adicionales ...

agregó 109 paquetes de 43 contribuyentes y auditó 12463 paquetes en 41.475
encontrado 0 vulnerabilidades

⚓  Ejecutando ganchos de finalización ...

📄  Generando README.md ...

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

 cliente de $ cd
 $ npm ejecutar servir
¡Guauu! ¡Qué genial que Vue cli sea! 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 miramos nuestro frente, ¡mira el efecto genial!
vue bootswatch
Excelente. Ahora tenemos un front end que consumirá la API que aún estamos construyendo. De hecho, volvamos al código de fondo 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, utilizaremos Monk , que es un paquete más ligero para un uso rápido. Instalemos Monk ahora y mientras lo hacemos, también podemos instalar Joi para una simple validación de datos.
Tutorial MEVN $ 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 puede enviar a nuestra API. En nuestro proyecto, podemos agregar un dbdirectorio y luego colocar connection.jsmessages.jsarchivos allí.
Tutorial 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.

Agregar 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 correr node index.jspara lanzar nuestro proyecto. En ese momento, si visitamos http: // localhost: 4000 / messages, estamos recuperando 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.

PUBLICAR en API con Postman

Lo que podemos hacer ahora es enviar una solicitud POST a la API utilizando Postman .
solicitud por correo postal
Ahora usemos Brújula 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 se almacena en la base de datos devuelto en formato JSON.
respuesta json de mevn stack

Consumir API y mostrar mensajes con Vue

Nuestra API ahora está funcionando. Puede aceptar y devolver mensajes en formato JSON. Ahora queremos representar uno o más mensajes en la pantalla usando nuestro Cliente Vue. Podemos comenzar agregando el siguiente código Vue a Home.vue .
Para probar esto ahora realmente necesitamos nodos de instancias en ejecución. En el directorio MEVN-Tutorial debemos ejecutar node index.jspara encender 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á eso tenga sentido! Una vez que esté completo tendremos dos instancias ejecutándose.
http: // localhost: 4000 / messages proporcionará la API de back-end.
http: // localhost: 8080 / # / proporcionará nuestro servicio al cliente.
De acuerdo, con ambos en ejecución y nuestro archivo Home.vue poblado con algún marcado Vue, podemos ver que nuestros datos se muestran en la página. ¡Resbaloso!
vue cliente que procesa datos de la API
Esto está muy bien. Nuestro navegador está haciendo una solicitud GET a un servidor Express, que a su vez responde con datos JSON de una base de datos MongoDB. En ese punto, nuestro código Vue.js consume esos datos JSON y los muestra en la página. ¡Excelente!

Agregue un formulario Vue para enviar mensajes nuevos

Ahora podemos agregar este código a Home.vue para que tengamos un formulario para agregar un nuevo mensaje.
Avancemos y completemos manualmente el formulario con algunos datos nuevos para un mensaje y probémoslo.
vuejs form post request to 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 las cosas funcionen.
segundo ejemplo de publicación de vue en la API
Una vez más, vemos el nuevo mensaje en la página junto con los dos primeros que habíamos agregado anteriormente.
vue para en la lista de visualización

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

Con esto concluye este tutorial que exploró los conceptos básicos del trabajo con la pila MEVN . Por 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 donde el lado del cliente no hace nada 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!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas