كيفية تنفيذ ترقيم الصفحات في تطبيق Vue

يتيح لك ترقيم الصفحات تقسيم مجموعات البيانات الكبيرة إلى أجزاء أصغر وأكثر قابلية للإدارة. يُسهّل ترقيم الصفحات على المستخدمين التنقل في مجموعات البيانات الكبيرة والعثور على المعلومات التي يبحثون عنها.

تعرف على هذه التقنية وكيفية تنفيذها في Vue باستخدام نموذج المشروع هذا.

الشروع في العمل مع Vue-Awesome-Paginate

Vue-awesome-paginate هي مكتبة ترقيم صفحات Vue قوية وخفيفة الوزن تعمل على تبسيط عملية إنشاء عروض البيانات المرقمة. فهو يوفر ميزات شاملة، بما في ذلك المكونات القابلة للتخصيص وواجهات برمجة التطبيقات سهلة الاستخدام ودعم سيناريوهات ترقيم الصفحات المختلفة.

للبدء في استخدام 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");

يقوم هذا الرمز باستيراد الحزمة وتسجيلها باستخدام ملف .يستخدم() الطريقة، بحيث يمكنك استخدامها في أي مكان في التطبيق الخاص بك. تأتي حزمة ترقيم الصفحات مع ملف 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>

تستخدم كتلة التعليمات البرمجية هذه واجهة برمجة تطبيقات Vue Composition لبناء مكون. يستخدم المكون Axios لجلب التعليقات من JSONPlaceholder API قبل أن يقوم Vue بتثبيته (this.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>

ال الخامس ل سمة لتقديم القوائم في قسم القالب هذا يشير إلى التعليقات المعروضة مجموعة مصفوفة. يضيف القالب vue-awesome-paginate المكون، الذي يمرر المقتطف أعلاه الدعائم إليه. يمكنك معرفة المزيد حول هذه العناصر والدعائم الإضافية في الصفحة الرسمية للحزمة الوثائق على جيثب.

بعد تصميم التطبيق الخاص بك، يجب أن تحصل على صفحة تبدو كما يلي:

انقر على كل زر مرقم، وسترى مجموعة مختلفة من التعليقات.

استخدم ترقيم الصفحات أو التمرير اللانهائي لتصفح أفضل للبيانات

لديك الآن تطبيق Vue أساسي جدًا يوضح كيفية ترقيم البيانات بكفاءة. يمكنك أيضًا استخدام التمرير اللانهائي للتعامل مع مجموعات البيانات الطويلة في تطبيقك. تأكد من مراعاة احتياجات تطبيقك قبل الاختيار، حيث إن ترقيم الصفحات والتمرير اللانهائي لهما إيجابيات وسلبيات.