Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten

1. Problem

Bei großen Datenmengen in der Datenbank sollte man jeweils nur einen Teil davon abfragen, um den Server und die Seite zu entlasten. Hier verwenden wir die Paginierungskomponente von elementui und limit Anweisung von mysql , um die Paginierungsabfrage von MySQL-Daten zu implementieren.

Die folgende Abbildung stellt den grundlegendsten Paging-Stil dar:

Natürlich müssen entsprechende Events eingeführt werden, um bei Seitenwechseln die Datenbank abzufragen.

2. Lösung

2.1 Paging-Komponente

<el-pagination
        Hintergrund
        Layout = "Zurück, Pager, Weiter"
        :Seitengröße="8"
        :gesamt="gesamt"
        :current-page="Seitennummer"
        @current-change="handleCurrentChange">
</el-pagination>

data : Initialisiert die Gesamtzahl der Dateneinträge ( total ) auf 1, pageNum , d. h. die aktuelle Seitenzahl, auf die erste Seite.

2.2 Funktion zum Abrufen von Datenbankdaten: getData():

Die Parameter sind offset und limit , die verwendet werden, um Daten vom Backend anzufordern. Dies werde ich später erklären. Hier wird der Serialisierungsparameter qs verwendet. Sie können auf meinen anderen Blog verweisen: Vue + ElementUI + Viewer Nach dem Umblättern kann das Bild nicht in der Vorschau angezeigt werden. Das Problem der asynchronen Kommunikation zwischen übergeordneten und untergeordneten Komponenten von Vue erläutert die Funktion von qs.

    getData(Offset,Grenzwert){
      dies.axios.post('/php/select.php', qs.stringify({
        Versatz: Versatz,
        Grenze: Grenze,
        Typ: „Fundbüro“
      }), { Header: { 'Inhaltstyp': 'Anwendung/x-www-form-urlencoded' } }).then((res) => {
        wenn(res.data === 0){
          dies.gesamt = 0;
          diese.liste = [];
          zurückkehren;
        }
        dies.total = res.data.total
        diese.Liste = res.data.data
        dies.laden = falsch
      }).catch((err) => {
        dies.$message.error(err)
      })
    }

2.3 Die Seite wird geladen und die Daten der ersten Seite müssen angefordert werden

erstellt () {
    dies.getData(0,8);
  },

Der Seitenwechsel löst die Funktion handleCurrentChange() aus, d. h. die Seite wird umgeblättert, wobei der Parameter val die aktuelle Seitenzahl ist. Verwenden Sie den Parameter new.

Rufen Sie getData auf, um Daten auf verschiedenen Seiten abzufragen:

    handleCurrentChange(Wert){
      this.list = [] // Daten der vorherigen Seite löschen this.getData((val-1)*8,8);
    }

Unten sind die Backend-Daten: php + mysql

Jetzt gibt es 10 Datensätze in der Datentabelle:

Die vom Frontend getData angeforderte Datei select.php

Datei auswählen.php:

<?php
$servername = "lokaler Host";
$username = "Benutzername";
$password = "Passwort";
$dbname = "Datenbankname";

// Verbindung erstellen $conn = new mysqli($servername, $username, $password, $dbname);
// Verbindung prüfen
wenn ($conn->connect_error) {
    die("Verbindung fehlgeschlagen: " . $conn->connect_error);
} 

$typ = $_POST['Typ'];
//Start- und Endnummer der Front-End-Parameter abrufen
wenn ( !isset( $_POST['offset'] ) ) {
 Echo 0;
 Ausfahrt();
};
$offset = (int)$_POST['Offset'];

wenn ( !isset( $_POST['limit'] ) ) {
 Echo 0;
 Ausfahrt();
};
$limit = (int)$_POST['limit'];
//Paginierungsabfragedatenbank $sql = "SELECT * FROM posts where type='$type' order by id desc LIMIT $limit OFFSET $offset";
$Ergebnis = $conn->query($sql);

$sqlGetCount = "SELECT COUNT(*) cnt FROM posts where type='$type'";
: $rescnt = $conn->query($sqlGetCount);
$rescnt = $rescnt->fetch_assoc();
$arr = Array();
wenn ($Ergebnis->Anz.Zeilen > 0) {
 während ( $row = $result->fetch_assoc() ) {
    array_push( $arr, $row );
}
 //echo json_encode( $arr, JSON_UNESCAPED_UNICODE );
 echo json_encode(array_merge(array('Daten'=>$arr),array('total'=>(int)$rescnt['cnt'])));
 
} anders {
    Echo 0;
}
mysqli_close( $conn );
?>

Hier wird mysql limit verwendet, um jeweils nur einen Teil der Daten abzufragen, und die Parameter offset und limit werden vom Front-End übergeben.

SQL-Anweisung:

"SELECT * FROM Beiträge, bei denen Typ='$type' ist, sortiert nach ID desc LIMIT $limit OFFSET $offset"

3. Analyse

Dabei bedeutet LIMIT $limit OFFSET $offset dass $limit Datenstücke ausgehend vom Wert von $offest abgefragt werden.

Beispiel: $limit = 8, $offest = 0: bedeutet, dass die ersten 8 Daten in der Datenbank abgefragt werden, beginnend bei 0 (ohne 0, der MySQL-Index beginnt bei 0), und dass 8 Daten abgefragt werden, also 1 bis 8 Daten.
Wenn ich auf die zweite Seite klicke, wird die Funktion handleCurrentChange(） ausgelöst:

Zu diesem Zeitpunkt ist der Parameter val=2 , dann offest = 8 , limit = 8 .
Es werden die Daten 9 bis 17 abgefragt. Wenn es keine 17. Daten gibt, werden alle Daten nach den 9. Daten zurückgegeben. Wenn meine Datenbank beispielsweise 10 Datensätze enthält, werden der 9. und 10. Datensatz zurückgegeben.

Gleichzeitig gibt select.php die Gesamtzahl der Dateneinträge zurück:

SELECT COUNT(*) cnt FROM Beiträge, wobei Typ='$Typ'

Nachdem die Front-End-Seite den total erhalten hat, weist sie ihn this.total zu (gebunden an Pagination的total , das die Gesamtzahl der Datenelemente angibt). Pagination werden die Daten automatisch entsprechend page-size="8" paginiert. Wenn die vom Backend zurückgegebene Summe beispielsweise 10 beträgt, wird sie auf zwei Seiten aufgeteilt.

4. Ergebnisse

Hinweis: Ihr limit muss mit dem page-size der Pagination übereinstimmen, d. h. es muss immer nur eine Datenseite auf einmal abgefragt werden. offset ist die aktuelle Seitenzahl.

Dies ist das Ende dieses Artikels über die Implementierung von Paging-Abfragen in Vue+ElementUI – MySQL-Daten. Weitere relevante Inhalte zur Implementierung von Paging-Abfragen in Vue+ElementUI finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!