Creare un'app Web da zero usando Python Flask e MySQL Parte 3

Nella parte precedente di questa serie di tutorial, abbiamo implementato la funzionalità di accesso e disconnessione per la nostra applicazione Elenco bucket. In questa parte della serie, implementeremo il back-end e il front-end necessari per un utente per aggiungere e visualizzare gli elementi dell'elenco di bucket.

Iniziare

Iniziamo clonando la parte precedente per il tutorial di GitHub.

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

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

cd PythonFlaskMySQLApp_Part2 python app.py

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

Aggiungi articoli elenco secchi

Passaggio 1: creare un'interfaccia per aggiungere elementi

Inizieremo creando un'interfaccia per l'utente che ha effettuato il login per aggiungere elementi dell'elenco di bucket. Vai a modelli cartella all'interno della directory del progetto e creare un file chiamato addWish.html. Aperto addWish.html e aggiungi il seguente codice HTML:

         
 
  
Python Flask App
 
 
 
 
  
Crea il tuo desiderio
  
 Titolo 
  
 
  
 Inviare 
  
 
  
  
  
 
 
 
 
  
  

Aperto app.py e aggiungere una nuova rotta e un nuovo metodo per visualizzare il Aggiungi un desiderio pagina.

@ app.route ('/ showAddWish') def showAddWish (): restituisce render_template ('addWish.html')

Aperto userHome.html e aggiungere una nuova voce di menu per il collegamento al Aggiungi un desiderio pagina.

Aggiungi un desiderio

Salva le modifiche e riavvia il server. Puntare il browser su http: // localhost: 5002 e accedere utilizzando un indirizzo e-mail e una password validi. Una volta effettuato l'accesso, fare clic su Aggiungi un desiderio link e dovresti visualizzare la pagina Aggiungi Wish.

Passaggio 2: implementazione del database

Per aggiungere elementi all'elenco dei bucket, è necessario creare una tabella chiamata tbl_wish.

CREATE TABLE 'tbl_wish' ('wish_id' int (11) NOT NULL AUTO_INCREMENT, 'wish_title' varchar (45) DEFAULT NULL, 'wish_description' varchar (5000) DEFAULT NULL, 'wish_user_id' int (11) DEFAULT NULL, 'wish_date' datetime DEFAULT NULL, PRIMARY KEY ('wish_id')) ENGINE = InnoDB AUTO_INCREMENT = 3 DEFAULT CHARSET = latin1; 

tbl_wish avrà titolo, descrizione e il ID dell'utente che ha creato il desiderio.

Successivamente, abbiamo bisogno di creare una procedura memorizzata MySQL per aggiungere elementi al tbl_wish tavolo.

USA 'BucketList'; Procedura DROP SE ESISTE 'BucketList'. 'Sp_addWish'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_addWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_user_id bigint) BEGIN inserisci in tbl_wish (wish_title, wish_description , wish_user_id, wish_date) valori (p_title, p_description, p_user_id, NOW ()); END $$ DELIMITER; ; 

Passaggio 3: creare un metodo Python per chiamare la stored procedure MySQL 

Crea un metodo chiamato addWish nel app.py.

@ app.route ('/ addWish', methods = ['POST']) def addWish (): # Il codice sarà qui 

Poiché pubblicheremo i dati su questo metodo, l'abbiamo dichiarato esplicitamente nel percorso definito.

Quando viene effettuata una chiamata al addWish metodo, dobbiamo convalidare se si tratta di una chiamata autentica controllando se la variabile di sessione utente esiste. Una volta convalidata la sessione, leggeremo la pubblicazione titolo e descrizione.

_title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('utente') 

Una volta ottenuti i valori di input richiesti, apriremo una connessione MySQL e richiameremo la stored procedure sp_addWish.

conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_addWish', (_ title, _description, _user)) data = cursor.fetchall () 

Dopo aver eseguito la stored procedure, è necessario confermare le modifiche al database.

se len (dati) è 0: conn.commit () return redirect ('/ userHome') else: return render_template ('error.html', error = 'Si è verificato un errore!') 

Ecco il completo addWish metodo.

@ app.route ('/ addWish', metodi = ['POST']) def addWish (): prova: se session.get ('utente'): _title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('utente') conn = mysql.connect () cursore = conn.cursor () cursor.callproc ('sp_addWish', (_ titolo, _description, _user)) data = cursor.fetchall () se len (data) è 0: conn.commit () return redirect ('/ userHome') else: return render_template ('error.html', error = 'Si è verificato un errore!') else: return render_template ('errore .html ', error =' Accesso non autorizzato ') tranne Exception as e: return render_template (' error.html ', error = str (e)) finally: cursor.close () conn.close () 

Salva tutto il codice sorgente e riavvia il server. Puntare il browser su http: // localhost: 5002 e accedere utilizzando un indirizzo e-mail e una password validi. Una volta effettuato l'accesso, fare clic su Aggiungi un desiderio collegamento. Inserisci il titolo e descrizione per il tuo desiderio e clicca Pubblicare. Se si aggiunge correttamente il desiderio, è necessario reindirizzare alla home page dell'utente. Accedi al database MySQL e dovresti avere il desiderio nel tuo tbl_wish tavolo. 

Mostra un elemento elenco bucket

Passaggio 1: creare una stored procedure per recuperare un desiderio

Creiamo una procedura memorizzata MySQL che otterrà i desideri creati da un utente. Ci vorrà l'utente ID come parametro e restituire un set di dati di desideri creati dal particolare ID utente. 

USA 'BucketList'; Procedura DROP SE ESISTE 'sp_GetWishByUser'; DELIMITER $$ USE 'BucketList' $$ CREATE PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint) BEGIN seleziona * da tbl_wish dove wish_user_id = p_user_id; END $$ DELIMITER; 

Passaggio 2: creare un metodo Python per il recupero dei dati

Quindi, creiamo un metodo Python che chiamerà il sp_GetWishByUser stored procedure per ottenere i desideri creati da un utente. Aggiungi un metodo chiamato getWish nel app.py.

@app.route ('/ getWish') def getWish (): prova: se session.get ('utente'): _user = session.get ('utente') else: return render_template ('error.html', error = 'Accesso non autorizzato') eccetto Exception as e: return render_template ('error.html', error = str (e)) 

Come visto nel codice precedente, questo metodo può essere chiamato solo con validità utente sessione. Una volta convalidato per una sessione utente valida, creeremo una connessione al database MySQL e richiameremo la stored procedure sp_GetWishByUser.

 _user = session.get ('utente') # Connetti a MySQL e recupera dati con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser', (_ user,)) wishes = cursor.fetchall ( )

Una volta recuperati i dati da MySQL, analizzeremo i dati e li convertiremo in a dizionario in modo che sia facile tornare come JSON.

wishes_dict = [] per wish in wish: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'Date': wish [4] wishes_dict. append (wish_dict)

Dopo aver convertito i dati in a dizionario convertiremo i dati in JSON e ritorno.

return json.dumps (wishes_dict)

Ecco il pieno getWish metodo.

@app.route ('/ getWish') def getWish (): prova: se session.get ('utente'): _user = session.get ('utente') con = mysql.connect () cursor = con.cursor ( ) cursor.callproc ('sp_GetWishByUser', (_ user,)) wishes = cursor.fetchall () wishes_dict = [] per wish in wish: wish_dict = 'Id': wish [0], 'Title': wish [1] , 'Descrizione': wish [2], 'Date': wish [4] wishes_dict.append (wish_dict) return json.dumps (wishes_dict) else: return render_template ('error.html', error = 'Accesso non autorizzato') tranne Exception as e: return render_template ('error.html', error = str (e)) 

Passaggio 3: associazione dei dati JSON all'HTML

Quando viene caricata la home page dell'utente, chiameremo il getWish metodo che utilizza jQuery AJAX e associa i dati ricevuti al nostro codice HTML. Nel userHome.html aggiungi il seguente jQuery Script AJAX:

Salvare le modifiche precedenti e riavviare il server. Una volta effettuato l'accesso con un indirizzo e-mail e una password validi, controlla la console del browser e dovresti recuperare la lista dei desideri dal database come mostrato:

["Date": "Ven, 23 Jan 2015 23:26:05 GMT", "Descrizione": "Voglio scalare il Monte Everest", "Id": 1, "Titolo": "Climb Everest",  "Data": "Ven, 23 Jan 2015 23:27:05 GMT", "Descrizione": "Voglio saltare da cima a una montagna", "Id": 2, "Titolo": "Bungee Jump"]

Ora, abbiamo bisogno di scorrere il JSON dati e collegarli all'HTML. Useremo il bootstrap list-gruppo per visualizzare le voci della nostra lista dei desideri. Ecco il modello base per list-gruppo:

  
Titolo del desiderio
 
Descrizione del desiderio
  

Aggiungi il codice HTML sopra al jumbotron div in userHome.html. Ecco come appare: 

Ora, quello che faremo è creare quanto sopra mostrato list-gruppo div in modo dinamico per ogni voce della lista dei desideri e aggiungila alla jumbotron div. All'interno del callback di successo di getWish chiamata di funzione, creare un div come mostrato:

var div = $ ('
') .attr (' class ',' list-group ') .append ($ ('') .attr (' classe ',' elenco-articolo-gruppo attivo ') .append ($ ('
') .attr (' class ',' list-group-item-heading '), $ ('
') .attr (' classe ',' lista-gruppo-articolo-testo ')));

Cloneremo il div precedente per creare il list-gruppo div per ogni voce della lista dei desideri. Quindi, analizzare il reso JSON stringa in un oggetto JavaScript. 

var wishObj = JSON.parse (res);

Ora, scorrere wishObj e per ogni oggetto desiderato, clonare un nuovo div e aggiungerlo al jumbotron div.

var wish = "; $ .each (wishObj, function (index, value) wish = $ (div) .clone (); $ (wish) .find ('h4'). text (value.Title); $ ( wish) .find ('p'). text (value.Description); $ ('. jumbotron'). append (wish););

Salvare le modifiche precedenti e riavviare il server. Accedi utilizzando un indirizzo email e una password validi e dovresti essere in grado di vedere l'elenco dei desideri creati da un particolare utente.

Conclusione

In questo tutorial, abbiamo implementato un'interfaccia per un utente che ha effettuato l'accesso per creare un desiderio. Abbiamo anche implementato i metodi richiesti e la stored procedure del database per recuperare e visualizzare i desideri creati nella home page dell'utente. 

Nella parte successiva di questa serie, vedremo come implementare il modificare e Elimina funzionalità per la lista dei desideri mostrata nella home page dell'utente.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Fateci sapere i vostri pensieri nei commenti qui sotto!