Cargar datos de un id con inner join en Vue JS - Javascript

En el desarrollo de aplicaciones web, a menudo se necesita recuperar datos de varias tablas en una base de datos. A veces, estos datos pueden estar relacionados, y la mejor manera de recuperarlos puede ser mediante el uso de la cláusula INNER JOIN. En este artículo, se mostrará cómo cargar datos de un id con INNER JOIN en Vue JS y Javascript.

Prerrequisitos

Antes de comenzar, debe tener instalado Node.js y Vue CLI en su sistema. Si aún no los ha instalado, diríjase a las páginas de descarga de Node.js y Vue CLI y siga las instrucciones de instalación.

Creando una base de datos

Para poder cargar datos de un id con INNER JOIN, primero necesitamos tener una base de datos con al menos dos tablas relacionadas. En este artículo, utilizaremos dos tablas: productos y categorias. La tabla productos tendrá una columna categoria_id, que se relacionará con la columna id de la tabla categorias.

Creando la tabla "productos"

CREATE TABLE productos (
    id INT PRIMARY KEY AUTO_INCREMENT,
    nombre VARCHAR(255) NOT NULL,
    categoria_id INT NOT NULL,
    precio DECIMAL(10, 2) NOT NULL,
    CONSTRAINT fk_productos_categorias FOREIGN KEY (categoria_id) REFERENCES categorias(id)
);

Creando la tabla "categorias"

CREATE TABLE categorias (
    id INT PRIMARY KEY AUTO_INCREMENT,
    nombre VARCHAR(255) NOT NULL
);

Llenando las tablas

Ahora que tenemos nuestras tablas, podemos llenarlas con algunos datos de ejemplo. Utilice las instrucciones SQL a continuación para llenar la tabla categorias con algunas categorías de ejemplo:

INSERT INTO categorias (nombre) VALUES
    ("Juguetes"),
    ("Electrónica"),
    ("Hogar");

A continuación, utilice las siguientes instrucciones SQL para llenar la tabla productos con algunos productos de ejemplo:

INSERT INTO productos (nombre, categoria_id, precio) VALUES
    ("Pelota", 1, 5.99),
    ("Robot", 2, 89.99),
    ("Tostadora", 3, 24.99),
    ("TV", 2, 299.99),
    ("Cuchara", 3, 1.99);

Configuración del proyecto Vue

Ahora que tenemos nuestra base de datos configurada, podemos empezar a crear nuestra aplicación Vue. Cree un nuevo proyecto Vue utilizando Vue CLI con los siguientes comandos:

vue create my-app

Asegúrese de ingresar al directorio de la aplicación recién creada:

cd my-app

Configurando el proyecto para conectarse a la base de datos

En primer lugar, necesitamos asegurarnos de que tenemos todo lo que necesitamos para conectarnos a nuestra base de datos MySQL. Para hacer esto, instale mysql y mysql2 utilizando el siguiente comando:

npm install mysql mysql2

Una vez instalados, podemos configurar nuestra aplicación para conectarse a nuestra base de datos en src/main.js. Aquí está el código completo para conectarse a la base de datos y cargar datos de un id con INNER JOIN:

import Vue from 'vue'
import App from './App.vue'
import mysql from 'mysql2/promise'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),

  async created () {
    const connection = await mysql.createConnection({
      host: 'localhost',
      user: 'user',
      password: 'password',
      database: 'database'
    })

    const [rows, fields] = await connection.execute(`
      SELECT productos.id, productos.nombre AS producto,
        categorias.nombre AS categoria, productos.precio
      FROM productos
      INNER JOIN categorias
      ON productos.categoria_id = categorias.id
      WHERE productos.id = 2
    `)

    console.log(rows)
    console.log(fields)

    connection.end()
  }
}).$mount('#app')

En este ejemplo, nos conectamos a la base de datos usando el método mysql.createConnection. Debemos proporcionar las credenciales necesarias para conectarnos a nuestra base de datos. A continuación, ejecutamos una consulta SQL que utiliza INNER JOIN para recuperar datos relacionados de dos tablas. La consulta también utiliza una cláusula WHERE para cargar datos específicos de un id en particular.

Observar que hay dos métodos console.log en el ejemplo. Esto es para representar tanto los datos recuperados como los campos que se devuelven en la respuesta.

Para el propósito de este ejemplo, estamos cargando datos específicos de un id (id=2) en particular utilizando la query SQL: WHERE productos.id = 2

Mostrando los datos recuperados en la plantilla

Podemos mostrar los datos recuperados de nuestra base de datos en la plantilla Vue. En src/App.vue, agregue los siguientes cambios:

<template>
  <div>
    <h2>{{ rows[0] && rows[0].producto }}</h2>
    <p v-if="!rows.length">Cargando datos...</p>
    <ul v-else>
      <li>Nombre del producto: {{ rows[0].producto }}</li>
      <li>Categoría: {{ rows[0].categoria }}</li>
      <li>Precio: ${{ rows[0].precio }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',

  data () {
    return {
      rows: []
    }
  },

  async created () {
    // Connect to database and execute query here
    // ...
    this.rows = rows
  }
}
</script>

En este ejemplo, agregamos rows al objeto de datos de nuestra instancia Vue. Una vez que los datos se hayan cargado en el evento created, los asignamos a rows. En la plantilla Vue, si los datos no se han cargado todavía, muestra un mensaje de "Cargando datos...". De lo contrario, muestra los datos correspondientes.

Ejecutando la aplicación

Para ejecutar su aplicación, ejecute el siguiente comando:

npm run serve

Esto debería iniciar su servidor de desarrollo y mostrar su aplicación en su navegador predeterminado en la dirección http://localhost:8080. Si todo va bien, debería poder ver los datos que recuperamos de nuestra base de datos.

¡Felicidades! Ahora sabes cómo cargar datos de un id con INNER JOIN en Vue JS y Javascript. Con este conocimiento, puedes crear aplicaciones web impresionantes y escalables que aprovechen al máximo los datos relacionales en tu base de datos.