Formateo y visualización de datos con Vue.js

Introducción

En este proyecto, aprenderás a convertir y formatear datos de tabla para que se muestren de manera amigable para el usuario. Esta es una tarea común que los desarrolladores frontend a menudo encuentran cuando trabajan con datos del backend.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo enviar una solicitud HTTP para obtener datos de un archivo JSON
• Cómo formatear los datos para que coincidan con el formato requerido para la visualización
• Cómo renderizar los datos formateados en una tabla HTML utilizando Vue.js y Element UI

🏆 Logros

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

• Utilizar axios para enviar solicitudes HTTP y obtener datos
• Manipular y transformar datos al formato deseado
• Integrar Vue.js y Element UI para crear un componente de tabla responsivo y visualmente atractivo

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:

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Enviar una solicitud para obtener los datos

En este paso, aprenderás a enviar una solicitud HTTP para obtener los datos del archivo fetchTableData.json.

1. Abre el archivo index.html en el editor de código.
2. En la sección <script>, agrega un nuevo método getTableData() a los methods de la instancia de Vue.
3. Dentro del método getTableData(), utiliza la función axios.get() para enviar una solicitud GET al archivo fetchTableData.json:

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: Formatear los datos y asignarlos a tableData
    });
  }
}

4. Llama a la función getTableData en el mounted de la instancia de Vue.

mounted() {
  this.getTableData();
},

Formatear los datos

En este paso, aprenderás a formatear los datos al formato requerido y asignarlos a la propiedad tableData.

1. Abre el archivo index.html en el editor de código.
2. En la sección <script>, localiza el método getTableData() dentro de la instancia de Vue.
3. Dentro de la devolución de llamada de éxito del método then() en la función getTableData(), obtén la propiedad data del objeto de respuesta:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. Itera a través del array resData y formatea los datos de acuerdo con los requisitos:

   • Para el campo datetime, convierte el formato de YYYYMMDD a YYYY-MM-DD.
   • Para el campo sex, convierte el valor de 1 a "Hombre" y 0 a "Mujer".
   • Para el campo vip, convierte el valor de 1 a "Sí" y 0 a "No".

   Aquí está el código para formatear los datos:

   getTableData() {
      axios.get("./fetchTableData.json").then((response) => {
         let resData = response.data.data;
         resData.forEach((item) => {
            item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
            item.sex = item.sex? "Hombre" : "Mujer";
            item.vip = item.vip? "Sí" : "No";
         });
      });
   }
   

5. Después de formatear los datos, asigna el array resData a la propiedad tableData:

   getTableData() {
      axios.get("./fetchTableData.json").then((response) => {
         //...
         this.tableData = resData;
      });
   }
   

Ahora, los datos están formateados y asignados a la propiedad tableData, que se utilizará para renderizar la tabla en el HTML.

El efecto final es el siguiente:

Resumen

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