VUE - de Cero a Profesional

Integración y Desarrollo Avanzado

API y Peticiones HTTP con Axios

Utilizaremos Axios, una biblioteca popular para realizar peticiones HTTP. Vue.js no tiene una solución nativa para esto, por lo que Axios es una excelente opción.

Instalación de Axios

Primero, necesitamos instalar Axios en nuestro proyecto Vue.js. Puedes hacerlo ejecutando el siguiente comando:

				
					npm install axios

Realizar Peticiones HTTP con Axios

Vamos a configurar Axios para realizar peticiones HTTP y manejar la respuesta en un componente Vue.

Código de Ejemplo

				
					// api.js (Archivo opcional para configurar Axios)
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
});

export default apiClient;

				
			
				
					// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

				
			
				
					<!-- App.vue -->
<template>
  <div id="app">
    <h1>Peticiones HTTP con Axios</h1>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
// Importa apiClient si utilizas el archivo api.js

export default {
  data() {
    return {
      posts: []
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        this.posts = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
};
</script>

<style>
/* Estilos para la aplicación */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button {
  background-color: #42b983;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #38a77c;
}
</style>

Explicación

Instalación y Configuración de Axios

Instalamos Axios usando npm install axios y, opcionalmente, configuramos un cliente Axios en un archivo separado (api.js). Esto nos permite reutilizar la configuración de Axios en diferentes partes de la aplicación.

Realizar una Petición HTTP

En el componente App.vue, configuramos el método fetchData para realizar una petición GET utilizando Axios. Usamos la sintaxis async/await para manejar la petición de manera asíncrona.

  1. Importar Axios: Importamos Axios al inicio del script.
  2. Definir el Estado: Definimos una propiedad posts en el data para almacenar los datos que recibimos de la API.
  3. Método fetchData: Definimos un método fetchData que realiza una petición GET a https://jsonplaceholder.typicode.com/posts. Al recibir la respuesta, actualizamos posts con los datos recibidos.
  4. Manejo de Errores: Incluimos un bloque try/catch para manejar posibles errores durante la petición.

Vinculación de Datos

Usamos v-for para iterar sobre la lista de posts y mostrar cada título en una lista desordenada.

Resumen

  • Instalación de Axios: Se instala usando npm install axios.
  • Configuración Opcional de Axios: Configura un cliente Axios reutilizable en un archivo separado (api.js).
  • Realización de Peticiones HTTP: Utiliza Axios para realizar peticiones HTTP en métodos Vue.
  • Manejo de Respuestas y Errores: Actualiza el estado del componente con los datos recibidos y maneja posibles errores.
  • Vinculación de Datos: Usa v-for para mostrar datos recibidos de la API en la interfaz de usuario.

Autenticación y autorización

vamos a aprender cómo manejar la autenticación y la autorización en una aplicación Vue.js utilizando Vue Router y Axios para interactuar con una API.

Instalación de Dependencias

Primero, necesitamos instalar las siguientes dependencias:

  • Axios para realizar peticiones HTTP.
  • Vue Router para la navegación.
				
					npm install axios vue-router@next

Configuración Básica

Vamos a configurar Axios y Vue Router en nuestro proyecto para manejar la autenticación y la autorización.

Código de Ejemplo Completo

				
					// api.js (Configuración de Axios)
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://example.com/api',
  withCredentials: true,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
});

export default apiClient;

				
			
				
					// router.js (Configuración de Vue Router)
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Login from './components/Login.vue';
import Dashboard from './components/Dashboard.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  const loggedIn = localStorage.getItem('user');
  
  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login');
  } else {
    next();
  }
});

export default router;

				
			
				
					// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

				
			
				
					<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/login">Login</router-link>
      <router-link to="/dashboard">Dashboard</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* Estilos para la aplicación */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
nav {
  margin-bottom: 30px;
}
nav a {
  margin: 0 15px;
  color: #42b983;
  text-decoration: none;
}
nav a.router-link-exact-active {
  font-weight: bold;
}
</style>
er from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

				
			
				
					<!-- Login.vue -->
<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import apiClient from '../api';

export default {
  data() {
    return {
      email: '',
      password: '',
      error: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await apiClient.post('/login', {
          email: this.email,
          password: this.password
        });
        localStorage.setItem('user', JSON.stringify(response.data));
        this.$router.push('/dashboard');
      } catch (error) {
        this.error = 'Login failed. Please check your credentials.';
      }
    }
  }
};
</script>

				
			
				
					<!-- Dashboard.vue -->
<template>
  <div>
    <h1>Dashboard</h1>
    <p>Welcome to the dashboard!</p>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  beforeRouteEnter (to, from, next) {
    if (!localStorage.getItem('user')) {
      next('/login');
    } else {
      next();
    }
  }
};
</script>

Explicación

Configuración de Axios

Creamos un archivo api.js para configurar Axios con la base URL de nuestra API y las cabeceras necesarias. Esto nos permite reutilizar esta configuración en diferentes partes de nuestra aplicación.

Definición de Rutas y Protección de Rutas

En el archivo router.js, definimos las rutas de nuestra aplicación y utilizamos meta campos para especificar qué rutas requieren autenticación. Utilizamos beforeEach para verificar si el usuario está autenticado antes de permitir el acceso a rutas protegidas.

Manejo de Autenticación

En el componente Login.vue, creamos un formulario de inicio de sesión que envía una petición POST a nuestra API de autenticación utilizando Axios. Si la autenticación es exitosa, almacenamos la información del usuario en localStorage y redirigimos al usuario al Dashboard.

Protección de Componentes

En el componente Dashboard.vue, utilizamos beforeRouteEnter para verificar si el usuario está autenticado antes de permitir el acceso a la vista del dashboard.

Resumen

  • Instalación de Dependencias: Instalamos Axios y Vue Router para manejar peticiones HTTP y enrutamiento.
  • Configuración de Axios: Configuramos Axios en un archivo separado para reutilizar la configuración.
  • Definición de Rutas: Definimos rutas y especificamos qué rutas requieren autenticación.
  • Protección de Rutas: Utilizamos beforeEach en Vue Router para proteger rutas que requieren autenticación.
  • Formulario de Inicio de Sesión: Creamos un formulario de inicio de sesión que autentica al usuario y almacena la información del usuario en localStorage.
  • Protección de Componentes: Utilizamos beforeRouteEnter para verificar la autenticación antes de renderizar componentes protegidos.

Uso de plugins de Vue

vamos a aprender cómo usar plugins en Vue.js. Los plugins son una forma de añadir funcionalidad global a una aplicación Vue.js, extendiendo sus capacidades. Podemos utilizar plugins existentes o crear nuestros propios plugins.

Instalación y Configuración de un Plugin Existente

Para este ejemplo, usaremos vue-toastification, un plugin para mostrar notificaciones de toast.

Primero, necesitamos instalar el plugin:

				
					npm install vue-toastification

Código de Ejemplo

				
					// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Toast from 'vue-toastification';
import 'vue-toastification/dist/index.css';

const options = {
  // Opciones de configuración del plugin
  timeout: 5000,
  position: 'top-right'
};

const app = createApp(App);
app.use(Toast, options); // Usamos el plugin de toast con opciones
app.mount('#app');

				
			
				
					<!-- App.vue -->
<template>
  <div id="app">
    <h1>Uso de Plugins en Vue.js</h1>
    <button @click="showToast">Mostrar Toast</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showToast() {
      this.$toast('¡Hola! Este es un mensaje de toast.'); // Usamos el método proporcionado por el plugin
    }
  }
};
</script>

<style>
/* Estilos para la aplicación */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button {
  background-color: #42b983;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #38a77c;
}
</style>

Explicación

Instalación del Plugin

Primero, instalamos el plugin vue-toastification usando npm. Este comando descarga e instala el plugin en nuestro proyecto.

Configuración del Plugin

En el archivo main.js, importamos el plugin y sus estilos. Luego, configuramos las opciones del plugin, como el tiempo de duración de las notificaciones y la posición en la pantalla. Usamos app.use para integrar el plugin con nuestra aplicación Vue.

Uso del Plugin en un Componente

En el componente App.vue, añadimos un botón que, al ser clicado, muestra una notificación de toast. Utilizamos el método $toast proporcionado por el plugin para mostrar la notificación.

Crear un Plugin Personalizado

También podemos crear nuestros propios plugins para Vue.js.

Código de Ejemplo

				
					// myPlugin.js
export default {
  install(app, options) {
    app.config.globalProperties.$myMethod = function () {
      console.log('Método global personalizado');
    };
  }
};

				
			
				
					// main.js
import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './myPlugin'; // Importamos nuestro plugin personalizado

const app = createApp(App);
app.use(myPlugin); // Usamos nuestro plugin personalizado
app.mount('#app');

				
			
				
					<!-- App.vue -->
<template>
  <div id="app">
    <h1>Uso de Plugins en Vue.js</h1>
    <button @click="useMyMethod">Usar Método Personalizado</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    useMyMethod() {
      this.$myMethod(); // Usamos el método global personalizado
    }
  }
};
</script>

<style>
/* Estilos para la aplicación */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button {
  background-color: #42b983;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #38a77c;
}
</style>

Explicación

Crear el Plugin Personalizado

Creamos un archivo myPlugin.js que exporta un objeto con un método install. Este método recibe la instancia de la aplicación y cualquier opción que queramos pasar. Añadimos un método global personalizado app.config.globalProperties.$myMethod que estará disponible en todos los componentes.

Uso del Plugin Personalizado

En el archivo main.js, importamos y usamos nuestro plugin personalizado con app.use(myPlugin). Esto hace que el método global $myMethod esté disponible en todos los componentes de la aplicación.

Uso del Método Personalizado en un Componente

En el componente App.vue, añadimos un botón que, al ser clicado, llama al método global personalizado $myMethod, que simplemente imprime un mensaje en la consola.

Resumen

  • Instalación de Plugins Existentes: Instala el plugin usando npm y configúralo en main.js.
  • Uso de Plugins Existentes: Usa los métodos y funcionalidades proporcionados por el plugin en tus componentes.
  • Crear Plugins Personalizados: Define un método install que registre cualquier propiedad, método o funcionalidad global.
  • Uso de Plugins Personalizados: Usa el plugin personalizado en main.js para que sus funcionalidades estén disponibles globalmente.

Recursos