Diseño de lista de productos responsivo | Tutorial de Vue.js

Introducción

En este proyecto, aprenderás a crear un diseño de lista de productos reactivo con una característica de conmutación. Esta característica permite a los usuarios alternar fácilmente entre una vista en cuadrícula y una vista en lista de los elementos del producto.

👀 Vista previa

responsive layout switching demo

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar la estructura del proyecto y entender el propósito de cada archivo y carpeta
Cómo obtener datos de un archivo JSON y poblar la lista de productos
Cómo implementar la funcionalidad de conmutación de diseño utilizando Vue.js
Cómo renderizar condicionalmente los diseños en cuadrícula y en lista según la vista seleccionada

🏆 Logros

Después de completar este proyecto, podrás:

Estructurar efectivamente un proyecto de Vue.js
Utilizar Axios para obtener datos de un archivo JSON
Utilizar directivas de Vue.js como v-if y v-else para renderizar contenido condicionalmente
Manejar interacciones de usuario y actualizar la interfaz de usuario en consecuencia

Configurar la estructura del proyecto

En este paso, aprenderás a configurar la estructura del proyecto para el proyecto de conmutación de diseño. Siga los pasos siguientes para completar este paso:

Abra la carpeta del proyecto para este proyecto. La estructura de directorios es la siguiente:

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

Familiarícese con el propósito de cada carpeta y archivo:
- css: Esta carpeta es para archivos de estilo.
- images: Esta carpeta es para imágenes.
- js/vue.js: Este es el archivo de Vue 2.x.
- js/axios.min.js: Este es el archivo de Axios.
- goodsList.json: Estos son los datos requeridos para la solicitud.
- index.html: Este contiene el diseño y la lógica de la página.
Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
Abra "Web 8080" en la parte superior de la VM y actualícela manualmente para ver la página.

Implementar la recuperación de datos

En este paso, aprenderás a obtener los datos requeridos para el proyecto. Siga los pasos siguientes para completar este paso:

En el archivo index.html, localice la etiqueta <script> al final del archivo.
Dentro de la etiqueta <script>, cree una nueva instancia de Vue usando new Vue().
En la opción data de la instancia de Vue, agregue una propiedad goodsList y agréguela como un array vacío.
En el hook mounted de la instancia de Vue, use Axios para obtener los datos del archivo goodsList.json.
Actualice la propiedad de datos goodsList con los datos recuperados.

Su código debe verse similar a esto:

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

Implementar la conmutación de diseño

En este paso, aprenderás a implementar la funcionalidad de conmutar el diseño de la lista de productos. Siga los pasos siguientes para completar este paso:

En el archivo index.html, localice el elemento <div class="bar">.
Dentro de este elemento, agregue dos elementos <a> con los nombres de clase grid-icon y list-icon, respectivamente.

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

Cree una propiedad de datos changeBar en la instancia de Vue para controlar el diseño actual, estableciendo el valor predeterminado en 0, es decir, por defecto es el diseño en cuadrícula.

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    //...
  }
});

Vincule el evento @click a cada elemento <a>, cuando se hace clic en el grid-icon, establezca changeBar en 0 y agregue la clase active al grid-icon. Quite la clase active del list-icon.

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!--... -->
</div>

Vincule el evento @click a cada elemento <a>, cuando se hace clic en el list-icon, establezca changeBar en 1 y agregue la clase active al list-icon. Quite la clase active del grid-icon.

<div class="bar">
  <!--... -->
  <a
    class="list-icon"
    :class="changeBar == 1? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

Utilice las directivas v-if y v-else para renderizar condicionalmente los diseños en cuadrícula y en lista según el valor de changeBar.

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

Finalizar el proyecto

En este último paso, revisarás el proyecto completado y asegurarás de que cumpla con los requisitos.

Verifica que los datos se estén recuperando correctamente del archivo goodsList.json.
Asegúrate de que la funcionalidad de conmutación de diseño funcione como se espera:
- Hacer clic en el icono de cuadrícula cambia el diseño a la vista en cuadrícula y agrega la clase active al icono de cuadrícula.
- Hacer clic en el icono de lista cambia el diseño a la vista en lista y agrega la clase active al icono de lista.
Prueba el proyecto haciendo clic en los iconos y asegurándote de que el diseño cambie como se espera.

¡Felicitaciones! Has completado el proyecto de conmutación de diseño. Has aprendido a: