Как да внедрите пагинация в приложение Vue

Пагинацията ви позволява да разделяте големи набори от данни на по-малки, по-управляеми парчета. Странирането улеснява потребителите да навигират в големи набори от данни и да намират информацията, която търсят.

Научете за техниката и как да я приложите във Vue с този примерен проект.

Първи стъпки с Vue-Awesome-Paginate

Vue-страхотно-paginate е мощна и лека библиотека за пагиниране на Vue, която опростява процеса на създаване на дисплеи с пагинирани данни. Той предоставя изчерпателни функции, включително адаптивни компоненти, лесни за използване API и поддръжка за различни сценарии за страниране.

За да започнете да използвате vue-awesome-paginate, инсталирайте пакета, като изпълните тази терминална команда в директорията на вашия проект:

npm install vue-awesome-paginate

След това, за да конфигурирате пакета да работи във вашето приложение Vue, копирайте кода по-долу в src/main.js файл:

import { createApp } from"vue";
import





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

Този код импортира и регистрира пакета с .use() метод, така че можете да го използвате навсякъде във вашето приложение. Пакетът за страниране идва с CSS файл, който кодовият блок също импортира.

Изграждане на приложението Test 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 за извличане на коментари от JSONPlaceholder API, преди 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>

The v-за атрибут за изобразяване на списъци в този раздел на шаблона сочи към показаниКоментари масив. Шаблонът добавя vue-awesome-paginate компонент, към който фрагментът по-горе предава реквизити. Можете да научите повече за тези и допълнителни подпори в официалния пакет на пакета документация в GitHub.

След като оформите приложението си, трябва да получите страница, която изглежда така:

Кликнете върху всеки номериран бутон и ще видите различен набор от коментари.

Използвайте пагинация или безкрайно превъртане за по-добро сърфиране на данни

Вече имате много основно приложение Vue, което демонстрира как ефективно да пагинирате данните. Можете също така да използвате безкрайно превъртане, за да обработвате дълги набори от данни във вашето приложение. Уверете се, че обмисляте нуждите на приложението си, преди да изберете, тъй като пагинацията и безкрайното превъртане имат плюсове и минуси.