Share
In het vorige deel van deze serie hebben we gezien hoe het Bewerk en Verwijder wens-functionaliteit voor onze Bucket List-toepassing. In dit deel zullen we de semafunctionaliteit voor onze gebruikershomepage implementeren.
Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part4.git
Nadat de broncode is gekloond, navigeert u naar de projectdirectory en start u de webserver.
cd PythonFlaskMySQLApp_Part4 python app.py
Richt uw browser op http: // localhost: 5002 / en u zou de applicatie moeten laten draaien.
Naarmate de lijst met wensen op de startpagina van de gebruiker toeneemt, wordt deze op de pagina gescrolld. Het is dus belangrijk om paginering te implementeren. We beperken het aantal items dat op een pagina wordt getoond tot een bepaald aantal.
We beginnen met het aanpassen van de sp_GetWishByUser procedure om resultaten te retourneren op basis van een begrenzing en compenseren waarde. Deze keer zullen we onze opgeslagen procedureverklaring dynamisch maken om de resultatenset te retourneren op basis van de limiet- en offsetwaarde. Dit is het aangepaste sp_GetWishByUser MySQL stored procedure.
Accentsconagua
GEBRUIK 'BucketList'; DROP-procedure IF EXISTS 'sp_GetWishByUser'; DELIMITER $$ GEBRUIK '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 ('select * from tbl_wish where_user_id = ', p_user_id,' volgorde op wish_date desc limit ', p_limit,' offset ', p_offset); BEREKEN STmT VAN @ t1; UITVOEREN stmt; DEALLOCATE PREPARE stmt1; END $$ DELIMITER; Zoals te zien in de bovenstaande opgeslagen procedure, hebben we onze dynamische SQL-query gemaakt en uitgevoerd om de verlanglijst op basis van de compenseren en begrenzing parameters.
Laten we eerst een paar standaardinstellingen definiëren. In app.py voeg een variabele toe voor de paginalimiet.
# Standaardinstelling pageLimit = 2
Maak de getWish Python-methode accepteert POST-aanvragen.
@ App.route ( '/ getWish', werkwijzen = [ 'POST'])
Lees de compenseren en begrenzing binnen in de getWish methode en geef deze door terwijl u de opgeslagen MySQL-procedure aanroept sp_GetWishByUser.
_limit = pageLimit _offset = request.form ['offset'] con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser', (_ user, _limit, _offset)) wishes = cursor.fetchall () Wijzig de GetWishes JavaScript-functie in userHome.html om er een POST-aanvraag van te maken en de compenseren waarde.
functie GetWishes () $ .ajax (url: '/ getWish', type: 'POST', data: offset: 0, succes: functie (res) var wishObj = JSON.parse (res); $ ( '#ulist'). empty (); $ ('# listTemplate'). tmpl (wishObj) .appendTo ('# ulist');, error: function (error) console.log (error);) ; Sla alle wijzigingen op en start de server opnieuw op. Meld u aan met een geldig e-mailadres en wachtwoord en er mogen slechts twee records op het scherm worden weergegeven.
Dus het database gedeelte werkt goed. Vervolgens moeten we de gebruikersinterface voor paginering toevoegen aan de startpagina van de gebruiker, waarmee de gebruiker door de gegevens kan navigeren.
We gebruiken de component Bootstrap-paginering. Doe open userHome.html en voeg de volgende HTML-code toe na de #ulist UL.
Sla de wijzigingen op en start de server opnieuw op. Na het succesvol aanmelden, zou u de paginering onder het verlanglijstje moeten kunnen zien.
De bovenstaande paginering is hoe onze paginering eruit zal zien. Maar om het functioneel te maken, moeten we onze paginering dynamisch maken op basis van het aantal records in de database.
Voor het maken van onze paginering hebben we het totale aantal records nodig dat beschikbaar is in de database. Dus laten we de opgeslagen MySQL-procedure aanpassen sp_GetWishByUser om het totale aantal beschikbare records als een uit-parameter te retourneren.
GEBRUIK 'BucketList'; DROP-procedure IF EXISTS 'sp_GetWishByUser'; DELIMITER $$ GEBRUIK 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint, IN p_limit int, IN p_offset int, out p_total bigint) BEGIN selecteer count (*) in p_total from tbl_wish waar wish_user_id = p_user_id; 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); BEREKEN STmT VAN @ t1; UITVOEREN stmt; DEALLOCATE PREPARE stmt; END $$ DELIMITER;Zoals te zien in de bovenstaande gewijzigde opgeslagen procedure hebben we een nieuwe uitvoerparameter toegevoegd genaamd p_total en selecteerde het totale aantal wensen op basis van het gebruikers-ID.
Wijzig ook de getWish python-methode om een uitvoerparameter door te geven.
_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 () Zoals je in de bovenstaande code kunt zien, sluiten we de cursor zodra we de opgeslagen procedure hebben gebeld en openen we een nieuwe cursor om de teruggestuurde parameter te selecteren.
Eerder gaven we een lijst met wensen terug van de Python-methode. Nu moeten we ook het totale aantal records opnemen in de geretourneerde JSON. Dus we zullen het verlanglijstje in een andere lijst plaatsen en vervolgens de verlanglijst toevoegen en de telling opnemen in de hoofdlijst. Hier is de aangepaste code van de getWish python-methode.
response = [] wishes_dict = [] voor wensen in wensen: 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]) return json.dumps (reactie) In de GetWishes JavaScript-functie, voeg in de succes-callback een consolelog toe.
console.log (RES);
Sla alle bovenstaande wijzigingen op en start de server opnieuw op. Log in met een geldig e-mailadres en wachtwoord en kijk op de startpagina van de gebruiker naar de browserconsole. U zou een reactie kunnen zien die lijkt op de reactie hieronder:
[["Datum": "zo, 15 februari 2015 15:10:45 GMT", "Description": "wwe", "Id": 5, "Title": "wwe", "Datum": " Zat, 24 januari 2015 00:13:50 GMT "," Beschrijving ":" Reis naar Spanje "," Id ": 4," Titel ":" Spanje "], " totaal ": 5]
Met behulp van de totale telling ontvangen van het antwoord, kunnen we het totale aantal pagina's krijgen.
var total = wishObj [1] ['total']; var pageCount = total / itemsPerPage;
Verdelen van de totale items tellen van Artikelen per pagina count geeft ons het aantal benodigde pagina's. Maar dit geldt alleen als het totaal een veelvoud is van Artikelen per pagina. Als dat niet het geval is, moeten we dat controleren en het aantal pagina's dienovereenkomstig afhandelen.
var pageRem = totaal% itemsPerPage; if (pageRem! = 0) pageCount = Math.floor (pageCount) +1;
Dus dat geeft ons het juiste aantal pagina's.
Omdat we nu het totale aantal pagina's hebben, maken we de paginerings-HTML dynamisch. Verwijder de LI element uit de paginering HTML die we eerder hebben toegevoegd.
In de GetWishes succes callback, laten we de vorige link dynamisch maken met behulp van jQuery.
var prevLink = $ ('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':' Previous ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' «'))); $ ( 'Paginering') append (prevLink).;In de bovenstaande code hebben we zojuist de link met de vorige knop gemaakt en toegevoegd aan de paginering UL.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Na succesvolle aanmelding moet u de vorige link onder de lijst kunnen zien.
Evenzo, laten we de pagina's in de paginering toevoegen op basis van het aantal pagina's.
for (var i = 0; i < pageCount; i++) var page = $('') .Append ($ ('') .attr (' href ',' # '). tekst (i + 1)); $ ( 'Paginering') toevoegen (blz.); Laten we ook de volgende link toevoegen nadat de paginalink is toegevoegd.
var nextLink = $ ('') .Append ($ ('') .attr (' href ':' # ', ' aria-label ':' Next ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' »'))); $ ( 'Paginering') append (Nextlink).;Sla de wijzigingen op en start de server opnieuw op. Meld u aan met een geldig e-mailadres en wachtwoord en eenmaal op de startpagina van de gebruiker moet u de paginering kunnen zien.
Nu komt de hoofdlogica die onze paginering functioneel zal maken. Wat we gaan doen is een klikgebeurtenis aan elke pagina-index toevoegen om de GetWishes JavaScript-functie. Laten we eerst een klikgebeurtenis koppelen aan het ankerelement dat het paginanummer weergeeft.
for (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). tekst (i + 1); $ (aPage) .klik (functie () ); var page = $ (') .Append (a Blz); $ ( 'Paginering') toevoegen (blz.); Dus hebben we zojuist een onclick-gebeurtenis aan het pagina-anker gekoppeld. Bij elke klik bellen we de GetWishes functie en geef de compenseren. Dus verklaar de compenseren buiten de for-lus.
var offset = 0;
Bel de GetWishes functie binnen de klikgebeurtenis.
GetWishes (offset);
Verhoog ook de compenseren op basis van het aantal getoonde records.
offset = offset + 2;
Maar elke keer de GetWishes functie wordt aangeroepen, de waarde van compenseren zal altijd de laatste set zijn. Dus maken we gebruik van JavaScript-sluitingen om de juiste offset door te geven aan de GetWishes functie.
var offset = 0; for (var i = 0; i < pageCount; i++) var aPage = $('') .attr (' href ',' # '). tekst (i + 1); $ (aPage) .klik (functie (offset) return function () GetWishes (offset); (offset)); var page = $ (') .Append (a Blz); $ ( 'Paginering') toevoegen (blz.); offset = offset + itemsPerPage; Sla alle bovenstaande wijzigingen op en start de server opnieuw op. Log in met geldige referenties en klik eenmaal op de startpagina van de gebruiker op de pagina's in de paginering UL.
Vervolgens implementeren we de koppelingen van de vorige en volgende pagina. Het lijkt misschien een beetje ingewikkeld, dus ik zal het een beetje uitleggen voordat we met de implementatie beginnen.
We geven vijf pagina's tegelijk weer. Met behulp van de volgende en vorige koppeling kan de gebruiker naar respectievelijk de volgende vijf en de vorige vijf pagina's navigeren. We slaan de waarden van de startpagina en de eindpagina op en blijven zowel bij de volgende als bij de vorige klik klikken. Laten we beginnen met het toevoegen van twee verborgen velden aan de userHome.html pagina.
In de GetWishes succes callback, nadat we de .paginering UL, voeg de volgende regel code toe om de laatste begin- en eindpagina te krijgen.
$ ( 'Paginering') leeg (.); var pageStart = $ ('# hdnStart'). val (); var pageEnd = $ ('# hdnEnd'). val ();Er wordt geen link naar een vorige knop weergegeven bij het weergeven van pagina's 1 tot 5. Als de weergegeven pagina's groter zijn dan 5, geven we de link met de vorige knop weer.
if (pageStart> 5) var aPrev = $ ('') .attr (' href ':' # ', ' aria-label ':' Previous ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' «')); $ (aVorige) .klik (functie () // Knoplogica vorige); var prevLink = $ (') .Append (aPrev); $ ( 'Paginering') append (prevLink).; Wanneer de gebruiker op de vorige knop klikt, stellen we de hdnStart en hdnEnd waarden en bel de GetWishes JavaScript-functie.
$ (aVorige) .klik (functie () $ ('# hdnStart'). val (Number (pageStart) - 5); $ ('# hdnEnd'). val (Number (pageStart) - 5 + 4); GetWishes (Number (pageStart) - 5););Vervolgens, gebaseerd op de startpagina en de eindpagina, lus en maken we de paginalinks en voegen we de .paginering UL.
for (var i = Number (pageStart); i <= Number(pageEnd); i++) if (i > pageCount) break; var aPage = $ ('') .attr (' href ',' # '). tekst (i); // Voeg de pagina klik gebeurtenis $ (aPage) toe. Klik (functie (i) return function () GetWishes (i); (i)); var page = $ (') .Append (a Blz); // Voeg de actieve paginaklasse toe als ((_page) == i) $ (pagina) .attr ('class', 'active'); $ ('. pagination'). toevoegen (pagina); Door het totale aantal pagina's en de startwaarde van de pagina te vergelijken, bepalen we de weergave van de volgende knopkoppeling.
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);))); $ ( 'Paginering') append (Nextlink).; Zoals te zien is in de bovenstaande code, worden bij de volgende klik op de knop de hdnStart en hdnEnd knopwaarden en de GetWishes JavaScript-functie.
Dus hier is de finale GetWishes JavaScript-functie.
functie GetWishes (_page) var _offset = (_page - 1) * 2; $ .ajax (url: '/ getWish', type: '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 = totaal / itemsPerPage; var pageRem = totaal% 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 ':' Previous ') .append ($ ('') .attr (' aria-hidden ',' true '). html (' «')); $ (aVorige) .klik (functie () $ ('# hdnStart'). val (Number (pageStart) - 5); $ ('# hdnEnd'). val (Number (pageStart) - 5 + 4); GetWishes (Number (pageStart) - 5);); var prevLink = $ (') .Append (aPrev); $ ( 'Paginering') append (prevLink).; for (var i = Number (pageStart); i <= Number(pageEnd); i++) if (i > pageCount) break; var aPage = $ ('') .attr (' href ',' # '). tekst (i); $ (aPage) .klik (functie (i) return function () GetWishes (i); (i)); var page = $ (') .Append (a Blz); if ((_page) == i) $ (pagina) .attr ('class', 'active'); $ ('. pagination'). toevoegen (pagina); if ((Nummer (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);))); $ ( 'Paginering') append (Nextlink).; , fout: functie (fout) console.log (fout); ); Sla alle bovenstaande wijzigingen op en start de server opnieuw op. Log in met een geldig e-mailadres en wachtwoord. U zou de volledig functionele paginering voor de gebruikerswensenlijst moeten kunnen zien.
In dit deel van de reeks hebben we de pagineringfunctionaliteit geïmplementeerd voor de verlanglijst op de startpagina van de gebruiker. We zagen hoe we gegevens kunnen ophalen met behulp van een opgeslagen MySQL-procedure en paginering maken met die gegevens, jQuery en Bootstrap.
In het volgende deel van deze tutorialserie zullen we de functie voor het uploaden van bestanden implementeren in onze applicatie.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder!
