- Abra el proyecto con visual studio code
- Instale la extension live Server
- Ejecute o inicie la extension Live Server
Este código JavaScript utiliza la biblioteca petite-vue para crear una aplicación web y realizar operaciones de red.
Las funciones callGet y callPost son funciones asincrónicas que realizan solicitudes GET y POST respectivamente a un punto final de la API especificado. Ambas funciones utilizan la función fetch para realizar la solicitud de red y devuelven la respuesta como un objeto JSON. La función callPost también incluye un cuerpo de solicitud y establece el encabezado 'Content-Type' en 'application/json'. Si la respuesta no es exitosa, lanza un error.
La función getMovies realiza una solicitud GET a la API para obtener una lista de películas de un autor específico. El autor se obtiene de un objeto reactivo values. Si la solicitud es exitosa, la lista de películas se almacena en el objeto reactivo lists. Si ocurre un error durante la solicitud, se llama a la función errorHandler.
La función getAuthor es similar a getMovies, pero obtiene una lista de autores en lugar de películas.
La función errorHandler simplemente registra cualquier error que se le pase en la consola.
Finalmente, se crea una aplicación petite-vue y se monta. Las funciones getMovies y getAuthor se llaman inmediatamente después de montar la aplicación para llenar los objetos reactivos con datos desde la API.
Este es un archivo HTML que contiene dos elementos de selección (dropdowns) y un script que se vincula al final del cuerpo del documento.
El primer elemento de selección permite al usuario elegir un autor de una lista. Esta lista se genera dinámicamente utilizando la directiva v-for de Vue.js, que crea una opción para cada autor en la lista de autores. El valor de cada opción es el ID del autor y el texto mostrado es el nombre del autor. La directiva v-model se utiliza para vincular el valor seleccionado a la propiedad values.author. Además, hay una directiva v-effect que llama a la función api.getMovies() cada vez que el valor seleccionado cambia, pero solo si el valor no está vacío.
El segundo elemento de selección permite al usuario elegir una película de una lista. Al igual que con el primer elemento de selección, la lista de películas se genera dinámicamente utilizando la directiva v-for. El valor de cada opción es el ID de la película y el texto mostrado es el nombre de la película. La directiva v-model se utiliza para vincular el valor seleccionado a la propiedad values.movies.
Finalmente, el script /data.js se vincula al final del cuerpo del documento. Este script es un módulo, como lo indica el atributo type="module". Este script probablemente contiene la lógica para obtener los datos de los autores y las películas, así como para manejar los cambios en los valores seleccionados.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent