Bir Vue Uygulamasında Sayfalandırma Nasıl Uygulanır?

Sayfalandırma, büyük veri kümelerini daha küçük, daha yönetilebilir parçalara bölmenize olanak tanır. Sayfalandırma, kullanıcıların büyük veri kümelerinde gezinmesini ve aradıkları bilgiyi bulmasını kolaylaştırır.

Bu örnek projeyle teknik hakkında bilgi edinin ve Vue'da nasıl uygulanacağını öğrenin.

Vue-Awesome-Paginate'e Başlarken

Vue-harika-sayfalandırma sayfalandırılmış veri görünümleri oluşturma sürecini basitleştiren güçlü ve hafif bir Vue sayfalandırma kitaplığıdır. Özelleştirilebilir bileşenler, kullanımı kolay API'ler ve çeşitli sayfalandırma senaryoları desteği dahil olmak üzere kapsamlı özellikler sağlar.

vue-awesome-paginate'i kullanmaya başlamak için proje dizininizde bu terminal komutunu çalıştırarak paketi yükleyin:

npm install vue-awesome-paginate

Ardından paketi Vue uygulamanızda çalışacak şekilde yapılandırmak için aşağıdaki kodu kopyalayın. src/main.js dosya:

import { createApp } from"vue";
import App 





instagram viewer

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

Bu kod paketi içe aktarır ve kaydeder. .kullanmak() Bu yöntemi uygulamanızın herhangi bir yerinde kullanabilirsiniz. Sayfalandırma paketi, kod bloğunun da içe aktardığı bir CSS dosyasıyla birlikte gelir.

Test Vue Uygulamasını Oluşturma

vue-awesome-paginate paketinin nasıl çalıştığını göstermek için örnek bir veri kümesi görüntüleyen bir Vue uygulaması oluşturacaksınız. Sen olacaksın Axios ile bir API'den veri alma bu uygulama için.

Aşağıdaki kod bloğunu telefonunuza kopyalayın App.vue dosya:

<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>

Bu kod bloğu şunu kullanır: Vue Kompozisyon API'si bir bileşen oluşturmak için. Bileşen, Vue onu bağlamadan önce JSONPlaceholder API'sinden yorumları almak için Axios'u kullanır (onBeforeMount kanca). Daha sonra yorumları depolar. yorumlar dizi, bunları görüntülemek için şablonu veya yorumlar mevcut olana kadar bir yükleme mesajını kullanarak.

Vue-Awesome-Paginate'i Vue Uygulamanıza Entegre Etme

Artık bir API'den veri alan basit bir Vue uygulamanız var, bunu vue-awesome-paginate paketini entegre edecek şekilde değiştirebilirsiniz. Yorumları farklı sayfalara bölmek için bu sayfalandırma özelliğini kullanacaksınız.

Değiştir senaryo senin bölümün App.vue bu koda sahip dosya:

<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>

Bu kod bloğu iki reaktif referans daha ekler: Sayfa başına Ve geçerli sayfa. Bu referanslar sırasıyla sayfa başına görüntülenecek öğe sayısını ve geçerli sayfa numarasını saklar.

Kod aynı zamanda adında bir hesaplanmış başvuru oluşturur. görüntülenenYorumlar. Bu, yorum aralığını aşağıdakilere göre hesaplar: geçerli sayfa Ve Sayfa başına değerler. Bir dilim döndürür yorumlar Yorumları farklı sayfalara gruplayacak olan bu aralıktaki dizi.

Şimdi değiştirin şablon App.vue dosyanızın aşağıdakileri içeren bölümü:

<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-için listeleri oluşturma özelliği Bu şablon bölümünde şuna işaret edilir: görüntülenenYorumlar sıralamak. Şablon şunları ekler: vue-harika-sayfalandırma Yukarıdaki pasajın sahne malzemelerini aktardığı bileşen. Bunlar ve ek aksesuarlar hakkında daha fazla bilgiyi paketin resmi sayfasından edinebilirsiniz. GitHub'daki belgeler.

Uygulamanızı şekillendirdikten sonra şuna benzer bir sayfa almalısınız:

Her numaralı düğmeye tıkladığınızda farklı bir yorum kümesi göreceksiniz.

Daha İyi Veri Taraması için Sayfalandırmayı veya Sonsuz Kaydırma'yı kullanın

Artık verilerin nasıl verimli bir şekilde sayfalandırılacağını gösteren çok basit bir Vue uygulamanız var. Uygulamanızda uzun veri kümelerini işlemek için sonsuz kaydırmayı da kullanabilirsiniz. Sayfalandırma ve sonsuz kaydırmanın artıları ve eksileri olduğundan, seçim yapmadan önce uygulamanızın ihtiyaçlarını göz önünde bulundurduğunuzdan emin olun.