Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Creazione di una Web App da zero utilizzando Python Flask e MySQL : Parte 5

by
Difficulty:IntermediateLength:MediumLanguages:
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

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

Nella parte precedente di questa serie, abbiamo visto come implementare la funzionalità di modifica ed Elimina desiderio per la nostra applicazione di lista dei desideri In questa parte implementeremo la funzionalità di paging per la lista del nostro utente principale.

Incominciamo

Cominciamo duplicando la parte precedente del tutorial da GitHub.

Una volta che il codice sorgente è stato clonato, passare alla directory del progetto e avviare il server web.

Puntare il browser su http://localhost:5002 / e dovreste avere l'esecuzione dell'applicazione.

Implementazione della Paginazione

con l'aumentare della lista dei desideri sulla home page dell'utente, otteniamo una pagina che scorre verso il basso. Così è importante implementare l'impaginazione. Limiteremo  il numero di elementi visualizzati su una pagina ad un certo numero.

Modificare la Procedura prendi il desiderio.

Inizieremo modificando la procedura di sp_GetWishByUser per restituire i risultati in base a un valore limite e l'offset. Questa volta creeremo la nostra istruzione di stored procedure in modo dinamico per restituire il risultato impostato in base al limite e valore offset. Ecco la stored procedure MySQL sp_GetWishByUser modificata.

Come si vede nella stored procedure sopra, abbiamo creato ed eseguito la nostra query SQL dinamica  per ottenere la lista dei desideri basata su parametri offset e limite.

Aggiunta della paginazione all'interfaccia utente

In primo luogo, cerchiamo di definire alcune impostazioni predefinite. In app.py aggiungete una variabile per il limite di pagina.

Fate in modo che il metodo python getWish accetti richieste POST.

Leggete l'offset e il limite all'interno del metodo getWish e passatelo quando viene chiamata la stored procedure MySQL sp_GetWishByUser.

 Modificate la funzione JavaScript GetWishes  nel file userHome.html per renderlo una richiesta POST e passare il valore di offset.

Salvare tutte le modifiche e riavviare il server. Accedete utilizzando un indirizzo email valido e password e dovreste vedere sullo schermo solo due records.

User Home with Limited records

Così la parte del database sta lavorando bene. Successivamente, è necessario aggiungere l'interfaccia utente di impaginazione alla home page dell'utente, che permetterà all'utente di spostarsi tra i dati.

Useremo il componente di paginazione Bootstrap. Aprite userHome.html e aggiungete il seguente codice HTML dopo il #ulist UL.

Salvare le modifiche e riavviare il server. Dopo aver acceduto con successo, dovreste essere in grado di vedere l'impaginazione sotto alla lista dei desideri.

Pagination in User Home Page

Rendendiamo l'impaginazione dinamica

L'impaginazione di cui sopra è come sarà nostra paginazione. Ma per renderla funzionale, dobbiamo creare la nostra impaginazione in modo dinamico in base al numero di record nel database.

Per creare la nostra paginazione, avremo bisogno del numero totale di record disponibili nel database. Così andiamo a modificare la stored procedure MySQL  sp_GetWishByUser per restituire il numero totale di record disponibili come parametro esterno.

Come si vede nella stored procedure modificata qui sopra, abbiamo aggiunto un nuovo parametro di output chiamato p_total e selezionato il conteggio totale dei desideri basato sull'id utente.

Abbiamo anche modificato il metodo di python getWish per passare un parametro di output.

Come abbiamo visto nel codice precedente, una volta che abbiamo chiamato la stored procedure chiudiamo il cursore e apriremo un nuovo cursore per selezionare il parametro esterno restituito .

In precedenza il metodo Python ci restituiva una lista di desideri. Ora  nel JSON restituito., dobbiamo includere il conteggio totale dei record. Così faremo il dizionario della lista dei desideri in un'altra lista e quindi aggiungeremo la wish list e il conteggio dei record alla lista principale. Ecco il codice modificato del metodo python getWish.

Nella funzione GetWishes JavaScript, all'interno del callback di successo aggiungere un log della console.

Salvare tutte le modifiche di cui sopra e riavviare il server. Accedete utilizzando un indirizzo email valido e una password e quando sarete sulla home page dell'utente, controllate la console del browser. Si dovreste essere in grado di vedere una risposta simile a quella riportato di seguito:

Utilizzando il conteggio totale ricevuto dalla risposta, noi possiamo ottenere il numero totale di pagine.

Dividendo il conteggio totale dal conteggio itemsPerPage ci dà il numero di pagine necessarie. Ma questo vale solo quando il totale è un multiplo di itemsPerPage. Se questo non è il caso, dovremo controllare e gestire di conseguenza il numero di pagine.

Così che ci darà il numero corretto di pagine.

Ora poiché abbiamo il numero totale di pagine, creeremo l'impaginazione HTML in modo dinamico. Rimuovete l'elemento LI dall'impaginazione HTML che abbiamo aggiunto in precedenza.

nella callback di successo GetWishes, creiamo il link precedente dinamicamente, utilizzando jQuery.

Nel codice precedente, abbiamo appena creato il collegamento del pulsante precedente e lo abbiamo aggiunto al tag UL della paginazione.

Salvare le modifiche e riavviare il server. Accedendo con successo dovreste vedere il collegamento precedente sotto l'elenco.

Previous link in the Pagination

Allo stesso modo, aggiungiamo le pagine nell'impaginazione basata sul conteggio delle pagine.

Aggiungiamo anche il collegamento successivo dopo aver aggiunto il link di pagine.

Salvare le modifiche e riavviare il server. Accedete utilizzando un indirizzo email valido e una password, e una volta sulla home page dell'utente dovreste essere in grado di vedere la paginazione.

Pagination in User Home Page

Associate un evento Click per un numero di pagina

Ora arriva la logica principale che renderà la nostra impaginazione funzionale. Quello che dobbiamo fare è collegare una chiamata all'evento clicca su ogni pagina di indice per chiamare la funzione GetWishes JavaScript.  Attacchiamo primaditutto un evento click all'elemento di ancoraggio visualizzando il numero di pagina.

Così abbiamo appena attaccato un evento onclick per l'ancoraggio della pagina. Per ogni click si chiama la funzione GetWishes che passa  l'offset. Dichiarate cosi l'offset fuori del ciclo for.

Chiamate la funzione di GetWishes all'interno della evento chiamato con il click.

Inoltre incrementate l'offset in base al numero di record visualizzati.

Ma ogni volta che viene chiamata la funzione di GetWishes, il valore di offset sarà sempre quello dell'ultima impostata. Così faremo uso di JavaScript Closures per passare l'offset corretto alla funzione GetWishes.

Salvare tutte le modifiche di cui sopra e riavviare il server. Accedi utilizzando le credenziali valide e una volta sulla home page dell'utente, prova a cliccare le pagine nell'impaginazione UL.

Successivamente, implementeremo i collegamenti alle pagine precedente e successiva. Può sembrare un po' complicato, quindi permettimi  di spiegare un po' prima di iniziare con l'implementazione.

Ci potrà essere la visualizzazione di cinque pagine alla volta. Utilizzando il link successivo e precedente,  l'utente può navigare rispettivamente per le prossime cinque e le precedenti cinque pagine . Noi memorizziamo i valori della pagina di inizio e la pagina di fine e manteniamo l'aggiornamento sia sul pulsante successivo che precedente . Quindi iniziamo aggiungendo due campi nascosti alla pagina userHome.html.

Il callback GetWishes andata a buon fine, dopo che abbiamo svuotato la .pagination UL, aggiungete la seguente riga di codice per ottenere le ultime pagine inizio e fine.

Non verrà mostrato nessun collegamento al pulsante precedente quando visualizzate le pagine da1 a 5. Se le pagine visualizzate sono superiori a 5 poi visualizzeremo il collegamento del pulsante precedente.

Quando l'utente fa clic sul pulsante precedente,azzereremo i valori hdnStart e hdnEnd e chiameremo la funzione GetWishes JavaScript.

Successivamente, basato sulla pagina iniziale e la pagina di fine ciclo e creeremo i collegamenti della pagina e aggiungere il .pagination UL.

Confrontando il numero totale di pagine e il valore di inizio pagina, decideremo la visualizzazione del collegamento pulsante successivo.

Come si vede nel codice precedente, sul pulsante successivo stiamo reimpostando i valori del pulsante hdnStart e hdnEnd  e chiamando la funzione JavaScript GetWishes

Ecco la funzione JavaScript GetWishes finale.

Salvare tutte le modifiche di cui sopra e riavviare il server. Accedete utilizzando un indirizzo email valido e una password. Dovreste essere in grado di vedere l'impaginazione completamente funzionate per la lista dei desideri dell'utente.

Conclusione

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 utilizzando una strered procedure di MySQL e creare l'impaginazione utilizzando tali dati, jQuery e Bootstrap.

Nella parte successiva di questa serie di tutorial, implementeremo la funzionalità di caricamento di file nell'applicazione.

Codice sorgente da questo tutorial è disponibile su GitHub.

Fateci sapere i vostri pensieri nei commenti qui sotto!

Advertisement
Advertisement
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.