¿Desplegar mi frontend y conectarlo con un backend?
Vue Router
Router
index.html
<router-view>
</router-view>
Ejemplo eventos
<script>
export defaults {
data () {
...
},
methods : {
loadData(){
// Do this
}
},
mounted(){
console.log(`Acabas de navegar a esta página`);
console.log(`Con el con la url /contacts/${this.$route.params.id}`);
this.loadData();
}
}
</script>json-server
Quiero guardar mis datos en "la nube"
Con json-server podemos crear a modo rápido una API REST completa en menos de 1 minuto.
Puedo hacer llamadas con axios o con fetch a mi api para guardar los datos allá en la nube
Directo
Resumen
- Instalar json-server con "npm i -g json-server"
- Crear un fichero db.json en la raiz de esa carpeta con al menos un objeto vacío y un array vacío por cada tabla que existirá. { "users" : [] , "contacts": [ ] }
- Arrancamos con un "json-server --watch db.json"
- Podemos navegar a la url raiz y ver "su docu"
- Podemos hacer pruebas desde postman
Directo
V 3.0 Ejercicio
Creamos un proyecto con router.
Vamos a modificar nuestro frontend anterior, para añadir una campo de textarea de "notas" para que anotes muchos detalles en cada contacto.
Esto luego no se ve en la preview, pero añadiremos un botón de "ver detalles" que ocasionará una navegación hasta la vista de detalles.
En esa ruta colocamos el id del contacto en la url para luego leerlo y hacerle un GET completo a /contacts/:id de la api. Mostramos todos los campos
Ahora sí ! Desplegando nuestro proyecto
Diferentes empresas
+ 100...
Cosas a tener en cuenta
Frontend VS backend
SPA versus HTMLS
Server Side Rendering
dist/public folders
Probamos netlify
Actividad
Configurais netlify en vuestro repositorio de proyecto.
Actividad
Creamos un proyecto nuevo de vuejs con router, creamos un mínimo de rutas con simplemente textos diferentes en cada pantalla. Subimos a netlify y configuramos como SPA
Actividad
+ 100...
Curso de Frontend EOI-Telefonica Noviembre 2024. Despliegues y Rutas
By Yunior González Santana
