Crearea unei aplicații Web de la zero utilizând Python Flack și MySQL Partea 4

În partea anterioară a acestei serii tutorial am implementat funcționalitatea necesară pentru ca un utilizator conectat să adauge o dorință. De asemenea, am văzut cum să afișăm dorințele introduse de un utilizator pe pagina de pornire a utilizatorului.

În această parte vom implementa funcționalitatea pentru editarea și ștergerea dorințelor introduse de un utilizator.

Noțiuni de bază

Să începem prin clonarea părții anterioare a tutorialului de la GitHub.

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

Odată ce codul sursă a fost clonat, navigați la directorul de proiect și porniți serverul web. 

cd PythonFlaskMySQLApp_Part3 Python app.py

Punctați browser-ul dvs. la http: // localhost: 5002 / și ar trebui să aveți aplicația să ruleze.

Editarea listei de dorințe

Pasul 1: Afișați pictograma de editare

Legăm deja datele primite folosind jQuery în HTML. Vom modifica codul respectiv și vom folosi șabloanele jQuery pentru a facilita legarea datelor. De asemenea, vom adăuga un Editați | × pictograma HTML pentru a oferi o modalitate de a actualiza dorința. Deschis userHome.html și include o referință la șabloanele jQuery.

Eliminați existența Lista-grup div și înlocuiți-l cu următorul cod HTML:

În interiorul UL cu clasa Lista-grup ne vom lega datele. Definiți a listTemplate după cum se arată în corpul HTML:

Modificați jQuery AJAX de apel de succes pentru a lega datele la listTemplate.

De asemenea, includeți câteva stiluri în userHome.html:

Salvați toate modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 5002 și conectați-vă utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, ar trebui să puteți vedea dorințele create de utilizator.

Pasul 2: Afișați popupul de editare

Vom utiliza Bootstrap pentru a afișa un pop-up pentru a oferi o interfață pentru a edita dorințele. Includeți o referință la Bootstrap în userHome.html.

Odată ce referința a fost inclusă, adăugați următorul cod HTML userHome.html.

 
 
 
 ×Închide  
Actualizați dorința
 
 
 
 
 Titlu:  
 
 Descriere:  
 
 
 
 Închide Actualizați 
 
 
 

HTML-ul de mai sus va servi ca pop-up. Când utilizatorul face clic pe Editați | × pictograma care va apărea pe ecran. Am adăugat deja atributele date-țintă și date de comutare care va declanșa afișarea modală.

Salvați modificările de mai sus și reporniți aplicația. După ce v-ați conectat la aplicație, faceți clic pe Editați | × pictograma și ar trebui să puteți vizualiza pop-ul.

Pasul 3: Completați popupul de editare

Când utilizatorul face clic pe pictograma de editare, vom afișa fereastra de actualizare cu titlu și Descriere a updata. Pentru a începe, mai întâi avem nevoie de ID-ul dorit pentru a prelua detaliile dorite când utilizatorul face clic pe pictograma de editare. Deci, modificați codul șablonului jQuery pentru a include un atribut suplimentar date id- pe elementul de ancorare de editare.

Am atașat de asemenea onclick eveniment pentru a apela metoda Editați | ×. În interiorul funcției Edit, vom face un apel AJAX la o metodă python numită getWishById care va returna detaliile dorinței.

(id: $ (elm) .attr ('data-id'), tastați: 'POST', succes: console.log (res);, eroare: funcție (eroare) console.log (eroare);); 

Apoi, deschide-te app.py și să creeze o metodă numită getWishById. Folosind această metodă, vom obține detaliile dorite în baza de date.

@ app.route ('/ getWishById', methods = ['POST']) def getWishById (): try: if session.get ('user'): _id = request.form ['id'] _user = ("utilizator") conn = mysql.connect () cursor = conn.cursor () cursor.callproc (' Id ': result [0] [0],' Titlu ': rezultat [0] [1],' Descriere ': result [0] [2] return json.dumps (wish) else: return render_template .html ', error =' Acces neautorizat ') cu excepția excepției ca e: return render_template (' error.html ', error = str (e)) 

După cum puteți vedea în metoda de mai sus, am trecut în ID-ul dorit la această metodă și primește datele din baza de date folosind numele de utilizator și ID-ul dorit. Odată ce datele au fost preluate, acestea convertesc aceste date într-o listă și apoi o returnează ca fiind JSON date.

Apoi, să creăm procedura necesară stocată MySQL pentru a prelua datele din baza de date.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURĂ 'sp_GetWishById' (IN p_wish_id bigint, În p_user_id bigint) BEGIN selectați * din tbl_wish unde wish_id = p_wish_id și wish_user_id = p_user_id; SFÂRȘIT

Codul afișat mai sus este procedura stocată pentru a obține detalii de dorință deosebită folosind ID-ul dorit și numele de utilizator.

Salvați modificările și reporniți serverul. După ce v-ați conectat la aplicație, faceți clic pe Editați | × pictograma și ar trebui să aveți detaliile înregistrate în consola browserului.

Pentru a lega datele primite în popup HTML, eliminați mai întâi date-țintă și date de comutare atributele din eticheta de ancorare a pictogramei de editare. Apoi adăugați următorul cod la Editați | × Funcția de repetare a succesului funcției Java pentru a popula și a declanșa popup-ul.

// Parsează șirul primit JSON var data = JSON.parse (res); // Populați Pop Up $ ('# editTitle'). Val (date [0] ['Titlu']); . $ ( '# EditDescription') val (date [0] [ 'Descriere']); // Activați Pop Up $ ('# editModal'). Modal ();

Salvați modificările și reporniți serverul. După ce v-ați conectat la aplicație, încercați să faceți clic pe pictograma de editare și ar trebui să aveți un pop-up cu titlul și descrierea.

Pasul 4: actualizați detaliile dorite

Pentru a implementa funcționalitatea de actualizare, să creăm mai întâi o procedură memorată MySQL.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURĂ 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, p_user_id bigint) BEGIN update tbl_wish set wish_title = p_description unde wish_id = p_wish_id și wish_user_id = p_user_id; END $$ DELIMITER;

După cum se vede în procedura stocată mai sus, vom trece în modul modificat titlu și Descriere impreuna cu ID-ul a dorinței și a utilizatorului de a actualiza detaliile din baza de date.

Apoi, să creați o nouă metodă numită updateWish pentru a actualiza detaliile. Aici este updateWish metodă:

@ app.route ('/ updateWish', methods = ['POST']) Definiți updateWish (): try: dacă session.get ('user'): _user = session.get (' ['title'] _description = request.form ['descriere'] _wish_id = request.form ['id'] conn = mysql.connect () cursor = ()) data = cursor.fetchall () dacă len (date) este 0: conn.commit () întoarce json.dumps ('status': 'OK' 'status': 'ERROR') cu excepția Excepție ca e: retur json.dumps ('status': 'Acces neautorizat') în final: cursor.close 

După cum se vede în codul de mai sus, după validarea unei sesiuni valide, am colectat datele trimise și am sunat la procedura stocată sp_updateWish pentru a actualiza detaliile.

Pentru a apela updateWish metoda, trebuie să atașăm un eveniment pe Actualizați clic pe buton. Deci, denumiți butonul de actualizare btnUpdate și atașați un onclick eveniment așa cum este arătat:

$ ('# btnUpdate') faceți clic pe (funcția () $ .jax (url: '/ updateWish', data: titleTitle ' ') .val (), id: localStorage.getItem (' editId '), tip:' POST ', succes: function (res) $ (' edit ') popula grilă, eroare: funcție (eroare) console.log (eroare);));

După cum se vede în codul de mai sus, am adunat editId din localStorage, astfel încât în ​​interiorul Editați | × funcția salvați ID-ul în localStorage.

localStorage.setItem ( 'editId', $ (ulm) .attr ( 'date id'));

Înfășurați getWish AJAX apel într-o funcție, astfel încât să putem apela din nou după ce datele au fost actualizate.

funcția (res) var wishObj = JSON.parse (res); $ ('# ulist'), gol (url: '/ getWish' ); $ ('# listTemplate'); tmpl (requestObj) .appendTo ('# ulist'); eroare: funcția (eroare) console.log (error); 

Suna GetWishes în apelul de succes al Actualizați AJAX apel.

$ ('# btnUpdate') faceți clic pe (funcția () $ .jax (url: '/ updateWish', data: titleTitle ' ') .val (), id: localStorage.getItem (' editId '), tip:' POST ', succes: function (res) $ (' edit ') popula grilă GetWishes ();, eroare: funcție (eroare) console.log (eroare);));

Salvați toate modificările și reporniți serverul. După ce v-ați conectat la aplicație, încercați să modificați dorințele disponibile create de utilizator.

Ștergerea unei dorințe

Pasul 1: Afișați un popup de confirmare

Adăugați următorul cod HTML la userHome.html.

 
 
 
 
Veți șterge acest lucru pentru totdeauna !!
 
 
 Anulare Șterge 
 
 
 

Adăugați o pictogramă de ștergere în interiorul listTemplate prin adăugarea următorului cod HTML:

Dacă faceți clic pe pictograma de ștergere de mai sus, vom apela o funcție JavaScript numită Confirmă ștergerea unde vom declanșa fereastra de confirmare.

funcția ConfirmDelete (elem) localStorage.setItem ('deleteId', $ (elem) .attr ('data-id')); $ ( '# DeleteModal') modal ().; 

Salvați modificările și reporniți serverul. După ce v-ați conectat, faceți clic pe pictograma ștergere din lista dorințelor și ar trebui să puteți vedea fereastra de confirmare.

Pasul 2: Ștergeți o dorință

Pentru a implementa funcția Ștergeți dorința, mai întâi să creăm procedura stocată MySQL pentru a fi șters.

DELIMITER $$ UTILIZARE 'BucketList' $$ CREATE PROCEDURE 'sp_deleteWish' (IN p_wish_id bigint, IN p_user_id bigint) BEGIN șterge din tbl_wish unde wish_id = p_wish_id și wish_user_id = p_user_id; END $$ DELIMITER;

Procedura de mai sus preia ID-ul dorit și ID-ul utilizatorului și șterge dorința corespunzătoare din baza de date.

Apoi, să creăm o metodă înăuntru app.py pentru a apela procedura sp_deleteWish. 

Vom crea o metodă numită deleteWish pentru dorința de ștergere.

@ app.route ('/ deleteWish', methods = ['POST']) def deleteWish (): try: dacă session.get ('user'): _id = request.form ['id'] _user = ("utilizator") conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_deleteWish', (_ id, _user)) result = cursor.fetchall comanda () returneaza json.dumps ('status': 'OK') else: returneaza json.dumps ('status': 'A apărut o eroare') else return render_template (error.html ' "Acces neautorizat") cu excepția Excepție ca e: returnează json.dumps ('status': str (e)) în final: cursor.close () conn.close 

În metoda de mai sus, am validat mai întâi sesiunea. Odată ce am validat sesiunea de utilizator, folosind ID-ul dorit și ID-ul de utilizator pe care l-am denumit procedura stocată sp_deleteWish.

Pentru a apela metoda de mai sus deleteWish, adăugați un onclick la butonul Ștergere din fereastra de confirmare a ștergerii.

Șterge

Creați o funcție JavaScript numită Șterge, și în interiorul Delete efectuați un apel AJAX la metoda python deleteWish.

(url: '/ deleteWish', date: id: localStorage.getItem ('deleteId'), tastați: 'POST', succes: function (res) var result = JSON. paralel (res); if (result.status == 'OK') $ ('deleteModal'). : funcția (eroare) console.log (eroare);); 

Cu privire la apelul de succes al celor de mai sus Șterge , vom verifica starea returnată și, dacă este în regulă, vom ascunde fereastra de tip pop-up și vom reîncărca dorințele.

Salvați modificările și reporniți serverul. După ce v-ați conectat la aplicație, încercați să ștergeți o dorință de pe pagina de pornire a utilizatorului.

Concluzie

În această parte a seriei am văzut cum să implementăm Editați | × și Șterge dorim funcționalitate pentru aplicația noastră pentru cupă. În următoarea parte a acestei serii, vom implementa paginarea pentru lista noastră de utilizatori și vom implementa și câteva alte caracteristici.

Codul sursă din acest tutorial este disponibil pe GitHub.

Spuneți-ne gândurile dvs. în comentariile de mai jos!