¿Desplegar mi frontend y conectarlo con un backend?

Vue Router

Link docu

Router 

index.html

<router-view>

 

 

 

 

</router-view>

LIFECYCLE HOOKS

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

Voy a crear un mini proyecto con router. 

 

Probamos en directo el tema de los params y el this.$route

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...