Dinamización de los datos de la página de inicio

Introducción

En este proyecto, aprenderás a mostrar dinámicamente los datos de la página de inicio utilizando Vue.js. Este proyecto está diseñado para ayudarte a entender el proceso de obtener datos de un archivo JSON y renderizarlos en un componente de Vue.js.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo solicitar la lista de publicaciones de la página de inicio a través de Axios y vincularla al componente List.vue.
• Cómo implementar el estilo y el efecto de la disposición de la página de inicio para que coincida con el diseño proporcionado.

🏆 Logros

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

• Utilizar Axios para obtener datos de un archivo JSON.
• Vincular los datos obtenidos a un componente de Vue.js y renderizarlos en la plantilla.
• Dar estilo a los componentes para que coincida con un diseño específico.
• Integrar diferentes componentes de Vue.js para crear una página de inicio completa.

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── public
│   ├── static
│     ├── data
│        ├── list.json
│     ├── images
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│     ├── Header.vue
│     ├── List.vue
│     ├── Recommend.vue
│   ├── router
│   ├── views
│     ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

Entre ellos:

• components/List.vue es el componente de lista de artículos que se agregará para este desafío.
• public/static/data/list.json es el archivo de datos para obtener la lista de artículos.
• public/static/images es el archivo de imágenes utilizado para la lista de artículos.

A continuación, descarga las dependencias utilizando el comando npm install en la terminal, espera a que las dependencias terminen de descargarse y luego inicia el proyecto utilizando el comando npm run serve.

Una vez que el proyecto se inicia correctamente, haz clic en "Web 8080" para previsualizarlo en tu navegador. El efecto de ejecución de la página se muestra en la siguiente imagen.

Completado de la función de visualización de la lista

En este paso, aprenderás a solicitar los datos de la lista de publicaciones de la página de inicio a través de axios y vincularlos al componente List.vue.

1. Abre el archivo List.vue ubicado en la carpeta src/components.
2. Importa la librería axios bajo <script>:

// TODO
import axios from "axios";

3. En la función data(), define una propiedad dataList para almacenar los datos de la lista:

data() {
  return {
    dataList: []
  };
}

4. En el hook de ciclo de vida created(), llama al método getList() para obtener los datos de la lista:

created() {
  this.getList();
}

5. Implementa el método getList() para obtener los datos del archivo public/static/data/list.json:

methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}

6. El código completo dentro de <script> es el siguiente:

<script>
// TODO
import axios from "axios";
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("./static/data/list.json").then((res) => {
        this.dataList = res.data.data.listInfo;
      });
    }
  }
};
</script>

7. En la plantilla, utiliza la directiva v-for para renderizar los elementos de la lista:

<template>
  <div class="list">
    <!-- TODO -->
    <div class="list-item" v-for="item in dataList" :key="item.id">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

Este paso garantiza que los datos de la lista de publicaciones de la página de inicio se obtengan del archivo public/static/data/list.json y se vinculen al componente List.vue.

Siguiendo estos pasos, has completado la dinamización de los datos de la página de inicio, incluyendo la obtención de los datos del archivo public/static/data/list.json y la renderización de los elementos de la lista en el diseño deseado.

El efecto completado es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.