Een webapp maken van kras met behulp van Python Flask en MySQL deel 8

In het vorige deel van deze tutorialreeks hebben we de dashboardpagina van onze applicatie gevuld met de wensen die door verschillende gebruikers zijn gemaakt. We hebben ook een soortgelijke knop aan elke wens gekoppeld, zodat een gebruiker een bepaalde wens zou kunnen waarderen.

In dit deel van de serie zullen we zien hoe je de like / unlike-weergave kunt schakelen en het totale aantal likes dat een bepaalde wens ontvangt.

Ermee beginnen

Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.

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

Nadat de broncode is gekloond, navigeert u naar de projectdirectory en start u de webserver. 

cd PythonFlaskMySQLApp_Part7 python app.py

Richt uw browser op http: // localhost: 5002 / en u zou de applicatie moeten laten draaien.

Een leuk aantal toevoegen

We beginnen met het implementeren van een functie om het totale aantal tellingen te tonen dat een bepaalde wens heeft verzameld. Wanneer een nieuwe wens wordt toegevoegd, doen we een aantekening bij de tbl_likes tafel. Wijzig dus de opgeslagen MySQL-procedure sp_addWish om een ​​item toe te voegen aan de tbl_likes tafel. 

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_addWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_user_id bigint, IN p_file_path varchar (200), IN p_is_private int, IN p_is_done int ) BEGIN invoegen in tbl_wish (wish_title, wish_description, wish_user_id, wish_date, wish_file_path, wish_private, wish_accomplished) values ​​(p_title, p_description, p_user_id, NOW (), p_file_path, p_is_private, p_is_done); SET @last_id = LAST_INSERT_ID (); invoegen in tbl_likes (wish_id, user_id, wish_like) waarden (@last_id, p_user_id, 0); END $$ DELIMITER; 

Zoals te zien in de bovenstaande code opgeslagen procedure, na het invoegen van de wens in de tbl_wish tabel, hebben we de laatste ingevoegd ID kaart en de gegevens ingevoegd in tbl_likes tafel.

Vervolgens moeten we de sp_GetAllWishes opgeslagen procedure om het aantal vind-ik-leuks op te nemen dat elke wens heeft verzameld. We zullen gebruik maken van een MySQL-functie om het totale aantal wensen te krijgen. Dus maak een functie genaamd getSum wat de wens zal aannemen ID kaart en retourneer het totale aantal vind-ik-leuks.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'getSum' (p_wish_id int) RETOUREN int (11) BEGIN selecteer sum (wish_like) in @sm van tbl_likes waarbij wish_id = p_wish_id; RETURN @sm; END $$ DELIMITER; 

Bel nu de bovenstaande MySQL-functie genaamd getSum in de opgeslagen procedure sp_GetAllWishes om het totale aantal vind-ik-leuks voor elke wens te krijgen.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' () BEGIN selecteer wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id) van tbl_wish where wish_private = 0; END $$ DELIMITER; 

Wijzig de getAllWishes Python-methode om de like-telling op te nemen. Terwijl u het resultaat herhaald van de opgeslagen MySQL-procedure herhaalt, neemt u het like-veld op zoals afgebeeld:

voor wens in resultaat: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'FilePath': wish [3], 'Like': wish [ 4] wishes_dict.append (wish_dict)

Wijzig de CreateThumb JavaScript-methode om een ​​extra reeks te maken die we gebruiken om het aantal gelijke tekens weer te geven.

var likeSpan = $ ('') .attr (' aria-hidden ',' true '). html (' '+ like +' like (s) ');

En voeg het toe likeSpan naar de ouderparagraaf p. Dit is het aangepaste CreateThumb JavaScript-functie.

functie CreateThumb (id, title, desc, filepath, like) var mainDiv = $ ('
') .attr (' class ',' col-sm-4 col-md-4 '); var thumbNail = $ ('
') .attr (' class ',' thumbnail '); var img = $ ('') .attr (' src ': filepath,' data-holder-rendered ': true,' style ':' height: 150px; width: 150px; display: block '); var caption = $ ('
') .attr (' klasse ',' bijschrift '); var title = $ ('
) .Text (titel); var desc = $ ('
') .Text (af); var p = $ ('
'); var btn = $ ('') .attr (' id ':' btn_ '+ id,' type ':' button ',' class ':' btn btn-danger btn-sm '); var span = $ ('') .attr (' class ':' glyphicon glyphicon-thumbs-up ',' aria-hidden ':' true '); var likeSpan = $ ('') .attr (' aria-hidden ',' true '). html (' '+ like +' like (s) '); p.append (btn.append (bereik)); p.append (likeSpan); caption.append (titel); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (titel); mainDiv.append (miniatuur); return mainDiv; 

Omvat de net zoals parameter terwijl u de CreateThumb JavaScript-functie van de succes-callback van de jQuery AJAX-oproep naar / getAllWishes.

CreateThumb (data [i] .id, data [i] .title, data [i] .description, data [i] .FilePath, data [i] .Houden)

Sla de wijzigingen op en start de server opnieuw op. Als u eenmaal bent aangemeld bij de toepassing, zou u het aantal mogen zien dat overeenkomt met elk van de wensen.

Laat zien als een wens wordt bevallen

Het zien van de likes onder elke wens, het is niet erg duidelijk of de ingelogde gebruiker de wens leuk vond of niet. Dus laten we een goede boodschap zien zoals Jij en 20 anderen. Om dat te implementeren, moeten we onze sp_GetAllWishes om een ​​stukje code op te nemen dat aangeeft of de ingelogde gebruiker een bepaalde wens wel of niet leuk vond. Om te controleren of een wens gewenst is, voeren we een functieaanroep uit. Maak een functie genaamd hasLiked wat de gebruiker opneemt ID kaart en wens ID kaart als de parameters en retourneert of de wens is bevallen door de gebruiker of niet.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'hasLiked' (p_wish int, p_user int) RETURNS int (11) BEGIN selecteer wish_like in @myval from tbl_likes waarbij wish_id = p_wish en user_id = p_user; RETURN @myval; END $$ DELIMITER; 

Bel nu de bovenstaande MySQL-functie hasLiked binnen sp_GetAllWishes om een ​​extra veld in de geretourneerde dataset te retourneren dat de status van de gebruiker aangeeft.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' (p_user int) BEGIN selecteer wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id), hasLiked (wish_id, p_user) van tbl_wish where wish_private = 0; EINDE

Open app.py en wijzig de aanroep naar de opgeslagen MySQL-procedure sp_GetAllWishes om de gebruiker op te nemen ID kaart als een parameter.

_user = session.get ('user') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_GetAllWishes', (_ user,)) 

Pas nu het getAllWishes methode om de soortgelijke status van de gebruiker voor een bepaalde wens op te nemen. Wijzig de code die u wilt opnemen HasLiked in het gemaakte woordenboek.

voor wens in resultaat: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'FilePath': wish [3], 'Like': wish [ 4], 'HasLiked': wish [5] wishes_dict.append (wish_dict)

Binnen in de CreateThumb JavaScript-functie, we zullen controleren HasLiked en voeg dienovereenkomstig de HTML toe.

if (hasLiked == "1") likeSpan.html ('You &' + (Number (like) - 1) + 'Others');  else likeSpan.html ('' + like + 'like (s)'); 

Zoals te zien is in de bovenstaande code, laten we hetzelfde aantal zien als de gebruiker een bepaalde wens niet leuk vond. Als de gebruiker de wens heeft gewaardeerd, laten we een meer beschrijvende boodschap zien.

De Like Count vernieuwen

Op het moment dat we op de like-knop klikken, wordt de like-status bijgewerkt in de database, maar verandert deze niet in het dashboard. Dus laten we het updaten in de succes-callback van de AJAX-oproep op de net zoals klik op de knop.

We beginnen met het wijzigen van de opgeslagen MySQL-procedure sp_AddUpdateLikes. Eerder gaven we de like-status door, 1 voor een like en 0 voor in tegenstelling tot. We zullen dat aanpassen en de like / unlike in de opgeslagen procedure veranderen. Open sp_AddUpdateLikes en selecteer de like-status in een variabele en controleer de status van de variabele. Als de variabele status een soortgelijk is, zullen we de status bijwerken naar ongelijk en vice versa. Dit is het aangepaste sp_AddUpdateLikes opgeslagen procedure.

-- -------------------------------------------------------------------------------- -- Routine DDL - Opmerking: opmerkingen voor en na de routine worden niet door de server opgeslagen - ---------------------------- -------------------------------------------------- - DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, p_like int) BEGIN if (select exists (selecteer 1 uit tbl_likes waar wish_id = p_wish_id en user_id = p_user_id)) selecteer wish_like in @currentVal from tbl_likes waar wish_id = p_wish_id en user_id = p_user_id; als @currentVal = 0 update dan tbl_likes set wish_like = 1 waar wish_id = p_wish_id en user_id = p_user_id; else update tbl_likes set wish_like = 0 waarbij wish_id = p_wish_id en user_id = p_user_id; stop als; anders invoegen in tbl_likes (wish_id, user_id, wish_like) waarden (p_wish_id, p_user_id, p_like); stop als; EINDE

In de CreateThumb JavaScript-functie, een toewijzen ID kaart naar de likeSpan die we eerder hebben gemaakt, zodat we de status naar behoefte kunnen bijwerken.

var likeSpan = $ (') .Attr ( "-aria verborgen '' waar', 'id': 'overspanning _' + id);

Doe open app.py. Binnen in de addUpdateLike methode, zodra de gegevens succesvol zijn bijgewerkt, zullen we de wens zoals telling en status ophalen met een andere opgeslagen procedureaanroep. Dus maak een opgeslagen MySQL-procedure aan sp_getLikeStatus. Binnen sp_getLikeStatus we bellen de al gemaakte MySQL-functies getSum en hasLiked om de status te krijgen.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_getLikeStatus' (IN p_wish_id int, IN p_user_id int) BEGIN selecteer getSum (p_wish_id), hasLiked (p_wish_id, p_user_id); END $$ DELIMITER; 

Eens een oproep aan sp_AddUpdateLikes van de Python-methode addUpdateLike is gemaakt, sluit de cursor en verbinding.

als len (data) 0 is: conn.commit () cursor.close () conn.close ()

Bel nu naar de opgeslagen procedure sp_getLikeStatus.

conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_getLikeStatus', (_ wishId, _user)) result = cursor.fetchall () 

Retourneer het aantal gelijke en gelijkende status samen met het antwoord.

return json.dumps ('status': 'OK', 'total': result [0] [0], 'likeStatus': result [0] [1]) 

In dashboard.html, in het succes callback van de AJAX-oproep gedaan aan de addUpdateLike methode, parseer de geretourneerde reactie en toon op basis van de like-status de like-telling.

succes: functie (respons) var obj = JSON.parse (respons); if (obj.likeStatus == "1") $ ('# span_' + spID) .html ('You &' + (Number (obj.total) - 1) + 'Others');  else $ ('# span_' + spID) .html ('' + obj.total + 'like (s)'); 

Sla de wijzigingen op, start de server opnieuw op en log in met geldige legitimatiegegevens. Eenmaal op de dashboardpagina probeer je een bepaalde wens te waarderen en zie je hoe de like-status dienovereenkomstig wordt bijgewerkt.

Inpakken

In dit deel van de serie hebben we de like / unlike-functionaliteit geïmplementeerd voor de wensen die worden weergegeven op de dashboardpagina. In de komende delen van de serie zullen we wat meer nieuwe functies in de applicatie implementeren en enkele van de bestaande functies verfijnen.

Laat ons uw gedachten en suggesties, of eventuele correcties, in de onderstaande opmerkingen weten. Broncode van deze tutorial is beschikbaar op GitHub.