Share
Nella parte precedente di questa serie di tutorial, abbiamo implementato la funzionalità richiesta per un utente che ha effettuato l'accesso per aggiungere un desiderio. Abbiamo anche visto come visualizzare i desideri inseriti da un utente nella home page dell'utente.
In questa parte, implementeremo la funzionalità per la modifica e l'eliminazione dei desideri inseriti da un utente.
Iniziamo clonando la parte precedente del tutorial da GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part3.git
Una volta clonato il codice sorgente, accedere alla directory del progetto e avviare il server web.
cd PythonFlaskMySQLApp_Part3 python app.py
Puntare il browser su http: // localhost: 5002 / e si dovrebbe avere l'applicazione in esecuzione.
Stiamo già vincolando i dati ricevuti usando jQuery al nostro HTML. Modificheremo quel codice e utilizzeremo i modelli jQuery per semplificare il bind dei dati. Aggiungeremo anche un modificare icona per il nostro codice HTML per fornire un modo per aggiornare il desiderio. Aperto userHome.html e includi un riferimento ai modelli jQuery.
Rimuovi l'esistente list-gruppo div e sostituirlo con il seguente codice HTML:
Dentro il UL con classe list-gruppo legheremo i nostri dati. Definisci a ListTemplate come mostrato nel corpo dell'HTML:
Modifica il jQuery Chiamata di successo AJAX per associare i dati al file ListTemplate.
Inoltre, includi alcuni stili in userHome.html:
Salva tutte 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 il login, dovresti essere in grado di vedere i desideri creati dall'utente.
Useremo Bootstrap per mostrare un popup per fornire un'interfaccia per modificare i desideri. Includi un riferimento a Bootstrap in userHome.html.
Una volta incluso il riferimento, aggiungi il seguente codice HTML a userHome.html.
L'HTML precedente fungerà da popup. Quando l'utente fa clic su modificare l'icona mostrerà il popup. Abbiamo già aggiunto gli attributi data-obiettivo e dati ginocchiera che attiverà il popup modale.
Salvare le modifiche precedenti e riavviare l'app. Dopo aver effettuato l'accesso all'applicazione, fare clic su modificare icona e dovresti essere in grado di visualizzare il popup.
Quando l'utente fa clic sull'icona di modifica, mostreremo il popup di aggiornamento con titolo e descrizione aggiornare. Per iniziare, per prima cosa abbiamo bisogno dell'ID wish per recuperare i particolari dettagli del desiderio una volta che l'utente fa clic sull'icona di modifica. Quindi modifica il codice del template jQuery per includere un attributo extra Dati-id sull'elemento modifica ancora.
Abbiamo anche allegato un al clic evento per chiamare il metodo modificare. All'interno della funzione Modifica, faremo una chiamata AJAX a un metodo python chiamato getWishById che restituirà i dettagli del desiderio.
Accentsconagua
function Edit (elm) $ .ajax (url: '/ getWishById', data: id: $ (elm) .attr ('data-id'), digita: 'POST', successo: function (res) console.log (res);, errore: function (errore) console.log (errore);); Quindi, apri app.py e creare un metodo chiamato getWishById. Usando questo metodo, otterremo i particolari dettagli del desiderio dal database.
@ app.route ('/ getWishById', methods = ['POST']) def getWishById (): prova: se session.get ('utente'): _id = request.form ['id'] _user = session.get ('utente') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_GetWishById', (_ id, _user)) result = cursor.fetchall () wish = [] wish.append (' Id ': result [0] [0],' Title ': result [0] [1],' Description ': result [0] [2]) restituisce json.dumps (wish) else: restituisce render_template (' errore .html ', error =' Accesso non autorizzato ') tranne Exception as e: return render_template (' error.html ', error = str (e)) Come puoi vedere nel metodo sopra, abbiamo passato l'ID del desiderio a questo metodo e ottiene i dati dal database usando il ID utente e ID desiderio. Una volta che i dati sono stati recuperati, converte i dati in un elenco e quindi li restituisce come JSON dati.
Quindi, creiamo la stored procedure MySQL necessaria per recuperare i dati dal database.
DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishById' (IN p_wish_id bigint, In p_user_id bigint) BEGIN seleziona * da tbl_wish dove wish_id = p_wish_id e wish_user_id = p_user_id; FINE
Il codice mostrato sopra è la procedura memorizzata per ottenere particolari dettagli del desiderio usando il ID desiderio e ID utente.
Salva le modifiche e riavvia il server. Dopo aver effettuato l'accesso all'applicazione, fare clic su modificare icona e dovresti avere i dettagli registrati nella tua console del browser.
Per associare i dati ricevuti al popup HTML, rimuovere prima il data-obiettivo e dati ginocchiera attributi dal tag di ancoraggio dell'icona di modifica. Quindi aggiungere il seguente codice al modificare Funzione JavaScript callback di successo per popolare il popup e attivarlo.
// Analizza la stringa JSON ricevuta var data = JSON.parse (res); // Compila Pop up $ ('# editTitle'). Val (data [0] ['Title']); . $ ( '# EditDescription') Val (dati [0] [ 'Descrizione']); // Attiva il pop-up $ ('# editModal'). Modal ();Salva le modifiche e riavvia il server. Una volta effettuato l'accesso all'applicazione, provare a fare clic sull'icona di modifica e si dovrebbe avere il popup con il titolo e la descrizione.
Per implementare la funzionalità di aggiornamento, creiamo innanzitutto una stored procedure MySQL.
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) INIZIA aggiornamento tbl_wish set wish_title = p_title, wish_description = p_description dove wish_id = p_wish_id e wish_user_id = p_user_id; END $$ DELIMITER;
Come visto nella stored procedure sopra, passeremo nella modifica titolo e descrizione insieme con il ID del desiderio e l'utente di aggiornare i dettagli nel database.
Quindi, creiamo un nuovo metodo chiamato updateWish per aggiornare i dettagli. Ecco il updateWish metodo:
@ app.route ('/ updateWish', methods = ['POST']) def updateWish (): prova: se session.get ('utente'): _user = session.get ('utente') _title = request.form ['title'] _description = request.form ['description'] _wish_id = request.form ['id'] conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_updateWish', (_ title, _description, _wish_id, _user)) data = cursor.fetchall () se len (data) è 0: conn.commit () restituisce json.dumps ('status': 'OK') else: restituisce json.dumps ( 'status': 'ERRORE') eccetto Exception as e: return json.dumps ('status': 'Accesso non autorizzato') finally: cursor.close () conn.close () Come visto nel codice precedente, dopo aver convalidato una sessione valida, abbiamo raccolto i dati inviati e chiamato la stored procedure sp_updateWish per aggiornare i dettagli.
Per chiamare il updateWish metodo, abbiamo bisogno di allegare un evento sul Aggiornare pulsante clic. Quindi, dai il nome al pulsante di aggiornamento btnUpdate e allega un al clic evento come mostrato:
$ ('# btnUpdate'). click (function () $ .ajax (url: '/ updateWish', data: title: $ ('# editTitle'). val (), description: $ ('# editDescription ') .val (), id: localStorage.getItem (' editId '), digita:' POST ', success: function (res) $ (' # editModal '). modal (' nascondi '); // Re popola la griglia, errore: function (errore) console.log (errore);));Come visto nel codice sopra, abbiamo raccolto il editId a partire dal memoria locale, così dentro il modificare funzione salva il ID in memoria locale.
localStorage.setItem ( 'editId', $ (olmo) .attr ( 'data-id'));
Avvolgi il getWish Chiamata AJAX in una funzione, in modo che possiamo richiamarla nuovamente una volta che i dati sono stati aggiornati.
function GetWishes () $ .ajax (url: '/ getWish', digita: 'GET', success: function (res) var wishObj = JSON.parse (res); $ ('# ulist'). vuoto ( ); $ ('# listTemplate'). tmpl (wishObj) .appendTo ('# ulist');, errore: function (errore) console.log (errore);); Chiama il GetWishes funzione nel callback di successo del aggiornare Chiamata AJAX.
$ ('# btnUpdate'). click (function () $ .ajax (url: '/ updateWish', data: title: $ ('# editTitle'). val (), description: $ ('# editDescription ') .val (), id: localStorage.getItem (' editId '), digita:' POST ', success: function (res) $ (' # editModal '). modal (' nascondi '); // Re popola la griglia GetWishes ();, errore: function (errore) console.log (errore);));Salva tutte le modifiche e riavvia il server. Una volta effettuato l'accesso all'applicazione, provare a modificare i desideri disponibili creati dall'utente.
Aggiungi il seguente codice HTML a userHome.html.
Aggiungi un'icona di cancellazione all'interno di ListTemplate aggiungendo il seguente codice HTML:
Facendo clic sull'icona di eliminazione sopra, chiameremo una funzione JavaScript chiamata Conferma cancellazione dove attiverà il popup di conferma.
function ConfirmDelete (elem) localStorage.setItem ('deleteId', $ (elem) .attr ('data-id')); $ ( '# DeleteModal') modali ().; Salva le modifiche e riavvia il server. Una volta effettuato l'accesso, fai clic sull'icona di eliminazione nell'elenco dei desideri e dovresti riuscire a visualizzare il popup di conferma.
Per implementare la funzionalità Elimina desiderio, prima creiamo la procedura memorizzata MySQL da eliminare.
DELIMITER $$ USE 'BucketList' $$ CREATE PROCEDURE 'sp_deleteWish' (IN p_wish_id bigint, IN p_user_id bigint) BEGIN elimina da tbl_wish dove wish_id = p_wish_id e wish_user_id = p_user_id; END $$ DELIMITER;
La suddetta procedura acquisisce l'ID e l'ID utente desiderati e cancella il desiderio corrispondente dal database.
Quindi, creiamo un metodo all'interno app.py chiamare la procedura sp_deleteWish.
Creeremo un metodo chiamato deleteWish per la cancellazione dei desideri.
@ app.route ('/ deleteWish', methods = ['POST']) def deleteWish (): try: if session.get ('user'): _id = request.form ['id'] _user = session.get ('utente') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_deleteWish', (_ id, _user)) result = cursor.fetchall () se len (risultato) è 0: conn. commit () restituisce json.dumps ('status': 'OK') else: restituisce json.dumps ('status': 'Si è verificato un errore') else: return render_template ('error.html', error = 'Accesso non autorizzato') eccetto Exception as e: return json.dumps ('status': str (e)) finally: cursor.close () conn.close () Nel metodo sopra, abbiamo prima convalidato la sessione. Una volta convalidata la sessione utente, utilizzando l'ID wish e l'ID utente abbiamo chiamato la stored procedure sp_deleteWish.
Per chiamare il metodo sopra deleteWish, aggiungi un al clic evento al pulsante Elimina nel popup di conferma dell'eliminazione.
Crea una funzione JavaScript chiamata Elimina, e all'interno di Elimina effettua una chiamata AJAX al metodo python deleteWish.
function Delete () $ .ajax (url: '/ deleteWish', data: id: localStorage.getItem ('deleteId'), digita: 'POST', success: function (res) var result = JSON. parse (res); if (result.status == 'OK') $ ('# deleteModal'). modal ('nascondi'); GetWishes (); else alert (result.status);, errore : function (error) console.log (errore);); Sulla callback di successo di cui sopra Elimina funzione, controlleremo lo stato restituito e, se è OK, nasconderemo il popup modale e ricaricheremo i desideri.
Salva le modifiche e riavvia il server. Una volta effettuato l'accesso all'applicazione, provare a eliminare un desiderio dalla home page dell'utente.
In questa parte della serie, abbiamo visto come implementare il modificare e Elimina desiderano funzionalità per la nostra applicazione Elenco Bucket. Nella parte successiva di questa serie, implementeremo la paginazione per la nostra home list utente e implementeremo anche alcune altre funzionalità.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!
