Creazione di un'applicazione Web da zero utilizzando Python Flask e MySQL Parte 7

Nella parte precedente di questa serie, abbiamo implementato la funzionalità di caricamento delle immagini per gli utenti aggiungendo un desiderio. Abbiamo anche aggiunto alcune altre opzioni relative al desiderio di un utente nella pagina Aggiungi desideri. In questo tutorial, lo porteremo al livello successivo implementando la funzionalità per soddisfare un particolare desiderio.

Iniziare 

Iniziamo clonando la parte precedente del tutorial da GitHub.

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

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

cd PythonFlaskMySQLApp_Part6 python app.py

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

Creazione dell'interfaccia utente di Dashboard

Creeremo una nuova pagina chiamata cruscotto dove verranno visualizzati tutti i desideri di diversi utenti. Qualsiasi utente può gradire o commentare i desideri visualizzati nella dashboard. Quindi vai alla cartella dei modelli e crea un file chiamato dashboard.html. Aprire dashboard.html e aggiungi il seguente codice HTML:

        
 
  
Python Flask App
 
 
 
 
 
  
 
Bungee jumping
 
Veicolo ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumping
 
Veicolo ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumping
 
Veicolo ut id elit.
 
    
 
 
 
 
 
 
  
 
Bungee jumping
 
Veicolo ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumping
 
Veicolo ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumping
 
Veicolo ut id elit.
 
    
 
 
 
 
 
  
  

Aprire app.py e creare una nuova rotta chiamata / showDashboard. Usando questo percorso eseguiremo il rendering della pagina del dashboard.

@ app.route ('/ showDashboard') def showDashboard (): restituisce render_template ('dashboard.html') 

Modifica il / validateLogin metodo per reindirizzare l'utente all'accesso riuscito alla pagina dashboard anziché alla home page dell'utente.

return redirect ('/ showDashboard')

Salvare le modifiche precedenti e riavviare il server. Puntare il browser su http: // localhost: 50002 e accedere utilizzando un indirizzo e-mail e una password validi. Una volta effettuato l'accesso, dovresti riuscire a visualizzare la pagina del dashboard.

Come visto nell'immagine sopra, mostreremo tutti i desideri creati da diversi utenti e daremo l'accesso ad altri utenti per apprezzarli.

Compila il dashboard

Per prima cosa, dobbiamo recuperare i dati dal database per popolare il dashboard. Quindi creiamo una stored procedure per ottenere i desideri creati dagli utenti.

USA 'BucketList'; Procedura DROP SE ESISTE 'sp_GetAllWishes'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' () INIZIA seleziona wish_id, wish_title, wish_description, wish_file_path da tbl_wish dove wish_private = 0; END $$ DELIMITER; 

La procedura sopra memorizzata preleverà tutti i desideri tbl_wish che non sono contrassegnati come privati.

Successivamente, creeremo un nuovo metodo Python per chiamare la stored procedure sp_GetAllWishes. Aperto app.py e aggiungere il seguente codice per il getAllWishes metodo.

@app.route ('/ getAllWishes') def getAllWishes (): prova: se session.get ('utente'): conn = mysql.connect () cursore = conn.cursor () cursore.callproc ('sp_GetAllWishes') risultato = cursor.fetchall () wishes_dict = [] per wish in result: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'FilePath': wish [3] wishes_dict.append (wish_dict) restituisce json.dumps (wishes_dict) else: restituisce render_template ('error.html', error = 'Accesso non autorizzato') tranne Exception as e: return render_template ('error.html', error = str (e))

Nel metodo sopra, abbiamo prima verificato una sessione utente valida e poi abbiamo creato una connessione MySQL. Usando la connessione MySQL conn, abbiamo usato un cursore per chiamare la stored procedure sp_GetAllWishes per ottenere i dati richiesti. Una volta che i dati sono stati recuperati, abbiamo analizzato il risultato e restituito un file corretto JSON stringa.

Chiameremo quanto sopra creato / getAllWishes metodo quando viene caricata la pagina dashboard. Aperto dashboard.html e, usando jQuery AJAX, effettuare una chiamata a / getAllWishes sopra document.ready.

$ (function () $ .ajax (url: '/ getAllWishes', digita: 'GET', success: function (response) console.log (risposta);, errore: function (errore) console.log (errore););)

Salvare le modifiche precedenti e riavviare il server. Una volta effettuato l'accesso all'applicazione, controllare la console del browser e si dovrebbe essere in grado di visualizzare i dati recuperati dal database.

["Descrizione": "Bungee Jumping", "FilePath": "images_11 / creating-a-web-app-from-scratch-using-python-flask-and-mysql-part-7.jpg", "Id" : 10, "Titolo": "Bungee Jumping", "Descrizione": "Mount Everest climb", "FilePath": "static / Uploads / e3e8f7fa-6cb9-4cc3-9989-a80e5089546f.png", "Id": 11, "Titolo": "Mount Everest climb", "Descrizione": "River Rafting", "FilePath": "static / Uploads / dff3a64c-5193-42b5-9cdb-9d67a7bbacab.png", "Id": 14 , "Titolo": "River Rafting", "Descrizione": "Deep Sea Diving", "FilePath": "static / Uploads / b0656759-c038-46b4-9529-c208aaa6bfb7.png", "Id": 15, "Titolo": "Deep Sea Diving"]

Utilizzando i dati della risposta, compileremo la nostra pagina dashboard. Innanzitutto, rimuovi il codice HTML tra il .bene div da dashboard.html.

Nel callback di successo della chiamata AJAX, analizzare il file risposta a un oggetto JavaScript.

var data = JSON.parse (response);

Dovremo creare il codice HTML in miniatura in modo dinamico usando jQuery per ogni serie di tre desideri di fila. Quindi per prima cosa creiamo una funzione JavaScript per creare il codice HTML in modo dinamico. Ecco il codice HTML che creeremo dinamicamente usando jQuery:

 
 
 
Testing App
 
Ciao
 
  
 
 
 

Chiameremo la funzione JavaScript CreateThumb. In questa funzione, creeremo gli elementi HTML e li aggiungeremo ai loro elementi genitore per ottenere il codice HTML mostrato sopra.

function CreateThumb (id, title, desc, filepath) 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 '); p.append (btn.append (ampiezza)); caption.append (titolo); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (voce); mainDiv.append (miniatura); return mainDiv; 

Il codice sopra riportato è abbastanza semplice, quindi non entrerò nei dettagli.

Andando avanti, eseguiremo l'analisi JSON risposta e creare l'HTML usando il CreateThumb funzione. Abbiamo in programma di mostrare tre desideri per riga. Quindi controlleremo il problema e creeremo una nuova riga ogni volta per tre desideri. Aggiungi il seguente codice al successo callback della chiamata AJAX in dashboard.html.

var itemsPerRow = 0; var div = $ ('
') .attr (' classe ',' riga '); per (var i = 0; i < data.length; i++)  if (itemsPerRow < 3)  if (i == data.length - 1)  div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath)); $('.well').append(div);  else  div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath)); itemsPerRow++;   else  $('.well').append(div); div = $('
') .attr (' classe ',' riga '); div.append (CreateThumb (data [i] .Id, data [i] .Title, data [i] .Description, data [i] .FilePath)); if (i == data.length - 1) $ ('. well'). append (div);  itemsPerRow = 1; 

Salva le modifiche e riavvia il server. Accedi all'applicazione e quando nella pagina del pannello di controllo, dovresti essere in grado di visualizzare i desideri aggiunti da diversi utenti, con l'opzione di apprezzarli.

Quindi, aggiungiamo un clic evento ai pulsanti simili sotto le miniature dei desideri. Dal momento che abbiamo creato dinamicamente i pulsanti, dovremo allegare l'evento click ai pulsanti utilizzando il metodo jQuery. 

$ (document) .on ('click', '[id ^ = "btn_"]', function () // La funzione Event può essere aggiunta qui);

Implementazione come funzionalità

Iniziamo creando un tavolo che tenga traccia di ciò che ha raccolto un particolare desiderio. Crea una tabella chiamata tbl_likes. 

CREATE TABLE 'BucketList'. 'Tbl_likes' ('wish_id' INT NOT NULL, 'like_id' INT NOT NULL AUTO_INCREMENT, 'user_id' INT NULL, 'wish_like' INT NULL DEFAULT 0; PRIMARY KEY ('like_id')); 

Ora ogni volta che a un utente piace o non piace un particolare desiderio, aggiorneremo questa tabella. Creiamo una procedura memorizzata MySQL per aggiornare la tabella sopra.

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 aggiorna tbl_likes imposta wish_like = p_like dove wish_id = p_wish_id e user_id = p_user_id; altrimenti inserire in valori tbl_likes (wish_id, user_id, wish_like) (p_wish_id, p_user_id, p_like); finisci se; FINE

In questa stored procedure, abbiamo semplicemente controllato se la persona ha già apprezzato o meno il desiderio. Se lui o lei ha già apprezzato, allora l'abbiamo aggiornato come tale o aggiunto uno nuovo.

Creiamo un metodo Python per chiamare la procedura memorizzata sopra.

@ app.route ('/ addUpdateLike', methods = ['POST']) def addUpdateLike (): prova: se session.get ('utente'): _wishId = request.form ['wish'] _like = request.form ['like'] _user = session.get ('utente') conn = mysql.connect () cursore = conn.cursor () cursor.callproc ('sp_AddUpdateLikes', (_ wishId, _user, _like)) data = cursor.fetchall () se len (dati) è 0: conn.commit () restituisce json.dumps ('status': 'OK') else: restituisce render_template ('error.html', error = 'Si è verificato un errore!') else: return render_template ('error.html', error = 'Accesso non autorizzato') tranne Exception as e: return render_template ('error.html', error = str (e)) finally: cursor.close () conn.close ( )

Questo è il metodo Python che chiamerà la stored procedure sp_AddUpdateLikes. In questo metodo abbiamo controllato una sessione utente valida e poi superato il desiderio ID e piace stato alla stored procedure per l'aggiornamento. Quando l'utente fa clic sul pulsante Mi piace, dobbiamo chiamare il metodo Python / addUpdateLike. Quindi aggiungi il seguente codice al piace funzione evento click clic in dashboard.html. 

$ (document) .on ('click', '[id ^ = "btn_"]', function () $ .ajax (url: '/ addUpdateLike', metodo: 'POST', dati: wish: $ (this) .attr ('id'). split ('_') [1], come: 1, success: function (response) console.log (response);, errore: function (error) console .log (errore);););

Per ora, abbiamo codificato il valore di like nella chiamata precedente. Quindi salvare le modifiche e riavviare il server. Accedi all'applicazione e fai clic sul pulsante Mi piace sotto qualsiasi miniatura desiderata. Adesso controlla tbl_likes e dovresti avere una voce in là.

Conclusione

In questa parte del tutorial, abbiamo popolato la pagina dashboard della nostra applicazione con i desideri creati da diversi utenti. Abbiamo anche associato un pulsante simile a ciascuno in modo che gli utenti possano apprezzare un particolare desiderio. Nella parte successiva vedremo come attivare la visualizzazione simile e mostrare il numero totale di Mi piace ricevuti da un particolare desiderio.

Pubblica i tuoi suggerimenti o eventuali correzioni nella casella dei commenti qui sotto. Il codice sorgente di questo tutorial è disponibile su GitHub.