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ícateVue.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.
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)
Identificadores y relaciones JPA
Borrar datos de base de datos
Web y Test Starters
Métodos find en repositorios
Controladores Spring MVC
Inserción de datos
CRUD Customers Spring MVC + Spring Data JPA
Backend API REST con Spring Boot
Controladores Spring REST
Uso de Spring con Thymeleaf
API Specification
Registro de usuarios
Crear entidades JPA
Asociaciones en JPA
Asociaciones de entidades JPA
Integración con Vue
Consultas JPQL
Open API y cómo agregarlo en Spring Boot
Uso de Controladores REST
Repositorios reactivos
Inyección de dependencias
Introducción a Spring Boot
CRUD y JPA Repository
Inyección de dependencias
Vista en Spring MVC con Thymeleaf
Servicios en Spring
Operadores Reactivos
Configuración de Vue
Entidades JPA
Integración con Angular
API Specification
API Query By Example (QBE)
Controladores MVC
Anotaciones y mapeo en JPA
Consultas JPQL con @Query en Spring Data JPA
Repositorios Spring Data
Inyección de dependencias
Data JPA y Mail Starters
Configuración de Angular
Controladores Spring REST
Configuración de Controladores MVC
Consultas JPQL con @Query en Spring Data JPA
Actualizar datos de base de datos
Verificar token JWT en peticiones
Login de usuarios
Integración con React
Configuración de React
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
Introducción Y Entorno
Spring Boot Starters
Introducción Y Entorno
Inyección De Dependencias
Introducción Y Entorno
Controladores Spring Mvc
Spring Web
Vista En Spring Mvc Con Thymeleaf
Spring Web
Controladores Spring Rest
Spring Web
Open Api Y Cómo Agregarlo En Spring Boot
Spring Web
Servicios En Spring
Spring Web
Clientes Resttemplate Y Restclient
Spring Web
Rxjava En Spring Web
Spring Web
Crear Entidades Jpa
Persistencia Spring Data
Asociaciones De Entidades Jpa
Persistencia Spring Data
Repositorios Spring Data
Persistencia Spring Data
Métodos Find En Repositorios
Persistencia Spring Data
Inserción De Datos
Persistencia Spring Data
Actualizar Datos De Base De Datos
Persistencia Spring Data
Borrar Datos De Base De Datos
Persistencia Spring Data
Consultas Jpql Con @Query En Spring Data Jpa
Persistencia Spring Data
Api Query By Example (Qbe)
Persistencia Spring Data
Api Specification
Persistencia Spring Data
Repositorios Reactivos
Persistencia Spring Data
Introducción E Instalación De Apache Kafka
Mensajería Asíncrona
Crear Proyecto Con Apache Kafka
Mensajería Asíncrona
Creación De Producers
Mensajería Asíncrona
Creación De Consumers
Mensajería Asíncrona
Kafka Streams En Spring Boot
Mensajería Asíncrona
Introducción A Spring Webflux
Reactividad Webflux
Spring Data R2dbc
Reactividad Webflux
Controlador Rest Reactivo Basado En Anotaciones
Reactividad Webflux
Controlador Rest Reactivo Funcional
Reactividad Webflux
Operadores Reactivos Básicos
Reactividad Webflux
Operadores Reactivos Avanzados
Reactividad Webflux
Cliente Reactivo Webclient
Reactividad Webflux
Introducción A Spring Security
Seguridad Con Spring Security
Seguridad Basada En Formulario En Mvc Con Thymeleaf
Seguridad Con Spring Security
Registro De Usuarios
Seguridad Con Spring Security
Login De Usuarios
Seguridad Con Spring Security
Verificar Token Jwt En Peticiones
Seguridad Con Spring Security
Seguridad Jwt En Api Rest Spring Web
Seguridad Con Spring Security
Seguridad Jwt En Api Rest Reactiva Spring Webflux
Seguridad Con Spring Security
Autenticación Y Autorización Con Anotaciones
Seguridad Con Spring Security
Testing Unitario De Componentes Y Servicios
Testing Con Spring Test
Testing De Repositorios Spring Data Jpa
Testing Con Spring Test
Testing Controladores Spring Mvc Con Thymeleaf
Testing Con Spring Test
Testing Controladores Rest Con Json
Testing Con Spring Test
Testing De Aplicaciones Reactivas Webflux
Testing Con Spring Test
Testing De Seguridad Spring Security
Testing Con Spring Test
Testing Con Apache Kafka
Testing Con Spring Test
Integración Con Angular
Integración Frontend
Integración Con React
Integración Frontend
Integración Con Vue
Integración Frontend
En esta lección
Objetivos de aprendizaje de esta lección
- Entender las características fundamentales de Vue.js y cómo se complementan con las funcionalidades de Spring Boot.
- Aprender a configurar y estructurar un proyecto que combine Vue.js para el frontend y Spring Boot para el backend.
- Familiarizarse con las técnicas de comunicación entre el cliente (Vue.js) y el servidor (Spring Boot) usando protocolos como HTTP.
- Implementar estrategias de autenticación y autorización para proteger recursos y datos.
- Desarrollar interfaces de usuario interactivas utilizando componentes y directivas en Vue.js.