Seitenzahlungskomponente erstellen | JavaScript-Tutorial

Einführung

In diesem Projekt lernst du, wie du eine Seitenzahlungskomponente erstellen kannst, die in Webanwendungen häufig verwendet wird. Die Seitenzahlungskomponente hilft dabei, die Abfragezeit auf der Backendseite zu reduzieren und beeinträchtigt die Leistung der Seitenrendierung nicht, wenn zu viel Daten geladen werden.

👀 Vorschau

Pagination component demo

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die ajax-Funktion implementierst, um Datenanfragen zu verarbeiten und die Daten für die aktuelle Seite und die Gesamtzahl der Seiten abzurufen.
Wie du die initEvents-Funktion implementierst, um Ereignisse an die Schaltflächen der Seitenzahlungskomponente zu binden.
Wie du die createPaginationIndexArr-Funktion implementierst, um ein Seitenzahlungsarray basierend auf den Funktionsargumenten zu generieren.
Wie du die renderPagination-Funktion implementierst, um die Zeichenfolgenvorlage für die Seitenzahlungskomponente zu generieren.
Wie du den Inhalt basierend auf der aktuellen Seite rendierst.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Eine wiederverwendbare Seitenzahlungskomponente in JavaScript zu erstellen.
Axios verwenden, um HTTP-Anfragen zu tätigen und die Antwortdaten zu verarbeiten.
Ein Seitenzahlungsarray basierend auf der aktuellen Seite, der Gesamtzahl der Seiten und der maximalen Anzahl von anzuzeigenden Seitenbuttons zu generieren.
Die Seitenzahlungskomponente und den Inhalt basierend auf der aktuellen Seite zu aktualisieren.

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── index.css
├── index.html
└── js
    ├── data.json
    ├── axios.min.js
    ├── util.js
    └── index.js

Dabei gilt:

css/index.css ist die CSS-Stildatei.
index.html ist die Hauptseite.
js/data.json ist die JSON-Datei, in der die Daten gespeichert werden.
js/axios.min.js ist die Axios-Datei.
js/index.js ist die zu vervollständigende Datei.
js/util.js ist die Datei, in der Hilfsfunktionen gespeichert werden.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Initial Effect

Die ajax-Funktion implementieren

In diesem Schritt wirst du die ajax-Funktion in der Datei js/index.js implementieren, um die Datenanfrage zu verarbeiten.

Öffne die Datei js/index.js.
Locate die ajax-Funktion und vollende die Implementierung.
Die ajax-Funktion sollte die Daten für die aktuelle Seite und die Gesamtzahl der Seiten basierend auf den Funktionsargumenten abrufen und zurückgeben.
Du kannst die bereitgestellte Axios-Bibliothek verwenden, um eine HTTP-Anfrage an die Datei ./js/data.json zu tätigen.

Hier ist die abgeschlossene ajax-Funktion:

async function ajax({
  url,
  method = "get",
  data,
  query: { currentPage, pageSize }
}) {
  // TODO: Hole die Daten der aktuellen Seite gemäß dem `query`-Objekt `currentPage, pageSize` der Funktionsparameter.
  let result = {
    data: [],
    total: 0
  };

  let resData = [];
  let res = await axios[method](url, data);
  if (res.status === 200) {
    resData = res.data.data;
    result.total = res.data.total;
  }
  result.data = resData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return result;
}

Die initEvents-Funktion implementieren

In diesem Schritt wirst du die initEvents-Funktion in der Datei js/index.js implementieren, die Ereignisse an die Schaltflächen der Seitenzahlungskomponente bindet.

Öffne die Datei js/index.js.
Locate die initEvents-Funktion und vollende die Implementierung.
Wenn die "<"-Schaltfläche geklickt wird, sollte der Wert von this.currentPage um 1 reduziert werden, mit einem Mindestwert von 1.
Wenn die ">"-Schaltfläche geklickt wird, sollte der Wert von this.currentPage um 1 erhöht werden, mit einem Maximalwert von this.totalPages.
Wenn der Wert von this.currentPage sich ändert, sollte die Seitenzahlungskomponente auf der Seite entsprechend aktualisiert werden.

Hier ist die abgeschlossene initEvents-Funktion:

initEvents() {
    this.root.querySelector("#btn-prev").addEventListener("click", () => {
      // TODO: Klickereignis für die "<"-Schaltfläche, this.currentPage - 1 beim Klick.
      if (this.currentPage > 1) {
        this.currentPage--;
        this.initPagination();
      }
    });
    this.root.querySelector("#btn-next").addEventListener("click", () => {
      // TODO: Klickereignis für die ">"-Schaltfläche, this.currentPage + 1 beim Klick.
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.initPagination();
      }
    });
    this.root.querySelector(".pager").addEventListener("click", (e) => {
      if (e.target.nodeName.toLowerCase() === "li") {
        if (this.currentPage === e.target.innerText) return;
        if (e.target.classList.contains("more")) return;
        this.currentPage = Number(e.target.innerText);
      }
      this.initPagination();
    });
  }

Die createPaginationIndexArr-Funktion implementieren

In diesem Schritt wirst du die createPaginationIndexArr-Funktion in der Datei js/util.js implementieren, die ein Seitenzahlungsarray (indexArr) basierend auf den Funktionsargumenten gemäß bestimmten Regeln generiert.

Öffne die Datei js/util.js.
Locate die createPaginationIndexArr-Funktion und vollende die Implementierung.
Die Funktion sollte das Seitenzahlungsarray (indexArr) basierend auf den übergebenen Parametern currentPage, totalPages und pagerCount generieren.
Die Regeln für die Generierung des Seitenzahlungsarrays lauten wie folgt:
- Sonderfall: totalPages <= pagerCount
- Normalfall: totalPages > pagerCount
Das generierte indexArr sollte den in der Herausforderungsbeschreibung angegebenen Beispielen entsprechen.

Hier ist die abgeschlossene createPaginationIndexArr-Funktion:

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  let indexArr = [];
  // TODO: Generiere Seitenzahlungsarray basierend auf übergebenen Parametern indexArr.
  indexArr[0] = 1;
  if (totalPages <= pagerCount) {
    for (let i = 1; i < totalPages; i++) {
      indexArr.push(i + 1);
    }
  } else {
    indexArr[pagerCount - 1] = totalPages;
    if (currentPage <= pagerCount - 2) {
      for (let i = 1; i < pagerCount - 1; i++) {
        indexArr[i] = i + 1;
      }
    } else if (currentPage <= totalPages - pagerCount + 2) {
      let j = 1;
      for (
        let i = -Math.ceil((pagerCount - 3) / 2);
        i <= Math.floor((pagerCount - 3) / 2);
        i++
      ) {
        indexArr[j++] = currentPage + i;
      }
    } else {
      let j = 1;
      for (let i = totalPages - pagerCount + 2; i < totalPages; i++) {
        indexArr[j++] = i;
      }
    }
  }

  return indexArr;
};

Die renderPagination-Funktion implementieren

In diesem Schritt wirst du die renderPagination-Funktion in der Datei js/index.js implementieren, die die Zeichenfolgenvorlage template für die Seitenzahlungskomponente basierend auf dem Array indexArr generiert.

Öffne die Datei js/index.js.
Locate die renderPagination-Funktion und vollende die Implementierung.
Die Funktion sollte die Zeichenfolgenvorlage template für die Seitenzahlungskomponente basierend auf dem Array indexArr gemäß den in der Herausforderungsbeschreibung beschriebenen Regeln generieren.
Die generierte template sollte mithilfe von this.root.innerHTML in die HTML-Struktur der Seitenzahlungskomponente eingefügt werden.

Hier ist die abgeschlossene renderPagination-Funktion:

renderPagination(indexArr) {
  let template = "";
  // TODO: Generiert eine Zeichenfolgenvorlage template für die Seitenzahlungskomponente basierend auf dem indexArr-Array.
  template = indexArr.reduce((prev, next, index) => {
    if (indexArr[index] - indexArr[index - 1] > 1) {
      prev += `<li class="number more">...</li>`;
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    } else {
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    }
    return prev;
  }, "");

  this.root.innerHTML = `
      <div class="pagination">
          <div class="btn btn-left" id="btn-prev">&lt;</div>
          <ul class="pager">${template} </ul>
          <div class="btn btn-right" id="btn-next">&gt;</div>
      </div>`;
}

Testen Sie die Seitenzahlungskomponente

In diesem Schritt wirst du das Endresultat der Seitenzahlungskomponente testen.

Speichere die Dateien js/index.js und js/util.js.
Aktualisiere die Webseite im Browser.
Überprüfe das Seitenlayout.

Glückwunsch! Du hast die Implementierung der Seitenzahlungskomponente abgeschlossen. Das Endresultat sollte wie folgt aussehen:

Bildbeschreibung

Zusammenfassung

Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.

Erstellung eines wiederverwendbaren Seitenzahlungskomponents