Как реализовать нумерацию страниц в приложении Vue

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

Узнайте об этой технике и о том, как ее реализовать в Vue, с помощью этого примера проекта.

Начало работы с Vue-Awesome-Paginate

Vue-awesome-разбивка на страницы — это мощная и легкая библиотека разбивки на страницы Vue, которая упрощает процесс создания отображений данных с разбивкой на страницы. Он предоставляет комплексные функции, включая настраиваемые компоненты, простые в использовании API и поддержку различных сценариев нумерации страниц.

Чтобы начать использовать vue-awesome-paginate, установите пакет, выполнив эту команду терминала в каталоге вашего проекта:

npm install vue-awesome-paginate

Затем, чтобы настроить пакет для работы в вашем приложении Vue, скопируйте приведенный ниже код в файл источник/main.js файл:

import { createApp } from"vue";
import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");

Этот код импортирует и регистрирует пакет с помощью .использовать() метод, поэтому вы можете использовать его в любом месте вашего приложения. Пакет разбивки на страницы поставляется с файлом CSS, который также импортируется блоком кода.

Создание тестового приложения Vue

Чтобы проиллюстрировать, как работает пакет vue-awesome-paginate, вы создадите приложение Vue, отображающее образец набора данных. Вы будете получение данных из API с помощью Axios для этого приложения.

Скопируйте приведенный ниже блок кода в свой App.vue файл:

<scriptsetup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";
const comments = ref([]);
const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`,
 );
 return response.data.map((comment) => comment.body);
 } catch (error) {
 console.error(error);
 }
};
onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
script>
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Этот блок кода использует API композиции Vue для создания компонента. Компонент использует Axios для получения комментариев из API JSONPlaceholder до того, как Vue смонтирует его (onBeforeMount крюк). Затем он сохраняет комментарии в Комментарии массив, используя шаблон для их отображения или сообщение о загрузке, пока не станут доступны комментарии.

Интеграция Vue-Awesome-Paginate в ваше приложение Vue

Теперь у вас есть простое приложение Vue, которое извлекает данные из API. Вы можете изменить его для интеграции с пакетом vue-awesome-paginate. Вы будете использовать эту функцию нумерации страниц, чтобы разделить комментарии на разные страницы.

Заменить сценарий раздел вашего App.vue файл с этим кодом:

<scriptsetup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);
const onClickHandler = (page) => {
 console.log(page);
};
const loadComments = async () => {
 try {
 const response = await axios.get(
 `https://jsonplaceholder.typicode.com/comments`
 );
 return response.data.map(comment => comment.body);
 } catch (error) {
 console.error(error);
 }
};
onBeforeMount(async () => {
 const loadedComments = await loadComments();
 comments.value.push(...loadedComments);
 console.log(comments.value);
});
const displayedComments = computed(() => {
 const startIndex = (currentPage.value * perPage.value) - perPage.value;
 const endIndex = startIndex + perPage.value;
 return comments.value.slice(startIndex, endIndex);
});
script>

Этот блок кода добавляет еще две реактивные ссылки: на страницу и текущая страница. Эти ссылки хранят количество элементов, отображаемых на странице, и номер текущей страницы соответственно.

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

Теперь замените шаблон раздел вашего файла App.vue со следующим:

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in displayedComments"class="comment">
<p>{{ comment }}p>
div>
<vue-awesome-paginate
 :total-items="comments.length"
 :items-per-page="perPage"
 :max-pages-shown="5"
 v-model="currentPage"
 :onclick="onClickHandler"
 />
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

v-для атрибут для рендеринга списков в этом разделе шаблона указывает на отображаютсяКомментарии множество. В шаблон добавляется vue-awesome-разбивка на страницы компонент, которому приведенный выше фрагмент передает реквизиты. Подробнее об этих и дополнительных реквизитах вы можете узнать в официальном сообщении пакета. документация на GitHub.

После стилизации вашего приложения вы должны получить страницу, которая выглядит следующим образом:

Нажмите на каждую пронумерованную кнопку, и вы увидите другой набор комментариев.

Используйте нумерацию страниц или бесконечную прокрутку для лучшего просмотра данных

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