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

Nella parte precedente di questa serie, abbiamo implementato il paging per la lista dei desideri sulla home page dell'utente. In questa parte della serie, implementeremo un'opzione per l'utente per caricare un'immagine che rappresenta un desiderio, un'opzione per contrassegnare il desiderio come realizzato e un'opzione per impostare la privacy.

Iniziare

Iniziamo clonando la parte precedente del tutorial da GitHub.

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

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

cd PythonFlaskMySQLApp_Part5 python app.py

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

Modifica dell'interfaccia utente

Iniziamo modificando la nostra pagina "Aggiungi desiderio" per includere un'opzione per caricare un'immagine. Navigare verso templates / addWish.html. La nostra forma in addWish.html sembra piuttosto piccolo, quindi modifichiamo il codice HTML di bootstrap per rendere verticale il modulo.

Innanzitutto, modificheremo il forma orizzontale in una forma verticale, quindi rimuovi la classe forma orizzontale dalla forma. Aggiungeremo anche tre nuovi controlli: un controllo di caricamento file per caricare foto, una casella di controllo per contrassegnare il desiderio come privato e un'altra casella di controllo per contrassegnare il desiderio come completato. Ecco la modifica addWish.html.

   Python Flask Bucket List App           Aggiungi articolo 
 Disconnettersi 
 
 
 Python Flask App
 
   Crea il tuo desiderio   Titolo  
   Descrizione  
  Fotografie    Navigare…     
 
  Segna questo come privato e non visibile agli altri. 
  Contrassegna come privato  
  Hai già realizzato questo? 
  Segna come fatto  
     
 
 
  © Azienda 2015

Salvare la modifica di cui sopra e riavviare il server. Dopo aver effettuato l'accesso, fare clic su Aggiungi un desiderio link e dovresti essere in grado di vedere la pagina dei desideri aggiunta modificata.

Implementazione della funzionalità di caricamento

Useremo blueimp jQuery-File-Upload per implementare la funzionalità di caricamento dei file. Scarica i file richiesti da GitHub. Estrai la fonte e aggiungi i seguenti riferimenti di script a addWish.html.

Sopra addWish.html caricamento della pagina, aggiungi il codice di avvio del plugin al pulsante di caricamento del file.

$ (function () $ ('# fileupload'). fileupload (url: 'upload', dataType: 'json', aggiungi: function (e, data) data.submit ();, success: function ( response, status) console.log (response);, errore: function (errore) console.log (errore););)

Come visto nel codice sopra, abbiamo allegato il plugin per il caricamento del file al #upload di file pulsante. Il plugin per il caricamento dei file pubblica il file nel file /caricare gestore della richiesta, che definiremo nel nostro codice Python. Abbiamo anche definito un Inserisci funzione per inviare i dati e definiti successo e fallimento callback per gestire il successo e gli errori di caricamento.

Quindi, definiamo il caricare Gestore caricamento file Python in app.py. Definire una rotta /caricare come mostrato:

@ app.route ('/ upload', methods = ['GET', 'POST']) def upload (): # il codice di gestione dell'upload del file sarà qui

Controlla se la richiesta è a INVIARE richiesta, e in tal caso leggere il file dalla richiesta.

if request.method == 'POST': file = request.files ['file']

Avremo anche bisogno di ottenere l'estensione del file immagine per salvare il file. Quindi importa os e quindi dividere il nome dell'estensione dal nome del file.

extension = os.path.splitext (file.filename) [1]

Una volta che abbiamo l'estensione del file, creeremo un nuovo nome di file univoco usando uuid. Importare uuid e creare il nome del file.

f_name = str (uuid.uuid4 ()) + estensione

Crea una cartella chiamata Upload nella cartella statica. Qui è dove terremo le immagini caricate. Aggiungi il percorso alla cartella Upload nella configurazione dell'app.

app.config ['UPLOAD_FOLDER'] = 'static / Uploads'

Ora salva il file pubblicato nel UPLOAD_FOLDER posizione e restituisce il nome del file come risposta.

file.save (os.path.join (app.config ['UPLOAD_FOLDER'], f_name)) restituisce json.dumps ('filename': f_name)

Salvare le modifiche precedenti e riavviare il server. Puntare il browser su http: // localhost: 5002 e accedere utilizzando credenziali valide. Prova a caricare un'immagine utilizzando il pulsante Sfoglia e, al termine, controlla la console del browser. Dovresti essere in grado di vedere il nome del file caricato restituito.

Invece del campo di testo di input di sola lettura, aggiungiamo un elemento immagine per visualizzare l'immagine caricata. Sostituisci quindi il campo di testo di input di sola lettura con il seguente codice HTML.

Nel richiamo di successo del caricamento del file, aggiorna #imgUpload'S src all'immagine caricata.

$ ( '# ImgUpload') attr ( 'src', 'statico / uploads /' + response.filename).;

Salvare le modifiche precedenti e riavviare il server. Accedi all'applicazione e prova a caricare un nuovo file immagine e dovresti riuscire a visualizzare l'immagine caricata.

Dovremo modificare il nostro tbl_wish struttura della tabella per includere tre nuovi campi. Alterare il tbl_wish come mostrato di seguito:

ALTER TABLE 'BucketList'. 'Tbl_wish' AGGIUNGI COLONNA 'wish_file_path' VARCHAR (200) NULL DOPO 'wish_date', AGGIUNGI COLONNA 'wish_accomplished' INT NULL DEFAULT 0 AFTER 'wish_file_path', AGGIUNGI COLUMN 'wish_private' INT NULL DEFAULT 0 AFTER 'wish_accomplished ';

Quindi modifichiamo le nostre stored procedure sp_addWish e sp_updateWish per includere i campi appena aggiunti al database.

Modifica il sp_addWish stored procedure per includere i tre campi aggiunti di recente.

USA 'BucketList'; Procedura DROP SE ESISTE '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, IN p_file_path varchar (200), IN p_is_private int, IN p_is_done int) BEGIN inserisce i valori in tbl_wish (wish_title, wish_description, wish_user_id, wish_date, wish_file_path, wish_private, wish_accomplished) (p_title, p_description, p_user_id, NOW (), p_file_path, p_is_private, p_is_done); END $$ DELIMITER;

Modificare anche la procedura memorizzata sp_updateWish per includere i tre campi aggiunti di recente.

USA 'BucketList'; Procedura DROP SE ESISTE 'sp_updateWish'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, In p_user_id bigint, IN p_file_path varchar ( 200), IN p_is_private int, IN p_is_done int) BEGIN aggiorna tbl_wish set wish_title = p_title, wish_description = p_description, wish_file_path = p_file_path, wish_private = p_is_private, wish_accomplished = p_is_done dove wish_id = p_wish_id e wish_user_id = p_user_id; END $$ DELIMITER;

Quindi, modificare il / addWish richiede il metodo del gestore per leggere i campi appena inviati e passarli alla stored procedure.

se request.form.get ('filePath') è None: _filePath = "else: _filePath = request.form.get ('filePath') se request.form.get ('private') è None: _private = 0 else: _private = 1 se request.form.get ('done') è None: _done = 0 else: _done = 1

Una volta che i valori sono stati letti, li passeremo alla chiamata della procedura memorizzata MySQL.

cursor.callproc ( 'sp_addWish', (_ titolo, _description, _user, _filePath, _private, _done))

Nel addWish.html pagina dovremo impostare il nome attributo per gli elementi da pubblicare. Quindi aggiungi nome a entrambe le caselle di controllo appena aggiunte.

 Contrassegna come privato   Segna come fatto

Ora dobbiamo anche passare il percorso del file di caricamento. Quindi creeremo un campo di input nascosto e imposteremo il suo valore nel callback di successo del caricamento di file.

Imposta il suo valore nel callback di successo del caricamento del file.

success: function (response, status) var filePath = 'static / Uploads' + response.filename; $ ('# imgUpload'). attr ('src', filePath); $ ( '# FilePath') val (filePath).;

Salvare le modifiche precedenti e riavviare il server. Accedi utilizzando credenziali valide e prova ad aggiungere un nuovo desiderio con tutti i dettagli richiesti. Una volta aggiunto correttamente, dovrebbe essere elencato nella home page dell'utente.

Modifica l'implementazione Modifica desideri

Per prima cosa, dobbiamo aggiungere del codice HTML per i tre nuovi campi. Quindi apriti userHome.html e aggiungi il seguente codice HTML dopo il titolo e descrizione HTML.

 Fotografie    Navigare…       
 
 
  Segna questo come privato e non visibile agli altri. 
  Contrassegna come privato  
  Hai già realizzato questo? 
  Segna come fatto

Dovremo recuperare i dati richiesti per popolare i campi sopra in modifica. Quindi modifichiamo la stored procedure sp_GetWishById per includere i campi aggiuntivi come mostrato:

CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishById' (IN p_wish_id bigint, In p_user_id bigint) INIZIA seleziona wish_id, wish_title, wish_description, wish_file_path, wish_private, wish_accomplished da tbl_wish dove wish_id = p_wish_id e wish_user_id = p_user_id; FINE

Successivamente, dovremo modificare il JSON stringa nel / getWishById metodo di instradamento per includere i nuovi campi. Modifica la lista dei desideri in / getWishById come mostrato:

wish.append ( 'Id': risultato [0] [0], 'Titolo': risultato [0] [1], 'Descrizione': risultato [0] [2], 'FilePath': risultato [0] [ 3], 'privata': risultato [0] [4], 'Fatto': risultato [0] [5])

Per rendere il risultato, abbiamo bisogno di analizzare i dati ricevuti nella callback di successo del modificare Funzione JavaScript in userHome.html.

success: function (res) var data = JSON.parse (res); . $ ( '# EditTitle') Val (dati [0] [ 'Titolo']); . $ ( '# EditDescription') Val (dati [0] [ 'Descrizione']); $ ('# imgUpload'). attr ('src', data [0] ['FilePath']); if (data [0] ['Private'] == "1") $ ('# chkPrivate'). attr ('checked', 'checked');  if (data [0] ['Done'] == "1") $ ('# chkDone'). attr ('checked', 'checked');  $ ('# editModal'). modal ();

Salva le modifiche e riavvia il server. Accedi utilizzando credenziali valide e, quando sulla home page dell'utente, prova a modificare un desiderio dalla lista dei desideri. Dovresti avere i dati popolati nel popup Modifica.

Ora, in modo simile a ciò che abbiamo fatto nella pagina dei desideri, aggiungi il riferimento allo script jQuery-File-Upload in userHome.html.

Inizializza il controllo del caricamento del file nel popup di modifica usando lo stesso codice che abbiamo usato nella pagina dei desideri.

$ (function () $ ('# fileupload'). fileupload (url: 'upload', dataType: 'json', aggiungi: function (e, data) data.submit ();, success: function ( response, status) var filePath = 'static / Uploads' + response.filename; $ ('# imgUpload'). attr ('src', filePath); $ ('# filePath'). val (filePath); , errore: function (errore) console.log (errore););)

Successivamente abbiamo bisogno di modificare il pulsante Aggiorna fare clic sul popup Modifica per includere i campi aggiuntivi aggiunti. Quindi, nel btnUpdate clic del pulsante, modifica i parametri dei dati passati per includere i tre nuovi campi come mostrato:

data: title: $ ('# editTitle'). val (), description: $ ('# editDescription'). val (), id: localStorage.getItem ('editId'), filePath: $ ('# imgUpload' ) .attr ( 'src'), IsPrivate:. $ ( '# chkPrivate') è ( ': controllata') 1: 0, isDone:. $ ( '# chkDone') è (? ': controllare') 1 : 0

Aprire app.py e modificare il / updateWish metodo del gestore delle richieste per analizzare i campi appena aggiunti.

_filePath = request.form ['filePath'] _isPrivate = request.form ['isPrivate'] _isDone = request.form ['isDone']

Modificare il metodo di chiamata della procedura per includere i parametri aggiuntivi.

cursor.callproc ( 'sp_updateWish', (_ titolo, _description, _wish_id, _user, _filePath, _isPrivate, _isDone))

Ora apri sp_updateWish e modificarlo per includere i campi appena aggiunti.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, In p_user_id bigint, IN p_file_path varchar (200), IN p_is_private int , IN p_is_done int) BEGIN aggiorna tbl_wish set wish_title = p_title, wish_description = p_description, wish_file_path = p_file_path, wish_private = p_is_private, wish_accomplished = p_is_done dove wish_id = p_wish_id e wish_user_id = p_user_id; FINE

Salvare tutte le modifiche precedenti e riavviare il server. Accedi utilizzando credenziali valide e prova a modificare e aggiornare le voci esistenti.

Avvolgendolo

In questa parte della serie di tutorial, abbiamo visto come integrare e utilizzare il plugin blueim jQuery-File-Upload per caricare le immagini nella nostra applicazione Python Flask. Nella parte successiva di questa serie, mostreremo i desideri compiuti dagli utenti nella home page dell'applicazione e aggiungeremo la funzionalità per soddisfare i desideri.

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

Codice