نحوه پیاده سازی صفحه بندی در یک برنامه Vue

با این کتابخانه مفید به مفاهیم اصلی صفحه بندی تسلط پیدا کنید.

صفحه بندی به شما امکان می دهد مجموعه داده های بزرگ را به قطعات کوچکتر و قابل مدیریت تقسیم کنید. صفحه بندی، پیمایش مجموعه داده های بزرگ و یافتن اطلاعات مورد نظر را برای کاربران آسان تر می کند.

با این نمونه پروژه با تکنیک و نحوه پیاده سازی آن در Vue آشنا شوید.

شروع به کار با Vue-Awesome-Paginate

Vue-wesome-paginate یک کتابخانه صفحه بندی قدرتمند و سبک Vue است که فرآیند ایجاد نمایشگرهای داده صفحه بندی شده را ساده می کند. ویژگی های جامعی از جمله اجزای قابل تنظیم، API های با کاربرد آسان و پشتیبانی از سناریوهای صفحه بندی مختلف را ارائه می دهد.

برای شروع استفاده از vue-wesome-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-wesome-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>

این بلوک کد از Vue Composition API برای ساخت یک کامپوننت استفاده می کند. این مؤلفه از Axios برای واکشی نظرات از API JSONPlaceholder قبل از اینکه Vue آن را نصب کند (قلاب onBeforeMount) استفاده می کند. سپس نظرات را در آرایه نظرات، با استفاده از الگو برای نمایش آنها یا یک پیام در حال بارگذاری تا زمانی که نظرات در دسترس باشد، ذخیره می کند.

ادغام Vue-Awesome-Paginate در برنامه Vue شما

اکنون یک برنامه ساده Vue دارید که داده ها را از یک API واکشی می کند، می توانید آن را تغییر دهید تا بسته vue-wesome-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 برای رندر کردن لیست ها در این بخش الگو به آرایه نمایش داده شده Comments اشاره می کند. این الگو مولفه vue-wesome-paginate را اضافه می کند، که قطعه بالا به آن props می دهد. می‌توانید در مورد این موارد و وسایل اضافی در اسناد رسمی بسته در GitHub اطلاعات بیشتری کسب کنید.

پس از استایل کردن برنامه خود، باید صفحه ای به شکل زیر دریافت کنید:

بر روی هر دکمه شماره گذاری شده کلیک کنید، مجموعه متفاوتی از نظرات را مشاهده خواهید کرد.

برای مرور بهتر داده ها از صفحه بندی یا اسکرول بی نهایت استفاده کنید

اکنون یک برنامه بسیار اساسی Vue دارید که نحوه صفحه بندی کارآمد داده ها را نشان می دهد. همچنین می توانید از اسکرول بی نهایت برای مدیریت مجموعه داده های طولانی در برنامه خود استفاده کنید. قبل از انتخاب، مطمئن شوید که نیازهای برنامه خود را در نظر گرفته اید، زیرا صفحه بندی و پیمایش بی نهایت مزایا و معایب دارد.

منبع مقاله