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

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.

1

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part4.git

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

1

cd PythonFlaskMySQLApp_Part4

2

python app.py

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.

1

USE `BucketList`;

2

DROP procedure IF EXISTS `sp_GetWishByUser`;

3

4

DELIMITER $$

5

USE `BucketList`$$

6

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishByUser`(

7

IN p_user_id bigint,

8

IN p_limit int,

9

IN p_offset int

10

)

11

BEGIN

12

    SET @t1 = CONCAT( 'select * from tbl_wish where wish_user_id = ', p_user_id, ' order by wish_date desc limit ',p_limit,' offset ',p_offset);

13

	PREPARE stmt FROM @t1;

14

	EXECUTE stmt;

15

	DEALLOCATE PREPARE stmt1;

16

END$$

17

18

DELIMITER ;

19

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.

1

# Default setting

2

pageLimit = 2

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

1

@app.route('/getWish',methods=['POST'])

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.

1

 _limit = pageLimit

2

 _offset = request.form['offset']

3

4

5

con = mysql.connect()

6

cursor = con.cursor()

7

cursor.callproc('sp_GetWishByUser',(_user,_limit,_offset))

8

wishes = cursor.fetchall()

9

10

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

1

function GetWishes() {

2

    $.ajax({

3

        url: '/getWish',

4

        type: 'POST',

5

        data: {

6

            offset: 0

7

        },

8

        success: function(res) {

9

10

            var wishObj = JSON.parse(res);

11

            $('#ulist').empty();

12

            $('#listTemplate').tmpl(wishObj).appendTo('#ulist');

13

14

        },

15

        error: function(error) {

16

            console.log(error);

17

        }

18

    });

19

}

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.

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.

1

<nav>

2

    <ul class="pagination">

3

        <li>

4

            <a href="#" aria-label="Previous">

5

                <span aria-hidden="true">&laquo;</span>

6

            </a>

7

        </li>

8

        <li><a href="#">1</a>

9

        </li>

10

        <li><a href="#">2</a>

11

        </li>

12

        <li><a href="#">3</a>

13

        </li>

14

        <li><a href="#">4</a>

15

        </li>

16

        <li><a href="#">5</a>

17

        </li>

18

        <li>

19

            <a href="#" aria-label="Next">

20

                <span aria-hidden="true">&raquo;</span>

21

            </a>

22

        </li>

23

    </ul>

24

</nav>

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

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.

1

USE `BucketList`;

2

DROP procedure IF EXISTS `sp_GetWishByUser`;

3

4

DELIMITER $$

5

USE `BucketList`$$

6

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishByUser`(

7

IN p_user_id bigint,

8

IN p_limit int,

9

IN p_offset int,

10

out p_total bigint

11

)

12

BEGIN

13

14

	select count(*) into p_total from tbl_wish where wish_user_id = p_user_id;

15

16

	SET @t1 = CONCAT( 'select * from tbl_wish where wish_user_id = ', p_user_id, ' order by wish_date desc limit ',p_limit,' offset ',p_offset);

17

	PREPARE stmt FROM @t1;

18

	EXECUTE stmt;

19

	DEALLOCATE PREPARE stmt;

20

END$$

21

22

DELIMITER ;

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.

1

 _limit = pageLimit

2

 _offset = request.form['offset']

3

 _total_records = 0

4

5

6

con = mysql.connect()

7

cursor = con.cursor()

8

cursor.callproc('sp_GetWishByUser',(_user,_limit,_offset,_total_records))

9

wishes = cursor.fetchall()

10

11

cursor.close()

12

13

cursor = con.cursor()

14

cursor.execute('SELECT @_sp_GetWishByUser_3');

15

16

outParam = cursor.fetchall()

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.

1

response = []

2

wishes_dict = []

3

4

for wish in wishes:

5

    wish_dict = {

6

        'Id': wish[0],

7

        'Title': wish[1],

8

        'Description': wish[2],

9

        'Date': wish[4]}

10

    wishes_dict.append(wish_dict)

11

12

response.append(wishes_dict)

13

response.append({'total':outParam[0][0]}) 

14

15

return json.dumps(response)

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

1

console.log(res);

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:

1

[

2

    [{

3

        "Date": "Sun, 15 Feb 2015 15:10:45 GMT",

4

        "Description": "wwe",

5

        "Id": 5,

6

        "Title": "wwe"

7

    }, {

8

        "Date": "Sat, 24 Jan 2015 00:13:50 GMT",

9

        "Description": "Travel to Spain",

10

        "Id": 4,

11

        "Title": "Spain"

12

    }], {

13

        "total": 5

14

    }

15

]

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

1

var total = wishObj[1]['total'];

2

var pageCount = total/itemsPerPage;

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.

1

var pageRem = total%itemsPerPage;

2

if(pageRem !=0 ){

3

	pageCount = Math.floor(pageCount)+1;

4

}

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.

1

<nav>

2

    <ul class="pagination">

3

        // li we'll create dynamically

4

    </ul>

5

</nav>

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

1

var prevLink = $('<li/>').append($('<a/>').attr({

2

        'href': '#'

3

    }, {

4

        'aria-label': 'Previous'

5

    })

6

    .append($('<span/>').attr('aria-hidden', 'true').html('&laquo;')));

7

8

$('.pagination').append(prevLink);

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.

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

1

for (var i = 0; i < pageCount; i++) {

2

    var page = $('<li/>').append($('<a/>').attr('href', '#').text(i + 1));

3

    $('.pagination').append(page);

4

}

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

1

var nextLink = $('<li/>').append($('<a/>').attr({

2

        'href': '#'

3

    }, {

4

        'aria-label': 'Next'

5

    })

6

    .append($('<span/>').attr('aria-hidden', 'true').html('&raquo;')));

7

8

$('.pagination').append(nextLink);

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.

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.

1

for (var i = 0; i < pageCount; i++) {

2

3

    var aPage = $('<a/>').attr('href', '#').text(i + 1);

4

5

    $(aPage).click(function() {

6

7

    });

8

9

    var page = $('<li/>').append(aPage);

10

    $('.pagination').append(page);

11

12

}

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.

1

var offset = 0;

Rufen Sie die GetWishes-Funktion innerhalb des Klickereignisaufrufs auf.

1

GetWishes(offset);

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

1

offset = offset + 2;

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.

1

var offset = 0;

2

3

for (var i = 0; i < pageCount; i++) {

4

5

    var aPage = $('<a/>').attr('href', '#').text(i + 1);

6

7

    $(aPage).click(function(offset) {

8

        return function() {

9

            GetWishes(offset);

10

        }

11

    }(offset));

12

13

    var page = $('<li/>').append(aPage);

14

    $('.pagination').append(page);

15

    offset = offset + itemsPerPage;

16

17

}

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.

1

<input type="hidden" id="hdnStart" value="1" />

2

<input type="hidden" id="hdnEnd" value="5"/>

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.

1

$('.pagination').empty();

2

3

var pageStart = $('#hdnStart').val();

4

var pageEnd = $('#hdnEnd').val();

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.

1

if (pageStart > 5) {

2

    var aPrev = $('<a/>').attr({

3

            'href': '#'

4

        }, {

5

            'aria-label': 'Previous'

6

        })

7

        .append($('<span/>').attr('aria-hidden', 'true').html('&laquo;'));

8

9

    $(aPrev).click(function() {

10

        // Previous button logic

11

    });

12

13

    var prevLink = $('<li/>').append(aPrev);

14

    $('.pagination').append(prevLink);

15

}

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.

1

$(aPrev).click(function() {

2

    $('#hdnStart').val(Number(pageStart) - 5);

3

    $('#hdnEnd').val(Number(pageStart) - 5 + 4);

4

    GetWishes(Number(pageStart) - 5);

5

});

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

1

for (var i = Number(pageStart); i <= Number(pageEnd); i++) {

2

3

    if (i > pageCount) {

4

        break;

5

    }

6

7

8

    var aPage = $('<a/>').attr('href', '#').text(i);

9

10

    // Attach the page click event

11

    $(aPage).click(function(i) {

12

        return function() {

13

            GetWishes(i);

14

        }

15

    }(i));

16

17

    var page = $('<li/>').append(aPage);

18

19

    // Attach the active page class

20

    if ((_page) == i) {

21

        $(page).attr('class', 'active');

22

    }

23

24

    $('.pagination').append(page);

25

26

27

}

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

1

if ((Number(pageStart) + 5) <= pageCount) {

2

    var nextLink = $('<li/>').append($('<a/>').attr({

3

            'href': '#'

4

        }, {

5

            'aria-label': 'Next'

6

        })

7

        .append($('<span/>').attr('aria-hidden', 'true').html('&raquo;').click(function() {

8

            $('#hdnStart').val(Number(pageStart) + 5);

9

            $('#hdnEnd').val(Number(pageStart) + 5 + 4);

10

            GetWishes(Number(pageStart) + 5);

11

12

        })));

13

    $('.pagination').append(nextLink);

14

}

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.

1

function GetWishes(_page) {

2

3

    var _offset = (_page - 1) * 2;

4

5

    $.ajax({

6

        url: '/getWish',

7

        type: 'POST',

8

        data: {

9

            offset: _offset

10

        },

11

        success: function(res) {

12

13

            var itemsPerPage = 2;

14

15

            var wishObj = JSON.parse(res);

16

17

            $('#ulist').empty();

18

            $('#listTemplate').tmpl(wishObj[0]).appendTo('#ulist');

19

20

            var total = wishObj[1]['total'];

21

            var pageCount = total / itemsPerPage;

22

            var pageRem = total % itemsPerPage;

23

            if (pageRem != 0) {

24

                pageCount = Math.floor(pageCount) + 1;

25

            }

26

27

28

            $('.pagination').empty();

29

30

            var pageStart = $('#hdnStart').val();

31

            var pageEnd = $('#hdnEnd').val();

32

33

34

35

36

            if (pageStart > 5) {

37

                var aPrev = $('<a/>').attr({

38

                        'href': '#'

39

                    }, {

40

                        'aria-label': 'Previous'

41

                    })

42

                    .append($('<span/>').attr('aria-hidden', 'true').html('&laquo;'));

43

44

                $(aPrev).click(function() {

45

                    $('#hdnStart').val(Number(pageStart) - 5);

46

                    $('#hdnEnd').val(Number(pageStart) - 5 + 4);

47

                    GetWishes(Number(pageStart) - 5);

48

                });

49

50

                var prevLink = $('<li/>').append(aPrev);

51

                $('.pagination').append(prevLink);

52

            }

53

54

55

56

            for (var i = Number(pageStart); i <= Number(pageEnd); i++) {

57

58

                if (i > pageCount) {

59

                    break;

60

                }

61

62

63

                var aPage = $('<a/>').attr('href', '#').text(i);

64

65

                $(aPage).click(function(i) {

66

                    return function() {

67

                        GetWishes(i);

68

                    }

69

                }(i));

70

                var page = $('<li/>').append(aPage);

71

72

                if ((_page) == i) {

73

                    $(page).attr('class', 'active');

74

                }

75

76

                $('.pagination').append(page);

77

78

79

            }

80

            if ((Number(pageStart) + 5) <= pageCount) {

81

                var nextLink = $('<li/>').append($('<a/>').attr({

82

                        'href': '#'

83

                    }, {

84

                        'aria-label': 'Next'

85

                    })

86

                    .append($('<span/>').attr('aria-hidden', 'true').html('&raquo;').click(function() {

87

                        $('#hdnStart').val(Number(pageStart) + 5);

88

                        $('#hdnEnd').val(Number(pageStart) + 5 + 4);

89

                        GetWishes(Number(pageStart) + 5);

90

91

                    })));

92

                $('.pagination').append(nextLink);

93

            }

94

95

96

97

98

        },

99

        error: function(error) {

100

            console.log(error);

101

        }

102

    });

103

}

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!