Spring Boot

SpringBoot

Tutorial SpringBoot: Integración con Vue

Spring Boot y VueJS: integración y desarrollo. Domina la integración de Spring Boot con VueJS mediante ejemplos prácticos y detallados.

Aprende SpringBoot GRATIS y certifícate

Vue.js es un framework JavaScript progresivo que ha ganado una notable popularidad en la comunidad de desarrollo debido a su enfoque minimalista y modular para la construcción de interfaces de usuario en aplicaciones web. A diferencia de otros frameworks más pesados y monolíticos, Vue.js ofrece a los desarrolladores la flexibilidad de utilizar sólo lo que necesiten, sin la sobrecarga de características innecesarias.

La filosofía principal detrás de Vue es que debe ser adoptivo y escalable. Esto significa que puede ser fácilmente integrado en proyectos existentes sin necesidad de una revisión completa, y también puede ser ampliado con diversas herramientas y bibliotecas para adaptarse a las necesidades de proyectos más grandes y complejos.

Configuración del Proyecto:

La integración de Vue.js con Spring Boot implica la creación de dos entidades principales: el backend desarrollado con Spring Boot y el frontend basado en Vue.js. A continuación, se describe el proceso detallado para configurar ambos componentes y conectarlos de manera efectiva:

1. Configuración de Spring Boot:

a. Inicio Rápido con Spring Initializr:

  • Acceder a Spring Initializr.
  • Elegir las dependencias deseadas, especialmente spring-boot-starter-web para la creación de aplicaciones web.
  • Descargar el proyecto generado y descomprimirlo en el directorio de trabajo.

b. Dependencias adicionales:

  • Si se desea incorporar una base de datos, se pueden añadir las correspondientes dependencias, como spring-boot-starter-data-jpa para trabajar con JPA y la dependencia de la base de datos específica (por ejemplo, H2 para una base de datos en memoria).
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

2. Configuración de Vue.js:

a. Instalación de Vue CLI: Vue CLI es una herramienta que facilita la creación de nuevos proyectos Vue. Para instalarlo:

npm install -g @vue/cli

b. Creación de un nuevo proyecto Vue:

vue create frontend

A través de esta instrucción, Vue CLI guiará al usuario por un proceso de configuración del proyecto. Aquí, se pueden seleccionar características como el enrutador de Vue, Vuex para la gestión del estado, entre otros.

c. Integración con Spring Boot: Una estrategia común es colocar el proyecto Vue dentro del directorio principal del proyecto Spring Boot. Sin embargo, es crucial que ambos proyectos, frontend y backend, se mantengan como entidades separadas para garantizar la modularidad y la separación de preocupaciones.

3. Conexión entre frontend y backend:

a. Configuración de CORS en Spring Boot: Para permitir que Vue.js (ejecutándose generalmente en localhost:8080) acceda al servidor de Spring Boot (por defecto en localhost:8081 u otro puerto), es necesario configurar CORS en Spring Boot.

@Configuration
public class MyConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:8080");
            }
        };
    }
}

b. Proxy en Vue.js: Otra solución para abordar el problema de CORS y simplificar las llamadas al backend es configurar un proxy en el lado de Vue. Esto puede hacerse en el archivo vue.config.js del proyecto Vue.

module.exports = {
  devServer: {
    proxy: 'http://localhost:8081'
  }
}

Con este proxy, todas las llamadas hechas a la API en el entorno de desarrollo se reenviarán al servidor de Spring Boot, evitando problemas de CORS.

Con estos pasos, el proyecto estará configurado adecuadamente, permitiendo una fluida comunicación entre Vue.js y Spring Boot.

Comunicación entre Servidor y Cliente:

La comunicación entre el servidor (Spring Boot en este caso) y el cliente (Vue.js) es esencial para la operatividad de las aplicaciones full-stack. Se basa en la capacidad del cliente para solicitar datos y enviar actualizaciones al servidor, mientras que el servidor debe responder y procesar esas solicitudes.

1. Endpoints en Spring Boot:

a. Creación de un Controlador: El primer paso en el lado del servidor es crear endpoints que el cliente pueda consumir. Estos endpoints expondrán la lógica de negocio y los datos a través de APIs REST.

@RestController
@RequestMapping("/api/items")
public class ItemController {

    @GetMapping
    public List<Item> getAllItems() {
        // lógica para obtener todos los items
    }

    @GetMapping("/{id}")
    public Item getItem(@PathVariable Long id) {
        // lógica para obtener un item específico por id
    }

    @PostMapping
    public Item createItem(@RequestBody Item item) {
        // lógica para crear un nuevo item
    }

    // ... otros endpoints según sea necesario
}

2. Consumo de la API en Vue.js con Axios:

a. Instalación de Axios:

Axios es una biblioteca de cliente HTTP muy popular para realizar solicitudes AJAX. Para agregar Axios al proyecto Vue:

npm install axios

b. Realizando Solicitudes con Axios:

import axios from 'axios';

// Obtener todos los items
axios.get('/api/items')
    .then(response => {
        this.items = response.data;
    });

// Obtener un item específico por id
axios.get(`/api/items/${id}`)
    .then(response => {
        this.item = response.data;
    });

// Crear un nuevo item
axios.post('/api/items', this.newItem)
    .then(response => {
        // Lógica post-creación, como actualizar la lista de items
    });

3. Manejo de Respuestas y Errores:

Es fundamental manejar adecuadamente las respuestas y los posibles errores que puedan surgir durante la comunicación entre cliente y servidor.

  • En el lado del servidor (Spring Boot), es posible utilizar ResponseEntity para construir respuestas más detalladas y proporcionar códigos de estado HTTP específicos.
@GetMapping("/{id}")
public ResponseEntity<Item> getItem(@PathVariable Long id) {
    Item item = // obtener item
    if (item == null) {
        return new ResponseEntity<>(HttpStatus.NOT_FOUND);
    }
    return new ResponseEntity<>(item, HttpStatus.OK);
}
  • En el lado del cliente (Vue.js), Axios permite manejar respuestas y capturar errores fácilmente:
axios.get('/api/items')
    .then(response => {
        this.items = response.data;
    })
    .catch(error => {
        console.error("Hubo un error al obtener los datos:", error);
        // Aquí se puede gestionar el error, por ejemplo, mostrando un mensaje al usuario
    });

4. Optimizaciones y Consideraciones Adicionales:

  • Paginación y Filtrado: En aplicaciones más grandes, no es práctico ni eficiente recuperar todos los datos a la vez. En su lugar, se puede implementar paginación y filtrado tanto en el servidor como en el cliente.

  • WebSockets: Para aplicaciones que requieren comunicación en tiempo real, como chats o notificaciones, se puede considerar la implementación de WebSockets.

  • Autenticación y Headers: Al realizar solicitudes, especialmente las que modifican datos, es esencial enviar tokens de autenticación u otros headers para garantizar la seguridad.

Con una configuración adecuada y una comprensión clara de cómo funcionan las solicitudes y respuestas, la comunicación entre Vue.js y Spring Boot puede ser fluida, eficiente y segura.

Autenticación y Autorización:

La autenticación y autorización son cruciales para proteger los recursos y datos de una aplicación. La autenticación verifica la identidad de un usuario, mientras que la autorización determina los derechos o permisos de un usuario autenticado.

1. Autenticación en Spring Boot:

a. Spring Security: Spring Boot facilita la implementación de la seguridad con la ayuda de Spring Security. Para empezar, se debe agregar la dependencia spring-boot-starter-security al archivo pom.xml.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

b. Configuración Básica: Para personalizar la configuración de seguridad, se puede crear una clase de configuración que extienda WebSecurityConfigurerAdapter.

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable()  // Desactivar CSRF si se utiliza una API REST
            .authorizeRequests()
                .antMatchers("/api/public/**").permitAll()  // Endpoints públicos
                .anyRequest().authenticated()  // Cualquier otro endpoint requiere autenticación
            .and()
            .httpBasic();  // Autenticación básica para el ejemplo
    }
}

2. Autenticación en Vue.js:

a. Instalación y Configuración de Axios para Autenticación:

Al hacer solicitudes al servidor, a menudo es necesario enviar un token de autenticación en los encabezados. Con Axios, se puede configurar fácilmente un interceptor para hacerlo.

axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token');  // Obtener token del almacenamiento local
    if (token) {
        config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

b. Iniciar Sesión y Almacenar Token:

Tras enviar las credenciales de inicio de sesión y recibir un token de autenticación, este token se debe almacenar (por ejemplo, en localStorage) para su uso en solicitudes futuras.

login(credentials) {
    axios.post('/api/authenticate', credentials)
        .then(response => {
            localStorage.setItem('token', response.data.token);
        })
        .catch(error => {
            console.error("Error de autenticación:", error);
        });
}

3. Autorización en Spring Boot y Vue.js:

a. Roles y Permisos en Spring Boot:

En Spring Security, se pueden definir roles y permisos para determinar qué usuarios tienen acceso a qué recursos.

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
            .antMatchers("/api/admin/**").hasRole("ADMIN")  // Solo los administradores pueden acceder
            .antMatchers("/api/user/**").hasRole("USER")   // Solo los usuarios registrados pueden acceder
            .anyRequest().authenticated();
}

b. Gestión de Roles en Vue.js:

En el lado del cliente, también es posible verificar los roles del usuario para mostrar u ocultar ciertas partes de la UI o para restringir el acceso a ciertas rutas.

if (userRole === 'ADMIN') {
    // Mostrar componentes específicos de administrador
}

4. Consideraciones Adicionales:

  • JWT (JSON Web Tokens): Una estrategia popular para la autenticación en aplicaciones basadas en REST es el uso de JWT. Estos tokens permiten a los servidores y clientes intercambiar información de manera segura.

  • OAuth2 y OIDC: Para aplicaciones que requieren inicio de sesión a través de terceros (como Google o Facebook), se puede implementar OAuth2 y OpenID Connect.

  • Seguridad en el Lado del Cliente: Siempre es esencial recordar que cualquier cosa en el lado del cliente (JavaScript, almacenamiento local, etc.) es vulnerable. La seguridad real se debe aplicar en el servidor.

La autenticación y autorización adecuadas aseguran que sólo los usuarios autorizados puedan acceder a ciertas partes de la aplicación y que sus datos estén protegidos contra accesos no deseados.

Componentes y Directivas:

Dentro del ecosistema de Vue.js, los componentes y las directivas son dos conceptos centrales que facilitan la creación de interfaces de usuario reactivas y modulares.

1. Componentes en Vue.js:

a. Definición: Los componentes son instancias reutilizables de Vue con un nombre. Ayudan a dividir la interfaz de usuario en unidades independientes y reutilizables.

b. Creación de un Componente Simple:

Vue.component('mi-componente', {
    template: '<div>Este es mi componente</div>'
});

c. Uso del Componente en la Plantilla:

<div id="app">
    <mi-componente></mi-componente>
</div>

d. Propiedades y Eventos: Los componentes pueden aceptar propiedades (props) para recibir datos y emitir eventos para comunicarse con sus componentes padres.

Vue.component('mi-botón', {
    props: ['titulo'],
    template: '<button @click="hacerClick">{{ titulo }}</button>',
    methods: {
        hacerClick() {
            this.$emit('mi-evento');
        }
    }
});

Uso:

<mi-botón :titulo="'Presíoname'" @mi-evento="manejadorEvento"></mi-botón>

2. Directivas en Vue.js:

Las directivas son prefijos especiales que denotan que un atributo debe ser reactivamente enlazado a una expresión. Vue proporciona varias directivas integradas para manipular el DOM de manera reactiva.

a. v-bind: Utilizado para enlazar un atributo a una expresión. Por ejemplo, para enlazar dinámicamente el atributo href de un enlace:

<a v-bind:href="url">Link</a>

b. v-model: Crea un enlace bidireccional en un input, textarea, o select. Si el input cambia, el modelo de datos se actualiza; y si el modelo cambia, la vista refleja el cambio.

<input v-model="mensaje">

c. v-for: Renderiza un elemento o un bloque de elementos varias veces según los ítems de una lista.

<ul>
    <li v-for="item in lista">{{ item.texto }}</li>
</ul>

d. v-if, v-else-if, v-else: Controla la renderización condicional de elementos. Si la expresión para v-if es verdadera, el elemento se renderiza.

<p v-if="visto">Ahora me ves</p>

e. v-on: Adjunta escuchadores de eventos al elemento. Se utiliza para escuchar eventos DOM y ejecutar algo cuando se disparen.

<button v-on:click="hacerAlgo">Haz clic en mí</button>

3. Creación de Directivas Personalizadas:

Aunque Vue ofrece un conjunto rico de directivas, a veces es útil crear directivas personalizadas para tareas específicas.

Vue.directive('mi-directiva', {
    // llamado cuando el elemento vinculado se inserta en el DOM
    inserted: function (el) {
        el.focus();  // por ejemplo, enfocar el elemento
    }
});

Uso:

<input v-mi-directiva>

Los componentes y directivas de Vue.js facilitan la creación de interfaces de usuario dinámicas y reactivas. Permiten una estructura modular y la capacidad de manejar acciones y datos de manera eficiente en la interfaz de usuario.

Aprende SpringBoot GRATIS online

Ejercicios de esta lección Integración con Vue

Evalúa tus conocimientos de esta lección Integración con Vue con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

API Query By Example (QBE)

Spring Boot
Test

Identificadores y relaciones JPA

Spring Boot
Puzzle

Borrar datos de base de datos

Spring Boot
Test

Web y Test Starters

Spring Boot
Puzzle

Métodos find en repositorios

Spring Boot
Test

Controladores Spring MVC

Spring Boot
Código

Inserción de datos

Spring Boot
Test

CRUD Customers Spring MVC + Spring Data JPA

Spring Boot
Proyecto

Backend API REST con Spring Boot

Spring Boot
Proyecto

Controladores Spring REST

Spring Boot
Código

Uso de Spring con Thymeleaf

Spring Boot
Puzzle

API Specification

Spring Boot
Puzzle

Registro de usuarios

Spring Boot
Test

Crear entidades JPA

Spring Boot
Código

Asociaciones en JPA

Spring Boot
Test

Asociaciones de entidades JPA

Spring Boot
Código

Integración con Vue

Spring Boot
Test

Consultas JPQL

Spring Boot
Código

Open API y cómo agregarlo en Spring Boot

Spring Boot
Puzzle

Uso de Controladores REST

Spring Boot
Puzzle

Repositorios reactivos

Spring Boot
Test

Inyección de dependencias

Spring Boot
Test

Introducción a Spring Boot

Spring Boot
Test

CRUD y JPA Repository

Spring Boot
Puzzle

Inyección de dependencias

Spring Boot
Código

Vista en Spring MVC con Thymeleaf

Spring Boot
Test

Servicios en Spring

Spring Boot
Código

Operadores Reactivos

Spring Boot
Puzzle

Configuración de Vue

Spring Boot
Puzzle

Entidades JPA

Spring Boot
Test

Integración con Angular

Spring Boot
Test

API Specification

Spring Boot
Test

API Query By Example (QBE)

Spring Boot
Puzzle

Controladores MVC

Spring Boot
Test

Anotaciones y mapeo en JPA

Spring Boot
Puzzle

Consultas JPQL con @Query en Spring Data JPA

Spring Boot
Test

Repositorios Spring Data

Spring Boot
Test

Inyección de dependencias

Spring Boot
Puzzle

Data JPA y Mail Starters

Spring Boot
Test

Configuración de Angular

Spring Boot
Puzzle

Controladores Spring REST

Spring Boot
Test

Configuración de Controladores MVC

Spring Boot
Puzzle

Consultas JPQL con @Query en Spring Data JPA

Spring Boot
Puzzle

Actualizar datos de base de datos

Spring Boot
Test

Verificar token JWT en peticiones

Spring Boot
Test

Login de usuarios

Spring Boot
Test

Integración con React

Spring Boot
Test

Configuración de React

Spring Boot
Puzzle

Todas las lecciones de SpringBoot

Accede a todas las lecciones de SpringBoot y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Spring Boot

Spring Boot

Introducción Y Entorno

Spring Boot Starters

Spring Boot

Introducción Y Entorno

Inyección De Dependencias

Spring Boot

Introducción Y Entorno

Controladores Spring Mvc

Spring Boot

Spring Web

Vista En Spring Mvc Con Thymeleaf

Spring Boot

Spring Web

Controladores Spring Rest

Spring Boot

Spring Web

Open Api Y Cómo Agregarlo En Spring Boot

Spring Boot

Spring Web

Servicios En Spring

Spring Boot

Spring Web

Clientes Resttemplate Y Restclient

Spring Boot

Spring Web

Rxjava En Spring Web

Spring Boot

Spring Web

Crear Entidades Jpa

Spring Boot

Persistencia Spring Data

Asociaciones De Entidades Jpa

Spring Boot

Persistencia Spring Data

Repositorios Spring Data

Spring Boot

Persistencia Spring Data

Métodos Find En Repositorios

Spring Boot

Persistencia Spring Data

Inserción De Datos

Spring Boot

Persistencia Spring Data

Actualizar Datos De Base De Datos

Spring Boot

Persistencia Spring Data

Borrar Datos De Base De Datos

Spring Boot

Persistencia Spring Data

Consultas Jpql Con @Query En Spring Data Jpa

Spring Boot

Persistencia Spring Data

Api Query By Example (Qbe)

Spring Boot

Persistencia Spring Data

Api Specification

Spring Boot

Persistencia Spring Data

Repositorios Reactivos

Spring Boot

Persistencia Spring Data

Introducción E Instalación De Apache Kafka

Spring Boot

Mensajería Asíncrona

Crear Proyecto Con Apache Kafka

Spring Boot

Mensajería Asíncrona

Creación De Producers

Spring Boot

Mensajería Asíncrona

Creación De Consumers

Spring Boot

Mensajería Asíncrona

Kafka Streams En Spring Boot

Spring Boot

Mensajería Asíncrona

Introducción A Spring Webflux

Spring Boot

Reactividad Webflux

Spring Data R2dbc

Spring Boot

Reactividad Webflux

Controlador Rest Reactivo Basado En Anotaciones

Spring Boot

Reactividad Webflux

Controlador Rest Reactivo Funcional

Spring Boot

Reactividad Webflux

Operadores Reactivos Básicos

Spring Boot

Reactividad Webflux

Operadores Reactivos Avanzados

Spring Boot

Reactividad Webflux

Cliente Reactivo Webclient

Spring Boot

Reactividad Webflux

Introducción A Spring Security

Spring Boot

Seguridad Con Spring Security

Seguridad Basada En Formulario En Mvc Con Thymeleaf

Spring Boot

Seguridad Con Spring Security

Registro De Usuarios

Spring Boot

Seguridad Con Spring Security

Login De Usuarios

Spring Boot

Seguridad Con Spring Security

Verificar Token Jwt En Peticiones

Spring Boot

Seguridad Con Spring Security

Seguridad Jwt En Api Rest Spring Web

Spring Boot

Seguridad Con Spring Security

Seguridad Jwt En Api Rest Reactiva Spring Webflux

Spring Boot

Seguridad Con Spring Security

Autenticación Y Autorización Con Anotaciones

Spring Boot

Seguridad Con Spring Security

Testing Unitario De Componentes Y Servicios

Spring Boot

Testing Con Spring Test

Testing De Repositorios Spring Data Jpa

Spring Boot

Testing Con Spring Test

Testing Controladores Spring Mvc Con Thymeleaf

Spring Boot

Testing Con Spring Test

Testing Controladores Rest Con Json

Spring Boot

Testing Con Spring Test

Testing De Aplicaciones Reactivas Webflux

Spring Boot

Testing Con Spring Test

Testing De Seguridad Spring Security

Spring Boot

Testing Con Spring Test

Testing Con Apache Kafka

Spring Boot

Testing Con Spring Test

Integración Con Angular

Spring Boot

Integración Frontend

Integración Con React

Spring Boot

Integración Frontend

Integración Con Vue

Spring Boot

Integración Frontend

Accede GRATIS a SpringBoot y certifícate

En esta lección

Objetivos de aprendizaje de esta lección

  1. Entender las características fundamentales de Vue.js y cómo se complementan con las funcionalidades de Spring Boot.
  2. Aprender a configurar y estructurar un proyecto que combine Vue.js para el frontend y Spring Boot para el backend.
  3. Familiarizarse con las técnicas de comunicación entre el cliente (Vue.js) y el servidor (Spring Boot) usando protocolos como HTTP.
  4. Implementar estrategias de autenticación y autorización para proteger recursos y datos.
  5. Desarrollar interfaces de usuario interactivas utilizando componentes y directivas en Vue.js.