Creazione di un'applicazione Web da zero utilizzando Python Flask e MySQL parte 8

Nella parte precedente di questa serie di tutorial, abbiamo popolato la pagina dashboard della nostra applicazione con i desideri creati da diversi utenti. Abbiamo anche associato un pulsante simile a ciascun desiderio in modo che un utente potesse apprezzare un particolare desiderio.

In questa parte della serie, vedremo come attivare / disattivare la visualizzazione simile e mostrare il numero totale di Mi piace ricevuti da un particolare desiderio.

Iniziare

Iniziamo clonando la parte precedente del tutorial da GitHub.

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

Una volta clonato il codice sorgente, accedere alla directory del progetto e avviare il server web. 

cd PythonFlaskMySQLApp_Part7 python app.py

Puntare il browser su http: // localhost: 5002 / e si dovrebbe avere l'applicazione in esecuzione.

Aggiungere un conteggio simile

Inizieremo implementando una funzione per mostrare il numero totale di conteggi che un particolare desiderio ha raccolto. Quando viene aggiunto un nuovo desiderio, faremo un ingresso nel tbl_likes tavolo. Quindi modificare la procedura memorizzata MySQL sp_addWish aggiungere una voce nel tbl_likes tavolo. 

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 insert in 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 (); inserire i valori di tbl_likes (wish_id, user_id, wish_like) (@last_id, p_user_id, 0); END $$ DELIMITER; 

Come visto nel codice di procedura memorizzato sopra, dopo aver inserito il desiderio nel file tbl_wish tabella, abbiamo recuperato l'ultimo inserito ID e inserito i dati in tbl_likes tavolo.

Successivamente, abbiamo bisogno di modificare il sp_GetAllWishes stored procedure per includere il numero di Mi piace che ogni desiderio ha raccolto. Faremo uso di una funzione MySQL per ottenere il numero totale di desideri. Quindi creare una funzione chiamata EsprSomma che prenderà il desiderio ID e restituire il numero totale di Mi piace.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'getSum' (p_wish_id int) RETURNS int (11) BEGIN seleziona sum (wish_like) in @sm da tbl_likes dove wish_id = p_wish_id; RITORNO @sm; END $$ DELIMITER; 

Ora chiama la funzione MySQL sopra richiamata EsprSomma nella stored procedure sp_GetAllWishes per ottenere il numero totale di Mi piace per ogni desiderio.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' () INIZIA seleziona wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id) da tbl_wish dove wish_private = 0; END $$ DELIMITER; 

Modifica il getAllWishes Metodo Python per includere il conteggio simile. Durante l'iterazione del risultato restituito dalla stored procedure MySQL, includere il campo simile come mostrato:

per desiderio in risultato: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'FilePath': wish [3], 'Like': wish [desidera] 4] wishes_dict.append (wish_dict)

Modifica il CreateThumb Metodo JavaScript per creare un'ulteriore estensione che utilizzeremo per visualizzare il conteggio simile.

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

E aggiungi il likeSpan al paragrafo genitore p. Ecco la modifica CreateThumb Funzione JavaScript.

function CreateThumb (id, title, desc, filepath, like) var mainDiv = $ ('
') .attr (' classe ',' col-sm-4 col-md-4 '); var thumbNail = $ ('
') .attr (' classe ',' miniatura '); var img = $ ('') .attr (' src ': filepath,' data-holder-rendered ': true,' style ':' height: 150px; width: 150px; display: block '); var caption = $ ('
') .attr (' classe ',' didascalia '); var title = $ ('
') .Text (titolo); var desc = $ ('
') .Text (decrescente); var p = $ ('
'); var btn = $ ('') .attr (' id ':' btn_ '+ id,' tipo ':' pulsante ',' classe ':' 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 (ampiezza)); p.append (likeSpan); caption.append (titolo); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (voce); mainDiv.append (miniatura); return mainDiv; 

Includi il piace parametro durante la chiamata di CreateThumb Funzione JavaScript dal callback di successo della chiamata jQuery AJAX a / getAllWishes.

CreateThumb (data [i] .ID, data [i] .title, data [i] .Descrizione, data [i] .FilePath, data [i] .like)

Salva le modifiche e riavvia il server. Una volta effettuato l'accesso all'applicazione dovresti poter vedere il conteggio corrispondente a ciascuno dei desideri.

Mostra se un desiderio è piaciuto

Vedendo i like sotto ogni desiderio, non è molto chiaro se l'utente che ha effettuato l'accesso abbia gradito o meno il desiderio. Quindi mostreremo un messaggio corretto come Tu e 20 altri. Per implementarlo, dobbiamo modificare il nostro sp_GetAllWishes includere un po 'di codice che indica se l'utente che ha effettuato l'accesso ha apprezzato o meno un particolare desiderio. Per verificare se un desiderio è stato gradito, facciamo una chiamata di funzione. Crea una funzione chiamata hasLiked che accetta l'utente ID e desideri ID come i parametri e restituisce se il desiderio è stato gradito dall'utente o meno.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' FUNCTION 'hasLiked' (p_wish int, p_user int) RETURNS int (11) BEGIN seleziona wish_like in @myval da tbl_likes dove wish_id = p_wish e user_id = p_user; RETURN @myval; END $$ DELIMITER; 

Ora chiama la funzione MySQL sopra hasLiked dentro sp_GetAllWishes per restituire un campo aggiuntivo nel set di dati restituito che indica lo stato di utente.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' (p_user int) BEGIN seleziona wish_id, wish_title, wish_description, wish_file_path, getSum (wish_id), hasLiked (wish_id, p_user) da tbl_wish dove wish_private = 0; FINE

Aperto app.py e modificare la chiamata alla stored procedure MySQL sp_GetAllWishes per includere l'utente ID come parametro.

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

Ora modifica il getAllWishes metodo per includere lo stato simile dell'utente per un particolare desiderio. Modifica il codice da includere HasLiked nel dizionario creato.

per desiderio in risultato: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'FilePath': wish [3], 'Like': wish [desidera] 4], "HasLiked": wish [5] wishes_dict.append (wish_dict)

Dentro il CreateThumb Funzione JavaScript, controlleremo per HasLiked e aggiungere il codice HTML di conseguenza.

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

Come visto nel codice sopra, stiamo mostrando il conteggio simile se l'utente non ha gradito un particolare desiderio. Se l'utente ha apprezzato il desiderio, stiamo mostrando un messaggio più descrittivo.

Refreshing Like Count

Nel momento in cui clicchiamo sul pulsante Mi piace, lo stato di like viene aggiornato nel database, ma non cambia nel dashboard. Quindi aggiorniamolo nella callback di successo della chiamata AJAX sul piace pulsante clic.

Inizieremo modificando la procedura memorizzata MySQL sp_AddUpdateLikes. In precedenza stavamo passando nello stato simile, 1 per un mi piace e 0 per differenza. Lo modificheremo e cambieremo il like / a differenza della stored procedure. Aperto sp_AddUpdateLikes e selezionare lo stato simile in una variabile e controllare lo stato della variabile. Se lo stato della variabile è simile, aggiorneremo lo stato a differenza e viceversa. Ecco la modifica sp_AddUpdateLikes stored procedure.

-- -------------------------------------------------------------------------------- -- DDL di routine - Nota: i commenti prima e dopo che il corpo di routine non verrà memorizzato dal server - ---------------------------- -------------------------------------------------- - DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, p_like int) BEGIN if (seleziona esiste (seleziona 1 da tbl_likes dove wish_id = p_wish_id e user_id = p_user_id)) quindi seleziona wish_like in @currentVal da tbl_likes dove wish_id = p_wish_id e user_id = p_user_id; se @currentVal = 0 quindi aggiorna tbl_likes imposta wish_like = 1 dove wish_id = p_wish_id e user_id = p_user_id; else update tbl_likes set wish_like = 0 dove wish_id = p_wish_id e user_id = p_user_id; finisci se; altrimenti inserire in valori tbl_likes (wish_id, user_id, wish_like) (p_wish_id, p_user_id, p_like); finisci se; FINE

Nel CreateThumb Funzione JavaScript, assegnare un ID al likeSpan che abbiamo creato in precedenza, in modo da poter aggiornare lo stato come richiesto.

var likeSpan = $ ('') .Attr (' aria-nascosta ':' vero', 'id': 'arco _' + id);

Aprire app.py. Dentro il addUpdateLike metodo, una volta che i dati sono stati aggiornati con successo, recupereremo il desiderio come il conteggio e lo stato usando un'altra chiamata alla procedura memorizzata. Quindi creare una procedura memorizzata MySQL chiamata sp_getLikeStatus. Dentro sp_getLikeStatus chiameremo le funzioni MySQL già create EsprSomma e hasLiked per ottenere lo stato.

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

Una volta chiamata a sp_AddUpdateLikes dal metodo Python addUpdateLike è stato fatto, chiudi il cursore e la connessione.

se len (dati) è 0: conn.commit () cursor.close () conn.close ()

Ora effettua una chiamata alla stored procedure sp_getLikeStatus.

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

Restituisce il conteggio e lo stato dei like e la risposta.

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

Nel dashboard.html, nel callback di successo della chiamata AJAX fatta a addUpdateLike metodo, analizza la risposta restituita e in base allo stato simile mostra il conteggio simile.

success: function (response) var obj = JSON.parse (response); if (obj.likeStatus == "1") $ ('# span_' + spId) .html ('You &' + (Number (obj.total) - 1) + 'Others');  else $ ('# span_' + spId) .html ('' + obj.total + 'like (s)'); 

Salvare le modifiche, riavviare il server e accedere utilizzando credenziali valide. Una volta nella pagina del dashboard, prova ad apprezzare un particolare desiderio e osserva come viene aggiornato di conseguenza lo stato.

Avvolgendolo

In questa parte della serie, abbiamo implementato la funzionalità simile / diversa per i desideri visualizzati nella pagina dashboard. Nelle prossime parti della serie, implementeremo alcune nuove funzionalità nell'applicazione e perfezioneremo alcune delle funzionalità esistenti.

Fateci sapere i vostri pensieri e suggerimenti, o eventuali correzioni, nei commenti qui sotto. Il codice sorgente di questo tutorial è disponibile su GitHub.