Share
Nella parte precedente di questa serie, abbiamo visto come implementare il modificare e Elimina desiderano funzionalità per la nostra applicazione Elenco Bucket. In questa parte implementeremo la funzionalità di paging per la nostra home list utente.
Iniziamo clonando la parte precedente del tutorial da GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part4.git
Una volta clonato il codice sorgente, accedere alla directory del progetto e avviare il server web.
cd PythonFlaskMySQLApp_Part4 python app.py
Puntare il browser su http: // localhost: 5002 / e si dovrebbe avere l'applicazione in esecuzione.
Man mano che l'elenco di desideri nella home page dell'utente aumenta, viene fatto scorrere lungo la pagina. Quindi è importante implementare l'impaginazione. Limiteremo il numero di elementi mostrati su una pagina a un determinato numero.
Inizieremo modificando il sp_GetWishByUser procedura per restituire risultati basati su a limite e compensare valore. Questa volta creeremo dinamicamente la nostra stored procedure per restituire il set di risultati in base al limite e al valore di offset. Ecco la modifica sp_GetWishByUser MySQL stored procedure.
Accentsconagua
USA 'BucketList'; Procedura DROP SE ESISTE 'sp_GetWishByUser'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int) BEGIN SET @ t1 = CONCAT ('seleziona * da tbl_wish dove wish_user_id = ', p_user_id,' order by wish_date desc limit ', p_limit,' offset ', p_offset); PREPARARE lo stmt FROM @ t1; ESEGUI stmt; DISALLOCARE PREPARARE STMT1; END $$ DELIMITER; Come visto nella procedura memorizzata sopra, abbiamo creato la nostra query SQL dinamica ed eseguita per ottenere la lista dei desideri basata su compensare e limite parametri.
Innanzitutto, definiamo alcune impostazioni predefinite. Nel app.py aggiungi una variabile per il limite della pagina.
# Default setting pageLimit = 2
Fare il getWish il metodo python accetta le richieste POST.
@ App.route ( '/ getWish', metodi = [ 'POST'])
Leggi il compensare e limite dentro il getWish metodo e passarlo mentre si chiama la stored procedure MySQL sp_GetWishByUser.
_limit = pageLimit _offset = request.form ['offset'] con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser', (_ user, _limit, _offset)) wishes = cursor.fetchall () Modifica il GetWishes Funzione JavaScript in userHome.html per fare una richiesta POST e passare il compensare valore.
function GetWishes () $ .ajax (url: '/ getWish', tipo: 'POST', data: offset: 0, success: function (res) var wishObj = JSON.parse (res); $ ( '#ulist'). empty (); $ ('# listTemplate'). tmpl (wishObj) .appendTo ('# ulist');, errore: function (errore) console.log (errore);) ; Salva tutte le modifiche e riavvia il server. Accedi utilizzando un indirizzo email e una password validi e dovresti avere solo due record visualizzati sullo schermo.
Quindi la parte del database funziona bene. Successivamente, è necessario aggiungere l'interfaccia utente di impaginazione alla home page dell'utente, che consentirà all'utente di navigare tra i dati.
Useremo il componente di impaginazione Bootstrap. Aprire userHome.html e aggiungi il seguente codice HTML dopo il #ulist UL.
Salva le modifiche e riavvia il server. Dopo aver effettuato correttamente l'accesso, dovresti essere in grado di vedere l'impaginazione sotto la lista dei desideri.
L'impaginazione di cui sopra è come apparirà la nostra impaginazione. Ma per renderlo funzionale, abbiamo bisogno di creare la nostra impaginazione in modo dinamico in base al numero di record nel database.
Per creare la nostra impaginazione, avremo bisogno del numero totale di record disponibili nel database. Quindi modifichiamo la procedura memorizzata MySQL sp_GetWishByUser per restituire il numero totale di record disponibili come parametro out.
USA 'BucketList'; Procedura DROP SE ESISTE 'sp_GetWishByUser'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int, out p_totale bigint) BEGIN seleziona count (*) in p_total da tbl_wish dove wish_user_id = p_user_id; SET @ t1 = CONCAT ('seleziona * da tbl_wish dove wish_user_id =', p_user_id, 'order by wish_date desc limit', p_limit, 'offset', p_offset); PREPARARE lo stmt FROM @ t1; ESEGUI stmt; DEALLOCARE PREPARE stmt; END $$ DELIMITER;Come visto nella procedura memorizzata modificata sopra, abbiamo aggiunto un nuovo parametro di output chiamato p_total e selezionato il conteggio totale dei desideri in base all'id utente.
Modificare anche il getWish metodo python per passare un parametro di output.
_limit = pageLimit _offset = request.form ['offset'] _total_records = 0 con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser', (_ user, _limit, _offset, _total_records)) wishes = cursor.fetchall () cursor.close () cursor = con.cursor () cursor.execute ('SELECT @ _sp_GetWishByUser_3'); outParam = cursor.fetchall () Come puoi vedere nel codice precedente, una volta richiamata la stored procedure, chiudiamo il cursore e apri un nuovo cursore per selezionare il parametro restituito.
In precedenza, stavamo restituendo una lista di desideri dal metodo Python. Ora, dobbiamo anche includere il conteggio totale dei record nel JSON restituito. Quindi inseriremo il dizionario della lista dei desideri in un'altra lista, quindi aggiungere la lista dei desideri e registrare il conteggio nell'elenco principale. Ecco il codice modificato di getWish metodo python.
response = [] wishes_dict = [] per wish in wish: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'Date': wish [4] ] wishes_dict.append (wish_dict) response.append (wishes_dict) response.append ('total': outParam [0] [0]) restituisce json.dumps (response) Nel GetWishes Funzione JavaScript, all'interno del callback di successo aggiungi un log della console.
console.log (res);
Salvare tutte le modifiche precedenti e riavviare il server. Accedi utilizzando un indirizzo email e una password validi e, quando nella home page dell'utente, controlla la console del browser. Dovresti essere in grado di vedere una risposta simile a quella mostrata di seguito:
[["Data": "Dom, 15 Feb 2015 15:10:45 GMT", "Descrizione": "wwe", "Id": 5, "Titolo": "wwe", "Data": " Sab 24 Gen 2015 00:13:50 GMT "," Descrizione ":" Viaggio in Spagna "," Id ": 4," Titolo ":" Spagna "], " totale ": 5]
Usando il conteggio totale ricevuto dalla risposta, possiamo ottenere il numero totale di pagine.
var total = wishObj [1] ['total']; var pageCount = total / itemsPerPage;
Dividere il numero totale di oggetti da oggetti per pagina conteggio ci dà il numero di pagine richieste. Ma ciò vale solo quando il totale è un multiplo di oggetti per pagina. Se questo non è il caso, dovremo controllarlo e gestire il conteggio delle pagine di conseguenza.
var pageRem = total% itemsPerPage; if (pageRem! = 0) pageCount = Math.floor (pageCount) +1;
Questo ci darà il numero corretto di pagine.
Da quando abbiamo il numero totale di pagine, creeremo l'impaginazione HTML in modo dinamico. Rimuovi il LI elemento dall'impaginazione HTML che abbiamo aggiunto in precedenza.
Nel GetWishes callback di successo, creiamo il link precedente in modo dinamico usando jQuery.
var prevLink = $ ('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':' Precedente ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' «'))); $ ( 'Impaginazione') append (prevLink).;Nel codice sopra, abbiamo appena creato il link del pulsante precedente e l'abbiamo aggiunto alla paginazione UL.
Salvare le modifiche precedenti e riavviare il server. Al momento dell'accesso riuscito dovresti essere in grado di vedere il link precedente sotto l'elenco.
Allo stesso modo, aggiungiamo le pagine nell'impaginazione in base al numero di pagine.
per (var i = 0; i < pageCount; i++) var page = $('') .Append ($ ('') .attr (' href ',' # '). text (i + 1)); $ ( 'Impaginazione') accodare (pag.); Aggiungiamo anche il collegamento Successivo dopo che il collegamento alle pagine è stato aggiunto.
var nextLink = $ ('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' »'))); $ ( 'Impaginazione') append (Nextlink).;Salva le modifiche e riavvia il server. Accedi utilizzando un indirizzo email e una password validi e una volta sulla home page utente dovresti essere in grado di vedere l'impaginazione.
Ora arriva la logica principale che renderà funzionale la nostra impaginazione. Quello che faremo è allegare una chiamata evento click su ogni indice di pagina per chiamare il GetWishes Funzione JavaScript Innanzitutto colleghiamo un evento click all'elemento anchor che visualizza il numero di pagina.
per (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). text (i + 1); $ (aPage) .click (function () ); var page = $ ('') .Append (apage); $ ( 'Impaginazione') accodare (pag.); Quindi abbiamo solo collegato un evento onclick all'ancora di pagina. Ad ogni clic chiameremo il GetWishes funzione e passare il compensare. Quindi dichiara il compensare al di fuori del ciclo for.
var offset = 0;
Chiama il GetWishes funzione all'interno della chiamata all'evento click.
GetWishes (offset);
Aumentare anche il compensare in base al numero di record visualizzati.
offset = offset + 2;
Ma ogni volta il GetWishes la funzione è chiamata, il valore di compensare sarà sempre l'ultimo set. Quindi utilizzeremo le chiusure JavaScript per passare l'offset corretto a GetWishes funzione.
var offset = 0; per (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). text (i + 1); $ (aPage) .click (function (offset) return function () GetWishes (offset); (offset)); var page = $ ('') .Append (apage); $ ( 'Impaginazione') accodare (pag.); offset = offset + itemsPerPage; Salvare tutte le modifiche precedenti e riavviare il server. Accedi utilizzando credenziali valide e una volta sulla home page utente, prova a fare clic sulle pagine nella paginazione UL.
Successivamente, implementeremo i link alle pagine precedenti e successive. Potrebbe sembrare un po 'complicato, quindi permettimi di spiegarlo un po' prima di iniziare con l'implementazione.
Visualizzeremo cinque pagine alla volta. Usando il link successivo e precedente l'utente può navigare rispettivamente alle cinque e alle cinque precedenti successive. Memorizzeremo i valori della pagina iniziale e della pagina finale e manterremo l'aggiornamento sia sul clic del pulsante successivo che su quello precedente. Quindi iniziamo aggiungendo due campi nascosti al userHome.html pagina.
Nel GetWishes callback di successo, dopo che abbiamo svuotato il .paginatura UL, aggiungi la seguente riga di codice per ottenere la pagina iniziale e la pagina finale più recenti.
$ ( 'Impaginazione') vuota ().; var pageStart = $ ('# hdnStart'). val (); var pageEnd = $ ('# hdnEnd'). val ();Nessun collegamento a pulsante precedente verrà visualizzato quando si visualizzano le pagine da 1 a 5. Se le pagine visualizzate sono maggiori di 5, verrà visualizzato il collegamento pulsante precedente.
if (pageStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':' Precedente ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' «')); $ (aPrev) .click (function () // Logica pulsante precedente); var prevLink = $ ('') .Append (aPrev); $ ( 'Impaginazione') append (prevLink).; Quando l'utente fa clic sul pulsante precedente, ripristineremo il hdnStart e hdnEnd valori e chiama il GetWishes Funzione JavaScript.
$ (aPrev) .click (function () $ ('# hdnStart'). val (Number (pageStart) - 5); $ ('# hdnEnd'). val (Number (pageStart) - 5 + 4); GetWishes (Number (pageStart) - 5););Successivamente, in base alla pagina iniziale e alla pagina finale, ciclicheremo e creeremo i collegamenti alle pagine e aggiungeremo il .paginatura UL.
per (var i = Number (pageStart); i <= Number(pageEnd); i++) if (i > pageCount) break; var aPage = $ ('') .attr (' href ',' # '). text (i); // Allega l'evento click page $ (aPage) .click (function (i) return function () GetWishes (i); (i)); var page = $ ('') .Append (apage); // Allega la classe di pagina attiva if ((_page) == i) $ (page) .attr ('class', 'active'); $ ('. pagination'). append (pagina); Confrontando il numero totale di pagine e il valore iniziale della pagina, decideremo la visualizzazione del link del pulsante successivo.
if ((Number (pageStart) + 5) <= pageCount) var nextLink = $('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' »'). click (function () $ (' # hdnStart '). val (Number (pageStart) + 5); $ (' #hdnEnd '). val (Number (pageStart) + 5 + 4); GetWishes (Number (pageStart) + 5);))); $ ( 'Impaginazione') append (Nextlink).; Come visto nel codice sopra, al prossimo clic del pulsante stiamo ripristinando il hdnStart e hdnEnd valori dei pulsanti e chiamata il GetWishes Funzione JavaScript.
Quindi ecco la finale GetWishes Funzione JavaScript.
function GetWishes (_page) var _offset = (_page - 1) * 2; $ .ajax (url: '/ getWish', tipo: 'POST', data: offset: _offset, success: function (res) var itemsPerPage = 2; var wishObj = JSON.parse (res); $ ( '#ulist'). empty (); $ ('# listTemplate') .tmpl (wishObj [0]). appendTo ('# ulist'); var total = wishObj [1] ['total']; var pageCount = totale / itemsPerPage; var pageRem = totale% itemsPerPage; if (pageRem! = 0) pageCount = Math.floor (pageCount) + 1; $ ('. pagination'). empty (); var pageStart = $ ('# hdnStart '). val (); var pageEnd = $ (' # hdnEnd '). val (); if (pageStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':' Precedente ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' «')); $ (aPrev) .click (function () $ ('# hdnStart'). val (Number (pageStart) - 5); $ ('# hdnEnd'). val (Number (pageStart) - 5 + 4); GetWishes (Number (pageStart) - 5);); var prevLink = $ ('') .Append (aPrev); $ ( 'Impaginazione') append (prevLink).; per (var i = Number (pageStart); i <= Number(pageEnd); i++) if (i > pageCount) break; var aPage = $ ('') .attr (' href ',' # '). text (i); $ (aPage) .click (function (i) return function () GetWishes (i); (i)); var page = $ ('') .Append (apage); if ((_page) == i) $ (pagina) .attr ('classe', 'attivo'); $ ('. pagination'). append (pagina); if ((Number (pageStart) + 5) <= pageCount) var nextLink = $('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' »'). click (function () $ (' # hdnStart '). val (Number (pageStart) + 5); $ (' #hdnEnd '). val (Number (pageStart) + 5 + 4); GetWishes (Number (pageStart) + 5);))); $ ( 'Impaginazione') append (Nextlink).; , errore: function (error) console.log (errore); ); Salvare tutte le modifiche precedenti e riavviare il server. Accedi utilizzando un indirizzo email e una password validi. Dovresti essere in grado di vedere l'impaginazione completamente funzionale per la lista dei desideri dell'utente.
In questa parte della serie, abbiamo implementato la funzionalità di impaginazione per la lista dei desideri sulla home page dell'utente. Abbiamo visto come recuperare i dati usando una procedura memorizzata MySQL e creare la paginazione usando quei dati, jQuery e Bootstrap.
Nella parte successiva di questa serie di tutorial, implementeremo la funzionalità di caricamento dei file nella nostra applicazione.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!
