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

HTMLHTMLBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

Предпросмотр домашней страницы Vuejs

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-445739{{"Динамизация данных домашней страницы"}} html/head_elems -.-> lab-445739{{"Динамизация данных домашней страницы"}} html/layout -.-> lab-445739{{"Динамизация данных домашней страницы"}} html/multimedia -.-> lab-445739{{"Динамизация данных домашней страницы"}} html/inter_elems -.-> lab-445739{{"Динамизация данных домашней страницы"}} end

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

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

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

├── 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";
  1. В функции data() определите свойство dataList для хранения списка данных:
data() {
  return {
    dataList: []
  };
}
  1. В хуке жизненного цикла created() вызовите метод getList() для получения списка данных:
created() {
  this.getList();
}
  1. Реализуйте метод getList() для извлечения данных из файла public/static/data/list.json:
methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}
  1. Полный код внутри <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>
  1. В шаблоне используйте директиву 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, чтобы улучшить свои навыки.