Пагинацията ви позволява да разделяте големи набори от данни на по-малки, по-управляеми парчета. Странирането улеснява потребителите да навигират в големи набори от данни и да намират информацията, която търсят.
Първи стъпки с Vue-Awesome-Paginate
Vue-awesome-paginate е мощна и лека библиотека за пагиниране на Vue, която опростява процеса на създаване на показване на данни с пагиниране. Той предоставя изчерпателни функции, включително адаптивни компоненти, лесни за използване API и поддръжка за различни сценарии за страниране.
За да започнете да използвате vue-awesome-paginate, инсталирайте пакета, като изпълните тази терминална команда в директорията на вашия проект:
npm install vue-awesome-paginate
След това, за да конфигурирате пакета да работи във вашето приложение Vue, копирайте кода по-долу във файла src/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");
Този код импортира и регистрира пакета с метода .use() , така че можете да го използвате навсякъде във вашето приложение. Пакетът за страниране идва с CSS файл, който кодовият блок също импортира.
Изграждане на приложението Test Vue
За да илюстрирате как работи пакетът vue-awesome-paginate, ще създадете приложение Vue, което показва примерен набор от данни. Ще извличате данни от API с Axios за това приложение.
Копирайте кодовия блок по-долу във вашия файл App.vue :
<script setup>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 JSONPlaceholder</h1> <div v-if="comments.length"> <div v-for="comment in comments" class="comment"> <p>{{ comment }}</p> </div> </div> <div v-else> <p>Loading comments...</p> </div> </div></template>
Този кодов блок използва API на Vue Composition за изграждане на компонент. Компонентът използва Axios за извличане на коментари от JSONPlaceholder API, преди Vue да го монтира ( hook onBeforeMount ). След това съхранява коментарите в масива за коментари , като използва шаблона, за да ги покаже, или съобщение за зареждане, докато коментарите са налични.
Интегриране на Vue-Awesome-Paginate във вашето приложение Vue
Сега имате просто приложение Vue, което извлича данни от API, можете да го модифицирате, за да интегрирате пакета vue-awesome-paginate. Ще използвате тази функция за пагиниране, за да разделите коментарите на различни страници.
Заменете секцията за скрипт на вашия файл App.vue с този код:
<script setup>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>
Този кодов блок добавя още две реактивни препратки: perPage и currentPage . Тези препратки съхраняват съответно броя елементи за показване на страница и номера на текущата страница.
Кодът също така създава изчислена справка, наречена displayedComments . Това изчислява диапазона от коментари въз основа на стойностите на currentPage и perPage . Той връща част от масива с коментари в рамките на този диапазон, който ще групира коментарите към различни страници.
Сега заменете раздела за шаблон на вашия файл App.vue със следното:
<template> <div> <h1>Vue 3 Pagination with JSONPlaceholder</h1> <div v-if="comments.length"> <div v-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> <div v-else> <p>Loading comments...</p> </div> </div></template>
Атрибутът v-for за изобразяване на списъци в този раздел на шаблона сочи към масива displayedComments. Шаблонът добавя компонента vue-awesome-paginate, към който горният фрагмент предава реквизити.
След като оформите приложението си, трябва да получите страница, която изглежда така:
Кликнете върху всеки номериран бутон и ще видите различен набор от коментари.
Използвайте пагинация или безкрайно превъртане за по-добро сърфиране на данни
Вече имате много основно приложение Vue, което демонстрира как ефективно да пагинирате данните. Можете също така да използвате безкрайно превъртане, за да обработвате дълги набори от данни във вашето приложение. Уверете се, че обмисляте нуждите на приложението си, преди да изберете, тъй като пагинацията и безкрайното превъртане имат плюсове и минуси.