Een web-app vanaf nul maken met Python Flask en MySQL:deel 4

In het vorige deel van deze tutorialserie hebben we de vereiste functionaliteit geïmplementeerd voor een ingelogde gebruiker om een wens toe te voegen. We hebben ook gezien hoe de wensen die door een gebruiker zijn ingevoerd op de startpagina van de gebruiker kunnen worden weergegeven.

In dit deel implementeren we de functionaliteit voor het bewerken en verwijderen van de wensen die door een gebruiker zijn ingevoerd.

Aan de slag

Laten we beginnen met het klonen van het vorige deel van de tutorial van GitHub.

git-kloon https://github.com/jay3dec/PythonFlaskMySQLApp_Part3.git

Nadat de broncode is gekloond, navigeert u naar de projectdirectory en start u de webserver.

cd PythonFlaskMySQLApp_Part3python app.py

Ga met je browser naar http://localhost:5002/ en je zou de app moeten laten draaien.

De verlanglijst bewerken

Stap 1:geef het pictogram Bewerken weer

We binden de ontvangen gegevens al met jQuery aan onze HTML. We zullen die code aanpassen en jQuery-sjablonen gebruiken om het gemakkelijker te maken om gegevens te binden. We voegen ook een edit toe icoon naar onze HTML om een manier te bieden om de wens bij te werken. Open userHome.html en voeg een verwijzing toe naar jQuery-sjablonen.

Verwijder de bestaande list-group div en vervang het door de volgende HTML-code:

Binnen de UL met klasse list-group we zullen onze gegevens binden. Definieer een listTemplate zoals weergegeven in de hoofdtekst van de HTML:

Wijzig de jQuery AJAX succesvolle callback om de gegevens te binden aan de listTemplate .

Neem ook enkele stijlen op in userHome.html :

Sla alle wijzigingen op en start de server opnieuw op. Ga met uw browser naar http://localhost:5002 en meld u aan met een geldig e-mailadres en wachtwoord. Eenmaal ingelogd, zou je de wensen van de gebruiker moeten kunnen zien.

Stap 2:Geef de pop-up Bewerken weer

We zullen Bootstrap gebruiken om een pop-up weer te geven om een interface te bieden om de wensen te bewerken. Voeg een verwijzing naar Bootstrap toe in userHome.html .

Zodra de verwijzing is opgenomen, voegt u de volgende HTML toe aan userHome.html .

     Wens bijwerken
 
    Titel:  
  Beschrijving:

De bovenstaande HTML zal dienen als de pop-up. Wanneer de gebruiker op edit . klikt icoon dat de pop-up zal tonen. We hebben de attributen data-target al toegevoegd en data-toggle die de modale pop-up zal activeren.

Sla de bovenstaande wijzigingen op en start de app opnieuw. Eenmaal aangemeld bij de applicatie, klik op de edit icoon en je zou de pop-up moeten kunnen zien.

Stap 3:Vul de pop-up Bewerken in

Wanneer de gebruiker op het bewerkingspictogram klikt, tonen we de update-pop-up met de title en description updaten. Om te beginnen, hebben we eerst de wens-ID nodig om de specifieke wensdetails op te halen zodra de gebruiker op het bewerkingspictogram klikt. Pas dus de jQuery-sjablooncode aan om een extra attribuut data-id op te nemen op het ankerelement bewerken.

We hebben ook een onclick . bijgevoegd gebeurtenis om de methode Edit aan te roepen . Binnen de functie Bewerken doen we een AJAX-aanroep naar een python-methode genaamd getWishById die de wensdetails zal retourneren.

function Edit(elm) { $.ajax({ url:'/getWishById', data:{ id:$(elm).attr('data-id') }, type:'POST', succes:function (res) { console.log(res); }, fout:function(error) { console.log(error); } });}

Open vervolgens app.py en maak een methode met de naam getWishById . Met deze methode halen we de specifieke wensdetails uit de database.

@app.route('/getWishById',methods=['POST'])def getWishById():try:if session.get('user'):_id =request.form['id'] _user =session.get('user') 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]}) return json.dumps(wish) else:return render_template ('error.html', error ='Ongeautoriseerde toegang') behalve uitzondering als e:return render_template('error.html',error =str(e))

Zoals je kunt zien in de bovenstaande methode, hebben we de wens-ID doorgegeven aan deze methode en het haalt de gegevens uit de database met behulp van de user ID en wish ID . Nadat de gegevens zijn opgehaald, worden die gegevens geconverteerd naar een lijst en geretourneerd als JSON gegevens.

Laten we vervolgens de vereiste MySQL-opgeslagen procedure maken om gegevens uit de database op te halen.

DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishById`(IN p_wish_id bigint,In p_user_id bigint)BEGINselecteer * van tbl_wish waar wish_id =p_wish_id en wish_user_id =ppre>user_id; 
 De hierboven getoonde code is de opgeslagen procedure om specifieke wensdetails te krijgen met behulp van de wish ID en user ID .
 
 Sla de wijzigingen op en start de server opnieuw op. Eenmaal aangemeld bij de applicatie, klik op de edit icoon en je zou de details moeten hebben ingelogd in je browserconsole.
 
 Om de ontvangen gegevens aan de HTML-pop-up te binden, verwijdert u eerst de data-target en data-toggle attributen uit de ankertag van het bewerkingspictogram. Voeg vervolgens de volgende code toe aan de Edit Succesvolle callback van JavaScript-functie om de pop-up te vullen en te activeren.
 // Ontleden de ontvangen JSON stringvar data =JSON.parse(res);//Populate de Pop up$('#editTitle').val(data[0]['Title']);$('# editDescription').val(data[0]['Description']);// Activeer de pop-up$('#editModal').modal();
 
 Sla de wijzigingen op en start de server opnieuw op. Zodra u bent aangemeld bij de toepassing, probeert u op het bewerkingspictogram te klikken en u zou de pop-up met de titel en beschrijving moeten hebben.
    Stap 4:update wensdetails
 
 Laten we eerst een MySQL-opgeslagen procedure maken om de updatefunctionaliteit te implementeren.
 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)BEGINupdate tbl_wish set wish_title =p_title, wish_description =p_description waar wish_id =p_wish_id en wish_user_id =p_user_id;END$$DELIMITER;
 
 Zoals te zien is in de opgeslagen procedure hierboven, zullen we de gewijzigde title . doorgeven en description samen met de ID van de wens en de gebruiker om de gegevens in de database bij te werken.
 
 Laten we vervolgens een nieuwe methode maken genaamd updateWish om de details bij te werken. Hier is de updateWish methode:
 @app.route('/updateWish', methods=['POST'])def updateWish():try:if session.get('user'):_user =session.get('user') _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() als len(data) 0 is:conn.commit() return json.dumps({'status':'OK'}) else:return json. dumps({'status':'ERROR'}) behalve uitzondering als e:return json.dumps({'status':'Ongeautoriseerde toegang'}) eindelijk:cursor.close() conn.close()
 
 Zoals te zien is in de bovenstaande code, hebben we na validatie voor een geldige sessie de geposte gegevens verzameld en de opgeslagen procedure sp_updateWish aangeroepen. om de details bij te werken.
 
 Om de updateWish . aan te roepen methode, moeten we een evenement toevoegen aan de Update knop klik. Geef de updateknop dus de naam btnUpdate en voeg een onclick . toe evenement zoals weergegeven:
 $('#btnUpdate').click(function() { $.ajax({ url:'/updateWish', data:{ title:$('#editTitle').val(), beschrijving:$( '#editDescription').val(), id:localStorage.getItem('editId') }, typ:'POST', succes:function(res) { $('#editModal').modal('hide'); // Vul het raster opnieuw in }, error:function(error) { console.log(error); } })});
 
 Zoals te zien is in de bovenstaande code, hebben we de editId . verzameld van localStorage , dus binnen de Edit functie bewaar de ID naar localStorage .
 localStorage.setItem('editId',$(elm).attr('data-id'));
 
 Rond de getWish af AJAX roept een functie aan, zodat we deze opnieuw kunnen aanroepen zodra de gegevens zijn bijgewerkt.
 function GetWishes() { $.ajax({ url:'/getWish', type:'GET', success:function(res) { var wishObj =JSON.parse(res); $('#ulist') .empty(); $('#listTemplate').tmpl(wishObj).appendTo('#ulist'); }, error:function(error) { console.log(error); } });}
 
 Bel de GetWishes functie in de succesvolle callback van de update AJAX-oproep.
 $('#btnUpdate').click(function() { $.ajax({ url:'/updateWish', data:{ title:$('#editTitle').val(), beschrijving:$( '#editDescription').val(), id:localStorage.getItem('editId') }, typ:'POST', succes:function(res) { $('#editModal').modal('hide'); // Vul het raster opnieuw in GetWishes(); }, error:function(error) { console.log(error); } })});
 
 Sla alle wijzigingen op en start de server opnieuw op. Nadat u bent aangemeld bij de applicatie, probeert u de beschikbare wensen die door de gebruiker zijn gemaakt, te bewerken.
 Een wens verwijderen
 Stap 1:Toon een bevestigingspop-up
 
 Voeg de volgende HTML-code toe aan userHome.html .
     Je gaat dit voor altijd verwijderen !!
 
    
 
 

 
 Voeg een verwijderpictogram toe in de listTemplate door de volgende HTML toe te voegen:
 
 
 Als we op het bovenstaande verwijderpictogram klikken, roepen we een JavaScript-functie aan met de naam ConfirmDelete waar we de bevestigingspop-up zullen activeren.
 functie ConfirmDelete(elem) { localStorage.setItem('deleteId', $(elem).attr('data-id')); $('#deleteModal').modal();}
 
 Sla de wijzigingen op en start de server opnieuw op. Nadat u bent ingelogd, klikt u op het verwijderpictogram in de verlanglijst. U zou de bevestigingspop-up moeten kunnen zien.
    Stap 2:een wens verwijderen
 
 Laten we eerst de MySQL-opgeslagen procedure maken om te verwijderen om de functionaliteit voor het verwijderen van de wens te implementeren.
 DELIMITER $$GEBRUIK `BucketList`$$CREATE PROCEDURE `sp_deleteWish` (IN p_wish_id bigint,IN p_user_id bigint)BEGINverwijder uit tbl_wish waar wish_id =p_wish_id en wish_user_id =p_user_id;END$;MITER$;MITER$; 
 De bovenstaande procedure neemt de wens-ID en gebruikers-ID in en verwijdert de bijbehorende wens uit de database.
 
 Laten we vervolgens een methode maken binnen app.py om de procedure sp_deleteWish aan te roepen . 
 
 We maken een methode met de naam deleteWish voor het verwijderen van een wens.
 @app.route('/deleteWish',methods=['POST'])def deleteWish():try:if session.get('user'):_id =request.form['id'] _user =session.get('user') conn =mysql.connect() cursor =conn.cursor() cursor.callproc('sp_deleteWish',(_id,_user)) result =cursor.fetchall() als len(resultaat) 0 is :conn.commit() return json.dumps({'status':'OK'}) else:return json.dumps({'status':'Er is een fout opgetreden'}) else:return render_template('error.html' ,error ='Ongeautoriseerde toegang') behalve uitzondering als e:return json.dumps({'status':str(e)}) eindelijk:cursor.close() conn.close()
 
 Bij de bovenstaande methode hebben we eerst de sessie gevalideerd. Nadat we de gebruikerssessie hebben gevalideerd, hebben we met behulp van de wens-ID en de gebruikers-ID de opgeslagen procedure sp_deleteWish aangeroepen. .
 
 Om de bovenstaande methode deleteWish aan te roepen , voeg een onclick toe gebeurtenis naar de knop Verwijderen in de pop-up voor het bevestigen van het verwijderen.
 
 
 Maak een JavaScript-functie met de naam Delete , en binnen Delete een AJAX-aanroep doen naar de python-methode deleteWish .
 function Delete() { $.ajax({ url:'/deleteWish', data:{ id:localStorage.getItem('deleteId') }, type:'POST', succes:function(res) { var result =JSON.parse(res); if (result.status =='OK') { $('#deleteModal').modal('hide'); GetWishes(); } else { alert(result.status); } }, fout:functie(fout) { console.log(fout); } });}
 
 Op de succesvolle callback van de bovenstaande Delete functie, zullen we controleren op de geretourneerde status, en als het OK is, verbergen we de modale pop-up en laden de wensen opnieuw.
 
 Sla de wijzigingen op en start de server opnieuw op. Nadat u bent aangemeld bij de toepassing, probeert u een wens van de startpagina van de gebruiker te verwijderen.