Список продуктов с переключением макета

Введение

В этом проекте вы научитесь создавать адаптивный макет списка продуктов с функцией переключения. Эта функция позволяет пользователям легко переключаться между сетевым и списковым видами элементов продукта.

👀 Превью

🎯 Задачи

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

• настраивать структуру проекта и понимать назначение каждого файла и папки;
• получать данные из JSON-файла и заполнять список продуктов;
• реализовывать функцию переключения макета с использованием Vue.js;
• условно отображать сетевой и списковые макеты в зависимости от выбранного вида.

🏆 Достижения

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

• эффективно структурировать проект на Vue.js;
• использовать Axios для получения данных из JSON-файла;
• использовать директивы Vue.js, такие как v-if и v-else, для условного отображения содержимого;
• обрабатывать взаимодействия пользователя и соответствующим образом обновлять интерфейс.

Настроить структуру проекта

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

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

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

2. Изучите назначение каждой папки и файла:

   • css: Эта папка предназначена для файлов стилей.
   • images: Эта папка предназначена для изображений.
   • js/vue.js: Это файл Vue 2.x.
   • js/axios.min.js: Это файл Axios.
   • goodsList.json: Это данные, необходимые для запроса.
   • index.html: Здесь содержится макет страницы и логика.

3. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

4. Откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Реализовать получение данных

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

1. В файле index.html найдите тег <script> внизу файла.
2. Внутри тега <script> создайте новую экземпляр Vue с использованием new Vue().
3. В опции data экземпляра Vue добавьте свойство goodsList и инициализируйте его как пустой массив.
4. В хуке mounted экземпляра Vue используйте Axios для получения данных из файла goodsList.json.
5. Обновите свойство данных goodsList полученными данными.

Ваш код должен выглядеть примерно так:

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

Реализовать переключение макета

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

1. В файле index.html найдите элемент <div class="bar">.
2. Внутри этого элемента добавьте два элемента <a> с именами классов grid-icon и list-icon соответственно.

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

3. Создайте свойство данных changeBar в экземпляре Vue, чтобы отслеживать текущий макет, установив значение по умолчанию равным 0, то есть по умолчанию используется сетевой макет.

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    //...
  }
});

4. Привяжите событие @click к каждому элементу <a>. Когда на элемент grid-icon кликают, установите changeBar равным 0 и добавьте класс active к элементу grid-icon. Удалите класс active из элемента list-icon.

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!--... -->
</div>

5. Привяжите событие @click к каждому элементу <a>. Когда на элемент list-icon кликают, установите changeBar равным 1 и добавьте класс active к элементу list-icon. Удалите класс active из элемента grid-icon.

<div class="bar">
  <!--... -->
  <a
    class="list-icon"
    :class="changeBar == 1? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

6. Используйте директивы v-if и v-else, чтобы условно отобразить сетевой и списковые макеты в зависимости от значения changeBar.

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

Завершить проект

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

1. Проверьте, что данные корректно извлекаются из файла goodsList.json.
2. Убедитесь, что функция переключения макета работает как ожидается:
   • При нажатии на значок сетки макет меняется на сетевой вид, и к значку сетки добавляется класс active.
   • При нажатии на значок списка макет меняется на списковый вид, и к значку списка добавляется класс active.
3. Протестируйте проект, нажав на значки, и убедитесь, что макет меняется как ожидается.

Поздравляем! Вы завершили проект Layout Switch. Вы научились:

• настраивать структуру проекта;
• получать данные из JSON-файла;
• реализовывать функцию переключения макета с использованием Vue.js.

Резюме

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