Dinamização de Dados da Página Inicial

Introdução

Neste projeto, você aprenderá como exibir dinamicamente os dados da página inicial usando Vue.js. Este projeto foi projetado para ajudá-lo a entender o processo de obtenção de dados de um arquivo JSON e renderizá-los em um componente Vue.js.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como solicitar os dados da lista de posts da página inicial via Axios e vinculá-los ao componente List.vue.
• Como implementar o estilo de layout e o efeito da página inicial para corresponder ao design fornecido.

🏆 Conquistas

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

• Usar Axios para obter dados de um arquivo JSON.
• Vincular os dados obtidos a um componente Vue.js e renderizá-los no template.
• Estilizar os componentes para corresponder a um design específico.
• Integrar diferentes componentes Vue.js para criar uma página inicial completa.

Configurar a Estrutura do Projeto

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

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

├── 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

Dentre eles:

• components/List.vue é o componente da lista de artigos a ser adicionado para este desafio.
• public/static/data/list.json é o arquivo de dados para obter a lista de artigos.
• public/static/images é o arquivo de imagem usado para a lista de artigos.

Em seguida, baixe as dependências usando o comando npm install no terminal, aguarde a conclusão do download das dependências e, em seguida, inicie o projeto usando o comando npm run serve.

Após o projeto iniciar com sucesso, clique em "Web 8080" para visualizá-lo em seu navegador. O efeito de execução da página é mostrado na imagem a seguir.

Conclusão da Função de Exibição da Lista

Nesta etapa, você aprenderá como solicitar os dados da lista de posts da página inicial via axios e vinculá-los ao componente List.vue.

1. Abra o arquivo List.vue localizado na pasta src/components.
2. Importe a biblioteca axios em <script>:

// TODO
import axios from "axios";

3. Na função data(), defina uma propriedade dataList para armazenar os dados da lista:

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

4. No hook de ciclo de vida created(), chame o método getList() para obter os dados da lista:

created() {
  this.getList();
}

5. Implemente o método getList() para obter os dados do arquivo public/static/data/list.json:

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

6. O código completo dentro de <script> é o seguinte:

<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. No template, use a diretiva v-for para renderizar os itens da 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>

Esta etapa garante que os dados da lista de posts da página inicial sejam obtidos do arquivo public/static/data/list.json e vinculados ao componente List.vue.

Seguindo estas etapas, você concluiu a dinamização dos dados da página inicial, incluindo a obtenção dos dados do arquivo public/static/data/list.json e a renderização dos itens da lista no layout desejado.

O efeito concluído é o seguinte:

Resumo

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