Formatação e Visualização de Dados com Vue.js

Introdução

Neste projeto, você aprenderá como converter e formatar dados de tabelas para serem exibidos de forma amigável ao usuário. Esta é uma tarefa comum que os desenvolvedores frontend frequentemente encontram ao trabalhar com dados do backend.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como enviar uma requisição HTTP para buscar dados de um arquivo JSON
• Como formatar os dados para corresponder ao formato exigido para exibição
• Como renderizar os dados formatados em uma tabela HTML usando Vue.js e Element UI

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar axios para enviar requisições HTTP e buscar dados
• Manipular e transformar dados para o formato desejado
• Integrar Vue.js e Element UI para criar um componente de tabela responsivo e visualmente atraente

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Enviar uma Requisição para Obter os Dados

Nesta etapa, você aprenderá como enviar uma requisição HTTP para buscar os dados do arquivo fetchTableData.json.

1. Abra o arquivo index.html no editor de código.
2. Na seção <script>, adicione um novo método getTableData() aos methods na instância Vue.
3. Dentro do método getTableData(), use a função axios.get() para enviar uma requisição GET para o arquivo fetchTableData.json:

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: Formatar os dados e atribuí-los a tableData
    });
  }
}

4. Chame a função getTableData no mounted da instância Vue.

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

Formatar os Dados

Nesta etapa, você aprenderá como formatar os dados para o formato exigido e atribuí-los à propriedade tableData.

1. Abra o arquivo index.html no editor de código.
2. Na seção <script>, localize o método getTableData() dentro da instância Vue.
3. Dentro do callback de sucesso do método then() na função getTableData(), obtenha a propriedade data do objeto de resposta:

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

4. Itere sobre o array resData e formate os dados de acordo com os requisitos:

   • Para o campo datetime, converta o formato de YYYYMMDD para YYYY-MM-DD.
   • Para o campo sex, converta o valor de 1 para "Man" e 0 para "Woman".
   • Para o campo vip, converta o valor de 1 para "Yes" e 0 para "No".

   Aqui está o código para formatar os dados:

   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 ? "Man" : "Woman";
            item.vip = item.vip ? "Yes" : "No";
         });
      });
   }

5. Após formatar os dados, atribua o array resData à propriedade tableData:

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

Agora, os dados estão formatados e atribuídos à propriedade tableData, que será usada para renderizar a tabela no HTML.

O efeito final é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.