Crearea unei aplicații Web de la zero utilizând Python Flack și MySQL Partea 8

În partea anterioară a acestei serii de tutorial, am populat pagina de bord a aplicației noastre cu dorințele create de diferiți utilizatori. De asemenea, am atașat un buton asemănător fiecărei dorințe, astfel încât un utilizator să-i placă o anumită dorință.

În această parte a seriei, vom vedea cum să comutați afișajul similar / spre deosebire de afișare și să afișăm numărul total de plăceri primite de o anumită dorință.

Noțiuni de bază

Să începem prin clonarea părții anterioare a tutorialului de la GitHub.

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

Odată ce codul sursă a fost clonat, navigați la directorul de proiect și porniți serverul web. 

cd PythonFlaskMySQLApp_Part7 Python app.py

Punctați browser-ul dvs. la http: // localhost: 5002 / și ar trebui să aveți aplicația să ruleze.

Adăugarea unui număr asemănător

Vom începe prin implementarea unei funcții pentru a arăta numărul total de conturi pe care le-a obținut o anumită dorință. Când se adaugă o nouă dorință, vom face o intrare în tbl_likes masa. Deci modificați procedura memorată MySQL sp_addWish pentru a adăuga o intrare în tbl_likes masa. 

(IN) p_descriere varchar (1000), IN p_user_id bigint, IN p_file_path varchar (200), int p_is_private int, IN p_is_done int ) BEGIN introduceți în valorile tbl_wish (wish_title, wish_description, wish_user_id, wish_date, wish_file_path, wish_private, wish_accomplished) valori (p_title, p_description, p_user_id, NOW (), p_file_path, p_is_private, p_is_done); SET @last_id = LAST_INSERT_ID (); introduceți în valorile tbl_likes (desire_id, user_id, wish_like) (@last_id, p_user_id, 0); END $$ DELIMITER; 

După cum se vede în codul procedurii stocate mai sus, după introducerea dorinței în tbl_wish tabel, am luat ultimul inserat ID-ul și a introdus datele în tbl_likes masa.

Apoi, trebuie să modificăm sp_GetAllWishes procedură stocată pentru a include numărul de plăceri pe care le-a obținut fiecare dorință. Vom folosi o funcție MySQL pentru a obține numărul total de dorințe. Deci, creați o funcție numită obține suma care va lua dorinta ID-ul și returnează numărul total de aprecieri.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'getSum' (p_wish_id int) RETURNS int (11) BEGIN selectați suma (wish_like) în @sm din tbl_likes where wish_id = p_wish_id; RETURN @sm; END $$ DELIMITER; 

Acum, apelați funcția MySQL de mai sus numită obține suma în procedura stocată sp_GetAllWishes pentru a obține numărul total de plăceri pentru fiecare dorință.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURĂ 'sp_GetAllWishes' () BEGIN selectați wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id) din tbl_wish where wish_private = 0; END $$ DELIMITER; 

Modificați getAllWishes Metoda Python pentru a include contorul similar. În timp ce iterați rezultatul returnat din procedura stocată MySQL, includeți câmpul asemănător așa cum este arătat:

pentru dorință în rezultatul: wish_dict = 'Id': dorință [0], 'Titlu': dorință [1], 'Descriere': wish [2], 'FilePath' 4] wishes_dict.append (wish_dict)

Modificați CreateThumb Metoda JavaScript pentru a crea un interval suplimentar pe care îl vom folosi pentru a afișa numărarea ca și cum ar fi.

var caSpan = $ ('') .attr (' aria-ascuns ',' adevărat '). html (' '+ ca +' ca (s) ');

Și adăugați-o likeSpan la paragraful părinte p. Aici este modificat CreateThumb Funcția JavaScript.

funcția CreateThumb (id, titlu, desc, filepath, ca) var mainDiv = $ ('
') .attr (' clasă ',' col-sm-4 col-md-4 '); var thumbNail = $ ('
') .attr (' clasă ',' miniatură '); var img = $ ('') .attr (' src ': filepath,' data-holder-rendered ': true,' style ':' height: 150px; width: 150px; display: block '); var caption = $ ('
') .attr (' clasă ',' caption '); var titlu = $ ('
„) .Text (titlu); var desc = $ ('
„) .Text (desc); var p = $ ('
„); var btn = $ ('') .attr (' id ':' btn_ '+ id,' tip ':' buton ',' clasă ':' btn btn-danger btn-sm '); var span = $ ('') .attr (' clasa ':' glyphicon glyphicon-thumbs-up ',' aria-hidden ':' true '); var caSpan = $ ('') .attr (' aria-ascuns ',' adevărat '). html (' '+ ca +' ca (s) '); p.append (btn.append (interval)); p.append (likeSpan); caption.append (titlu); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (legendă); mainDiv.append (Miniatură); întoarcere mainDiv; 

Includeți ca parametru în timp ce sunați CreateThumb Funcția JavaScript de la apelul de succes al apelului jQuery AJAX la / getAllWishes.

CreateThumb (date [i] .Id, date [i] .Titlul, date [i] .description, date [i] .FilePath, date [i] .Like)

Salvați modificările și reporniți serverul. După ce v-ați înscris în aplicație, ar trebui să vedeți numărul concret corespunzător fiecărei dorințe.

Afișați dacă doriți o dorință

Văzându-i pe cei care se bucură de fiecare dorință, nu este foarte clar dacă utilizatorul logat a plăcut sau nu dorința. Așa că vom arăta un mesaj cum ar fi Tu și 20 de alții. Pentru a implementa acest lucru, trebuie să ne modificăm sp_GetAllWishes pentru a include un pic de cod care să indice dacă utilizatorul înregistrat a plăcut sau nu o anumită dorință. Pentru a verifica dacă o dorință a fost plăcută, efectuăm un apel în funcție. Creați o funcție numită hasLiked care are nevoie de utilizator ID-ul și dorința ID-ul ca parametri și întoarce dacă dorința a fost plăcută de utilizator sau nu.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'hasLiked' (p_wish int, p_user int) RETURNS int (11) BEGIN selectați wish_like în @myval din tbl_likes where wish_id = p_wish and user_id = p_user; RETURN @myval; END $$ DELIMITER; 

Acum apelați funcția MySQL de mai sus hasLiked interior sp_GetAllWishes pentru a returna un câmp suplimentar în setul de date returnat care indică starea de tip utilizator.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURA 'sp_GetAllWishes' (p_user int) BEGIN selectați wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id); SFÂRȘIT

Deschis app.py și modificați apelul la procedura stocată MySQL sp_GetAllWishes pentru a include utilizatorul ID-ul ca parametru.

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

Acum modificați getAllWishes metodă de includere a stării similare a utilizatorului pentru o anumită dorință. Modificați codul de inclus HasLiked în dicționarul creat.

pentru dorință în rezultatul: wish_dict = 'Id': dorință [0], 'Titlu': dorință [1], 'Descriere': wish [2], 'FilePath' 4], "HasLiked": dorință [5] wishes_dict.append (wish_dict)

În interiorul CreateThumb Funcția JavaScript, vom verifica HasLiked și adăugați codul HTML în consecință.

dacă (hasLiked == "1") likeSpan.html ("Tu și" + (Numărul (ca) - 1) + "Altele");  altfel likeSpan.html ('' + ca + 'ca (e)'); 

După cum se vede în codul de mai sus, afișăm numărul de conturi similare dacă nu le-a plăcut o anumită dorință utilizatorului. Dacă utilizatorul a plăcut dorința noastră, afișăm un mesaj mai descriptiv.

Reîmprospătarea contelui ca el

În momentul în care faceți clic pe butonul similar, starea similară se actualizează în baza de date, dar nu se modifică în tabloul de bord. Deci, să o actualizăm în apelul de succes al apelului AJAX pe ca clic pe buton.

Vom începe prin a face o schimbare în procedura stocată MySQL sp_AddUpdateLikes. Anterior trecusem în situația similară, 1 pentru un tip similar și 0 pentru altul. Vom modifica acest lucru și vom schimba modul asemănător / nepotrivit în procedura stocată. Deschis sp_AddUpdateLikes și selectați starea similară într-o variabilă și verificați starea variabilei. Dacă starea variabilei este similară, vom actualiza starea pentru a nu se deosebește și invers. Aici este modificat sp_AddUpdateLikes procedură stocată.

-- -------------------------------------------------------------------------------- -- DDL de rutină - Notă: comentariile înainte și după corpul de rutină nu vor fi stocate de server - ---------------------------- -------------------------------------------------- - DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURĂ 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, p_like int) BEGIN if (selectați 1 din tbl_likes where wish_id = p_wish_id and user_id = p_user_id) selectați wish_like în @currentVal din tbl_likes unde wish_id = p_wish_id și user_id = p_user_id; dacă @currentVal = 0, atunci actualizați tbl_likes setul wish_like = 1 unde wish_id = p_wish_id și user_id = p_user_id; altfel actualizare tbl_likes set wish_like = 0 unde wish_id = p_wish_id și user_id = p_user_id; sfârșit dacă; altfel introduceți valorile tbl_likes (desire_id, user_id, wish_like) (p_wish_id, p_user_id, p_like); sfârșit dacă; SFÂRȘIT

În CreateThumb Funcția JavaScript, atribuiți un ID-ul la likeSpan pe care am creat-o mai devreme, astfel încât să putem actualiza starea după cum este necesar.

var caSpan = $ ('') .Attr (' arie-ascuns ':' „, 'id true': '_ durata' + id);

Deschide app.py. În interiorul addUpdateLike , odată ce datele au fost actualizate cu succes, vom prelua dorința ca numărătoarea și starea utilizând un alt apel de procedură stocată. Deci, creați o procedură memorată MySQL numită sp_getLikeStatus. Interior sp_getLikeStatus vom numi funcțiile deja create MySQL obține suma și hasLiked pentru a obține statutul.

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

Odată ce ați sunat la sp_AddUpdateLikes din metoda Python addUpdateLike a fost făcută, închideți cursorul și conexiunea.

dacă len (date) este 0: conn.commit () cursor.close () conn.close ()

Acum, apelați procedura stocată sp_getLikeStatus.

conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_getLikeStatus', (_ashId, _user)) rezultat = cursor.fetchall 

Întoarceți numărul contabil și cum ar fi starea împreună cu răspunsul.

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

În dashboard.html, în apelul de succes al apelului AJAX către addUpdateLike metodă, analizați răspunsul returnat și bazat pe starea similar arată numărul contează.

succes: funcție (răspuns) var obj = JSON.parse (răspuns)); dacă (obj.likeStatus == "1") $ ('# span_' + spId) .html ('Tu &' + (Număr (obj.total) - 1) + Altele);  altceva $ ('# span_' + spId) .html ('' + obj.total + 'ca (e)'); 

Salvați modificările, reporniți serverul și conectați-vă utilizând acreditări valide. Odată ce vă aflați pe pagina de bord, încercați să vă placați o anumită dorință și vedeți cum se actualizează situația similară.

Înfășurați-o

În această parte a seriei, am implementat funcția asemănătoare / nesatisfăcătoare pentru dorințele afișate pe pagina de bord. În următoarele părți ale seriei, vom implementa mai multe caracteristici noi în aplicație și vom rafina câteva dintre caracteristicile existente.

Dați-ne cunoștință despre gândurile și sugestiile dvs. sau orice corecții în comentariile de mai jos. Codul sursă din acest tutorial este disponibil pe GitHub.