Como Integrar Vue JS y Ruby on Rails – Parte 2

7 minuto(s)

Demo

En la Parte anterior llamada Como Integrar Vue JS y Ruby on Rails – Parte 1 creamos un nuevo proyecto con Ruby on Rails 6, luego hicimos uso de webpack que viene ya con Ruby on Rails 6 para instalar Vue JS y verificamos si Vue JS se había instalado correctamente haciendo una integración básica mostrando el texto Hello Vue!, en esta parte 2 vamos a crear una tabla HTML con Bootstrap y convertirla en un componente, esto es para ver que ya tenemos Vue JS integrado en Rails y podemos crear cosas al menos un poquito más avanzadas.

Partes


Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Integrar Vue JS y Ruby on Rails – Parte 2.

Componente Postres

Para verificar que podemos crear cosas más allá de un simple mensaje Hello Vue!, recordemos que este mensaje lo mostramos en la Parte 1 de ese tutorial, vamos a mostrar una tabla HTML de Bootstrap 4 que lea datos en formato JSON, los datos JSON que leeré se encuentran en el repositorio GitHub de este proyecto, exactamente en este enlace https://raw.githubusercontent.com/collectivecloudperu/integrar_vuejs26_rubyonrails6/main/postres.json y contiene los siguientes datos.


Antes de crear mi componente voy a instalar el paquete NPM axios que me permite leer datos en formato JSON, para instalarlo ejecuto el siguiente comando.


Una vez que instalamos axios, debemos de instanciarlo en el archivo hello_vue.js, este archivo se encuentra en app > javascript > packs > hello_vue.js 


Dentro del archivo hello_vue.js creamos una variable global y también una propiedad global para axios. 


Bien, ahora creo un archivo llamado Postres.vue que será el archivo para mi componente Postres, en este componente mostraré una lista de postres en una tabla HTML de Bootstrap 4, el archivo Postres.vue lo creamos en app > javascript > Postres.vue


Abro el archivo Postres.vue y comienzo agregando la tabla HTML en la zona del template de mi componente Postres.


En el código anterior, si te fijas en la tabla dentro del elemento <tbody></tbody> hago uso de la directiva v-for para listar los datos del archivo JSON. 


Ahora dentro de las etiquetas <script></script> creamos los campos que usaré del JSON, estos son nombre, precio, stock e img. Luego creo data para obtener los datos y pasarlos a la tabla, debajo leemos el JSON con axios. 


Para que me mi componente Postres funcione, lo debo colocar en el componente app.vue que se creo por defecto luego de instalar Vue JS en Ruby on Rails (RoR), entonces abro el archivo app.vue que se encuentra en app > javascript > app.vue


Dentro del archivo app.vue coloco en las etiquetas <template></template> el componente Postres para que cargue en la vista.


Y dentro de las etiquetas <script></script> importo el componente Postres, también lo defino dentro de components y en message coloco el texto Lista de Postres.


Para mi entorno de desarrollo debo ejecutar 2 consolas al mismo tiempo, yo abriré 2 consolas GitBash, en la primera consola ejecuto el servidor de desarroll ode webpack que va a compilar todos los archivos del proyecto mediante el siguiente comando.


Y en la segunda consola ejecuto el servidor de Ruby on Rails 6 (RoR) con el siguiente comando.


Si voy a la dirección local http://localhost:3000/ en el navegador, debo de ver los datos sin problemas.

Con esto hemos realizado algo más que un simple mensaje Hello Vue!, recordemos que este mensaje lo mostramos en la Parte 1 de ese tutorial.

Bien hasta aquí terminamos esta primera parte en donde creamos un componente llamado Postres para listar datos JSON en una tabla HTML.

Ten Paciencia, lo que quiero es que conozcas bien como crear este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la 3ra parte de este tutorial vamos a estilizar la interface agregando una tabla HTML de Bootstrap 4 y otros detalles.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.