Динамизация данных домашней страницы

Введение

В этом проекте вы научитесь динамически отображать данные домашней страницы с использованием Vue.js. Этот проект предназначен для того, чтобы помочь вам понять процесс извлечения данных из JSON-файла и их отображения в компоненте Vue.js.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Запрашивать список постов домашней страницы с помощью Axios и связывать его с компонентом List.vue.
• Реализовывать стиль и эффект макета домашней страницы, чтобы соответствовать предоставленному дизайну.

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать Axios для извлечения данных из JSON-файла.
• Связать извлеченные данные с компонентом Vue.js и отобразить их в шаблоне.
• Стилизовать компоненты, чтобы соответствовать определенному дизайну.
• Интегрировать различные компоненты Vue.js для создания полной домашней страницы.

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

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

В них:

• components/List.vue - это компонент списка статей, который нужно добавить для этого испытания.
• public/static/data/list.json - это файл с данными для получения списка статей.
• public/static/images - это файл с изображениями, используемыми для списка статей.

Далее загрузите зависимости с помощью команды npm install в терминале, подождите, пока зависимости будут загружены, а затем запустите проект с помощью команды npm run serve.

Как только проект запустится успешно, нажмите на "Web 8080", чтобы просмотреть его в браузере. Эффект работы страницы показан на следующем изображении.

Завершение функции отображения списка

В этом шаге вы научитесь запрашивать данные списка постов домашней страницы с помощью axios и связывать их с компонентом List.vue.

1. Откройте файл List.vue, расположенный в папке src/components.
2. Импортируйте библиотеку axios в <script>:

// TODO
import axios from "axios";

3. В функции data() определите свойство dataList для хранения списка данных:

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

4. В хуке жизненного цикла created() вызовите метод getList() для получения списка данных:

created() {
  this.getList();
}

5. Реализуйте метод getList() для извлечения данных из файла public/static/data/list.json:

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

6. Полный код внутри <script> выглядит так:

<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. В шаблоне используйте директиву v-for для отображения элементов списка:

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

В этом шаге обеспечивается получение данных списка постов домашней страницы из файла public/static/data/list.json и связывание их с компонентом List.vue.

Следуя этим шагам, вы завершили динамизацию данных домашней страницы, включая получение данных из файла public/static/data/list.json и отображение элементов списка в требуемом макете.

Полученный эффект выглядит так:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.