Advertisement
  1. Code
  2. Python

Erstellen einer Web-App von Grund auf mit Python Flask und MySQL: Teil 5

by
Read Time:11 minsLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 4
Creating a Web App From Scratch Using Python Flask and MySQL: Part 6

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Im vorherigen Teil dieser Serie haben wir gesehen, wie die Funktion zum Edit und Delete von Wünschen für unsere Bucket List-Anwendung implementiert wird. In diesem Teil implementieren wir die Paging-Funktionalität für unsere Benutzer-Home-Liste.

Einstieg

Beginnen wir mit dem Klonen des vorherigen Teils des Tutorials von GitHub.

Navigieren Sie nach dem Klonen des Quellcodes zum Projektverzeichnis und starten Sie den Webserver.

Zeigen Sie mit Ihrem Browser auf http://localhost:5002/, und die Anwendung sollte ausgeführt werden.

Paginierung implementieren

Wenn die Liste der Wünsche auf der Benutzerhomepage zunimmt, wird sie auf der Seite nach unten gescrollt. Daher ist es wichtig, die Paginierung zu implementieren. Wir beschränken die Anzahl der auf einer Seite angezeigten Elemente auf eine bestimmte Anzahl.

Ändern Sie das Verfahren zum Abrufen von Wünschen

Zunächst ändern wir die Prozedur sp_GetWishByUser, um Ergebnisse basierend auf einem limit und einem offset zurückzugeben. Dieses Mal erstellen wir unsere Anweisung für gespeicherte Prozeduren dynamisch, um die Ergebnismenge basierend auf dem Grenzwert und dem Versatzwert zurückzugeben. Hier ist die modifizierte gespeicherte Prozedur sp_GetWishByUser MySQL.

Wie in der oben gespeicherten Prozedur zu sehen ist, haben wir unsere dynamische SQL-Abfrage erstellt und ausgeführt, um die Wunschliste basierend auf den offset- und limit-Parametern abzurufen.

Hinzufügen einer Paginierung zur Benutzeroberfläche

Definieren wir zunächst einige Standardeinstellungen. Fügen Sie in app.py eine Variable für das Seitenlimit hinzu.

Lassen Sie die getWish-Python-Methode POST-Anforderungen akzeptieren.

Lesen Sie den offset und das limit in der getWish-Methode und geben Sie ihn weiter, während Sie die gespeicherte MySQL-Prozedur sp_GetWishByUser aufrufen.

Ändern Sie die GetWishes-JavaScript-Funktion in userHome.html, um sie zu einer POST-Anforderung zu machen, und übergeben Sie den offset-Wert.

Speichern Sie alle Änderungen und starten Sie den Server neu. Melden Sie sich mit einer gültigen E-Mail-Adresse und einem gültigen Passwort an, und es sollten nur zwei Datensätze auf dem Bildschirm angezeigt werden.

User Home with Limited recordsUser Home with Limited recordsUser Home with Limited records

Der Datenbankteil funktioniert also gut. Als Nächstes müssen wir der Benutzerhomepage die Paginierungs-Benutzeroberfläche hinzufügen, damit der Benutzer über die Daten navigieren kann.

Wir werden die Bootstrap-Paginierungskomponente verwenden. Öffnen Sie userHome.html und fügen Sie nach dem #ulist UL den folgenden HTML-Code hinzu.

Speichern Sie die Änderungen und starten Sie den Server neu. Nach erfolgreicher Anmeldung sollten Sie die Paginierung unter der Wunschliste sehen können.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

Paginierung dynamisieren

Die obige Paginierung ist, wie unsere Paginierung aussehen wird. Damit es jedoch funktioniert, müssen wir unsere Paginierung dynamisch basierend auf der Anzahl der Datensätze in der Datenbank erstellen.

Um unsere Paginierung zu erstellen, benötigen wir die Gesamtzahl der in der Datenbank verfügbaren Datensätze. Ändern wir also die gespeicherte MySQL-Prozedur sp_GetWishByUser, um die Gesamtzahl der als out-Parameter verfügbaren Datensätze zurückzugeben.

Wie in der oben modifizierten gespeicherten Prozedur zu sehen ist, haben wir einen neuen Ausgabeparameter namens p_total hinzugefügt und die Gesamtzahl der Wünsche basierend auf der Benutzer-ID ausgewählt.

Ändern Sie auch die getWish-Python-Methode, um einen Ausgabeparameter zu übergeben.

Wie Sie im obigen Code sehen können, schließen wir nach dem Aufrufen der gespeicherten Prozedur den Cursor und öffnen einen neuen Cursor, um den zurückgegebenen Parameter auszuwählen.

Zuvor haben wir eine Liste mit Wünschen aus der Python-Methode zurückgegeben. Jetzt müssen wir auch die Gesamtzahl der Datensätze in den zurückgegebenen JSON aufnehmen. Also machen wir das Wunschliste-Wörterbuch zu einer anderen Liste und fügen dann die Wunschliste und die Anzahl der Datensätze zur Hauptliste hinzu. Hier ist der geänderte Code der getWish-Python-Methode.

Fügen Sie in der JavaScript-Funktion GetWishes innerhalb des Erfolgsrückrufs ein Konsolenprotokoll hinzu.

Speichern Sie alle oben genannten Änderungen und starten Sie den Server neu. Melden Sie sich mit einer gültigen E-Mail-Adresse und einem gültigen Kennwort an und überprüfen Sie auf der Benutzerhomepage die Browserkonsole. Sie sollten in der Lage sein, eine ähnliche Antwort wie die unten gezeigte zu sehen:

Anhand der Gesamtzahl der Antworten können wir die Gesamtzahl der Seiten ermitteln.

Wenn Sie die Gesamtzahl der Artikel von der itemsPerPage teilen, erhalten Sie die Anzahl der erforderlichen Seiten. Dies gilt jedoch nur, wenn die Summe ein Vielfaches von itemsPerPage ist. Wenn dies nicht der Fall ist, müssen wir dies überprüfen und die Seitenzahl entsprechend behandeln.

Das gibt uns also die richtige Seitenzahl.

Da wir nun die Gesamtzahl der Seiten haben, erstellen wir den Paginierungs-HTML-Code dynamisch. Entfernen Sie das LI-Element aus dem zuvor hinzugefügten Paginierungs-HTML.

Lassen Sie uns im GetWishes-Erfolgsrückruf den vorherigen Link dynamisch mit jQuery erstellen.

Im obigen Code haben wir gerade den vorherigen Schaltflächenlink erstellt und ihn an die Paginierungs-UL angehängt.

Speichern Sie die obigen Änderungen und starten Sie den Server neu. Bei erfolgreicher Anmeldung sollte der vorherige Link unter der Liste angezeigt werden.

Previous link in the PaginationPrevious link in the PaginationPrevious link in the Pagination

In ähnlicher Weise fügen wir die Seiten in der Paginierung basierend auf der Seitenzahl hinzu.

Fügen wir auch den Link Weiter hinzu, nachdem der Seitenlink hinzugefügt wurde.

Speichern Sie die Änderungen und starten Sie den Server neu. Melden Sie sich mit einer gültigen E-Mail-Adresse und einem gültigen Kennwort an. Sobald Sie sich auf der Benutzerhomepage befinden, sollte die Paginierung angezeigt werden.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

Anhängen eines Klickereignisses an eine Seitenzahl

Jetzt kommt die Hauptlogik, die unsere Paginierung funktionsfähig macht. Wir fügen jedem Seitenindex einen Klickereignisaufruf hinzu, um die GetWishes-JavaScript-Funktion aufzurufen. Fügen Sie dem Ankerelement, das die Seitenzahl anzeigt, zunächst ein Klickereignis hinzu.

Also haben wir einfach ein Onclick-Ereignis an den Seitenanker angehängt. Bei jedem Klick rufen wir die GetWishes-Funktion auf und übergeben den offset. Deklarieren Sie also den offset außerhalb der for-Schleife.

Rufen Sie die GetWishes-Funktion innerhalb des Klickereignisaufrufs auf.

Erhöhen Sie den offset auch basierend auf der Anzahl der angezeigten Datensätze.

Aber jedes Mal, wenn die GetWishes-Funktion aufgerufen wird, ist der Wert des offset immer der letzte Satz. Daher verwenden wir JavaScript-Verschlüsse, um den korrekten Offset an die GetWishes-Funktion zu übergeben.

Speichern Sie alle oben genannten Änderungen und starten Sie den Server neu. Melden Sie sich mit gültigen Anmeldeinformationen an und versuchen Sie auf der Benutzerhomepage, auf die Seiten in der Paginierungs-UL zu klicken.

Als nächstes implementieren wir die Links der vorherigen und nächsten Seite. Es mag etwas kompliziert erscheinen, also lassen Sie es mich ein wenig erklären, bevor wir mit der Implementierung beginnen.

Wir werden jeweils fünf Seiten anzeigen. Über den nächsten und vorherigen Link kann der Benutzer zu den nächsten fünf bzw. vorherigen fünf Seiten navigieren. Wir speichern die Werte der Startseite und der Endseite und aktualisieren sie sowohl beim nächsten als auch beim vorherigen Klicken auf die Schaltfläche. Beginnen wir also damit, der Seite userHome.html zwei versteckte Felder hinzuzufügen.

Fügen Sie im GetWishes-Erfolgsrückruf, nachdem wir die .pagination UL geleert haben, die folgende Codezeile hinzu, um die neueste Startseite und Endseite zu erhalten.

Bei der Anzeige der Seiten 1 bis 5 wird kein vorheriger Schaltflächenlink angezeigt. Wenn die angezeigten Seiten größer als 5 sind, wird der vorherige Schaltflächenlink angezeigt.

Wenn der Benutzer auf die vorherige Schaltfläche klickt, setzen wir die Werte hdnStart und hdnEnd zurück und rufen die JavaScript-Funktion GetWishes auf.

Als Nächstes werden wir basierend auf der Startseite und der Endseite die Seitenlinks schleifen und erstellen und die .pagination UL anhängen.

Durch Vergleichen der Gesamtseitenzahl und des Seitenstartwerts entscheiden wir über die Anzeige des nächsten Schaltflächenlinks.

Wie im obigen Code zu sehen, setzen wir beim nächsten Klicken auf die Schaltflächen die Werte für die Schaltflächen hdnStart und hdnEnd zurück und rufen die JavaScript-Funktion GetWishes auf.

Hier ist also die letzte GetWishes-JavaScript-Funktion.

Speichern Sie alle oben genannten Änderungen und starten Sie den Server neu. Melden Sie sich mit einer gültigen E-Mail-Adresse und einem gültigen Passwort an. Sie sollten in der Lage sein, die voll funktionsfähige Paginierung für die Benutzerwunschliste zu sehen.

Abschluss

In diesem Teil der Serie haben wir die Paginierungsfunktion für die Wunschliste auf der Benutzerhomepage implementiert. Wir haben gesehen, wie Daten mit einer gespeicherten MySQL-Prozedur abgerufen und mit diesen Daten, jQuery und Bootstrap, eine Paginierung erstellt werden.

Im nächsten Teil dieser Tutorial-Reihe werden wir die Funktion zum Hochladen von Dateien in unsere Anwendung implementieren.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.

Teilen Sie uns Ihre Meinung in den Kommentaren unten mit!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.