...
VUE
En la parte Vue creamos tenemos la interfaz de lo que hemos hecho en Spring Boot. En el proyecto de ejemplo tenemos cuatro vistas, una de bienvenida, una para mostrar diplomas, una para mostrar todas las titulaciones, y otra para añadir titulaciones. Con esto cubrimos la navegación y la llamada al servicio REST, aparte de cómo desarrollar los componentes. Podemos descargar el proyecto de ejemplo aquí: Proyecto Vue de ejemplo completo. Recordad que si os descargáis este proyecto de referencia, antes de ejecutarlo tenéis que ejecutar npm i para descargar las dependencias.
Vue será más complicado en general, pues no es Java como la parte anterior, que ya conocerá mucha gente, por lo que es importante ir leyéndose las guías y entendiendo las cosas que se van haciendo. Acostumbrarse a la sintaxis de Vue, tanto en el template como en la parte JavaScript lleva tiempo, así que habrá que ir haciéndolo con las guías a mano.
De nuevo, el guión de lo que tenemos que ir viendo es el siguiente (con indicaciones sobre la implementación del proyecto de prueba para la formación):
...
Recientemente se ha cambiado la manera de hacer el front-end de los servicios. Todos van a ir al Portal de Servicios, e irán unificados en un único proyecto. Los servicios que ya existían se están migrando a este proyecto unificado. Las formaciones anteriores se dieron cuando cada servicio tenía un proyecto independiente, por lo que hay cosas que ahora son diferentes, como la configuración del proyecto. Por ello, lo primero que debemos hacer es ponernos el proyecto Portal UI:
- Proyectos en POSE: Guía inicial - Se redirige a otras guías. Si es sólo por aprendizaje, podemos descargar el proyecto Portal UI directamente y arrancarlo en local.
Para trabajar en local, debemos tener VS Code configurado y configurar el proyecto:
- Instalación del entorno de desarrollo
- Despliegue en local de un proyecto Vue - Para abrir la consola de VS Code, podemos hacerlo pulsando en la línea azul de abajo, o con Ctrl + Ñ.
A partir de aquí, podemos ir viendo las diferentes guías para aprender y familiarizarnos con la forma de trabajar en Vue:
...
- Cómo depurar en Vue
- Gestión de paquetes y dependencias
- Estructura de los componentes en Vue
- Registro de Componentes
- Vue Router: Navegación. Debemos añadir los componentes correspondientes a cada una de las vistas de la aplicación, aunque estén vacíos de momento, y comprobar que se hace la navegación correctamente.
- Axios: llamadas a servicios REST. Implementar las llamadas a los servicios REST, y construir los componentes a partir de aquí.
- Vuex: estado global. No se utiliza en el proyecto de referencia, pero al menos hay que leérselo y entenderlo.
- i18n: internacionalización. No se utiliza en el proyecto de referencia, pero al menos hay que leérselo y entenderlo
...
- .
Puede sernos de utilidad este vídeo, parte de la sesión en la que se explica Vue, del curso anterior, el que se referencia en "Otros recursos", más abajo. Puede ser también un buen complemento a la documentación:
...