Een webapp maken van krassen met Python Flask en MySQL deel 7

In het vorige deel van deze serie hebben we de uploadfunctionaliteit voor de gebruikers geïmplementeerd en een wens toegevoegd. We hebben ook een paar meer opties toegevoegd met betrekking tot de wens van een gebruiker op de pagina Wens toevoegen. In deze zelfstudie nemen we het naar het volgende niveau door de functionaliteit te implementeren om een ​​bepaalde wens leuk te vinden.

Ermee beginnen 

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

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

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

cd PythonFlaskMySQLApp_Part6 python app.py

Richt uw browser op http: // localhost: 5002 / en u zou de applicatie moeten laten draaien.

De Dashboard-gebruikersinterface maken

We maken een nieuwe pagina met de naam dashboard waar alle wensen van verschillende gebruikers worden getoond. Elke gebruiker kan de wensen die in het dashboard worden weergegeven, leuk vinden of erop reageren. Navigeer dus naar de map Sjablonen en maak een bestand met de naam dashboard.html. Doe open dashboard.html en voeg de volgende HTML-code toe:

        
 
  
Python Flask-app
 
 
 
 
 
  
 
Bungee jumpen
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumpen
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumpen
 
vehicula ut id elit.
 
    
 
 
 
 
 
 
  
 
Bungee jumpen
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumpen
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee jumpen
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
  

Doe open app.py en maak een nieuwe route genaamd / showDashboard. Via deze route zullen we de dashboardpagina weergeven.

@ app.route ('/ showDashboard') def showDashboard (): return render_template ('dashboard.html') 

Wijzig de / validateLogin methode om de gebruiker bij de succesvolle aanmelding bij de dashboardpagina om te leiden in plaats van de startpagina van de gebruiker.

return redirect ('/ showDashboard')

Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 50002 en log in met een geldig e-mailadres en wachtwoord. Nadat u bent ingelogd, zou u de dashboardpagina moeten kunnen zien.

Zoals te zien is in de bovenstaande afbeelding, laten we alle wensen zien die door verschillende gebruikers zijn gecreëerd en geven we toegang aan andere gebruikers om ze leuk te vinden.

Bevolk het Dashboard

Eerst moeten we de gegevens uit de database ophalen om het dashboard te vullen. Laten we dus een opgeslagen procedure maken om de wensen van gebruikers te krijgen.

GEBRUIK 'BucketList'; DROP-procedure IF EXISTS 'sp_GetAllWishes'; DELIMITER $$ GEBRUIK 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetAllWishes' () BEGIN selecteer wish_id, wish_title, wish_description, wish_file_path from tbl_wish where wish_private = 0; END $$ DELIMITER; 

De bovenstaande opgeslagen procedure haalt alle wensen uit tbl_wish die niet als privé zijn gemarkeerd.

Vervolgens maken we een nieuwe Python-methode om de opgeslagen procedure aan te roepen sp_GetAllWishes. Open app.py en voeg de volgende code toe voor de getAllWishes methode.

@ app.route ('/ getAllWishes') def getAllWishes (): try: if session.get ('user'): conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_GetAllWishes') resultaat = cursor.fetchall () wishes_dict = [] voor wish in result: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'FilePath': wish [3] wishes_dict.append (wish_dict) return json.dumps (wishes_dict) else: return render_template ('error.html', error = 'Unauthorized Access') behalve uitzondering als e: return render_template ('error.html', error = str (e))

In de bovenstaande methode hebben we eerst gecontroleerd op een geldige gebruikerssessie en vervolgens een MySQL-verbinding gemaakt. De MySQL-verbinding gebruiken conn, we gebruikten een cursor om de opgeslagen procedure aan te roepen sp_GetAllWishes om de vereiste gegevens te verkrijgen. Nadat de gegevens zijn opgehaald, hebben we het resultaat geparseerd en een juist resultaat geretourneerd JSON draad.

We zullen het bovenstaande gecreëerd noemen / getAllWishes methode wanneer de dashboardpagina wordt geladen. Open dashboard.html en, met behulp van jQuery AJAX, een oproep doen / getAllWishes op document.ready.

$ (function () $ .ajax (url: '/ getAllWishes', type: 'GET', success: function (response) console.log (response);, error: function (error) console.log (fout);  ); )

Sla de bovenstaande wijzigingen op en start de server opnieuw. Nadat u bent aangemeld bij de toepassing, controleert u uw browserconsole en moet u de gegevens die zijn opgehaald uit de database kunnen bekijken.

["Description": "Bungee Jumping", "FilePath": "images_11 / create-a-web-app-from-scratch-using-python-flask-and-mysql-part-7.jpg", "Id" : 10, "Title": "Bungee Jumping", "Description": "Mount Everest climb", "FilePath": "static / Uploads / e3e8f7fa-6cb9-4cc3-9989-a80e5089546f.png", "Id": 11, "Titel": "Mount Everest climb", "Description": "River Rafting", "FilePath": "static / Uploads / dff3a64c-5193-42b5-9cdb-9d67a7bbacab.png", "Id": 14 , "Title": "River Rafting", "Description": "Deep Sea Diving", "FilePath": "static / Uploads / b0656759-c038-46b4-9529-c208aaa6bfb7.png", "Id": 15, "Titel": "Diepzeeduiken"]

Aan de hand van de gegevens uit het antwoord vullen we onze dashboardpagina in. Verwijder eerst de HTML-code tussen de .goed div uit dashboard.html.

In de succes callback van de AJAX-aanroep, parser de antwoord naar een JavaScript-object.

var data = JSON.parse (respons);

We moeten de thumbnail-HTML-code dynamisch maken met behulp van jQuery voor elke set van drie wensen op een rij. Dus laten we eerst een JavaScript-functie maken om de HTML-code dynamisch te maken. Dit is de HTML-code die we dynamisch gaan maken met behulp van jQuery:

 
 
 
App testen
 
Hallo
 
  
 
 
 

We zullen de JavaScript-functie een naam geven CreateThumb. In deze functie maken we de HTML-elementen en voegen we deze toe aan hun bovenliggende elementen om de bovenstaande HTML-code te krijgen.

functie CreateThumb (id, title, desc, filepath) var mainDiv = $ ('
') .attr (' class ',' col-sm-4 col-md-4 '); var thumbNail = $ ('
') .attr (' class ',' thumbnail '); var img = $ ('') .attr (' src ': filepath,' data-holder-rendered ': true,' style ':' height: 150px; width: 150px; display: block '); var caption = $ ('
') .attr (' klasse ',' bijschrift '); var title = $ ('
) .Text (titel); var desc = $ ('
') .Text (af); var p = $ ('
'); var btn = $ ('') .attr (' id ':' btn_ '+ id,' type ':' button ',' class ':' btn btn-danger btn-sm '); var span = $ ('') .attr (' class ':' glyphicon glyphicon-thumbs-up ',' aria-hidden ':' true '); p.append (btn.append (bereik)); caption.append (titel); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (titel); mainDiv.append (miniatuur); return mainDiv; 

De bovenstaande code is vrij eenvoudig, dus ik zal niet ingaan op de details.

We gaan verder en herhalen het geparseerde JSON antwoord en maak de HTML met behulp van de CreateThumb functie. We zijn van plan om drie wensen per rij weer te geven. Dus we controleren dat en creëren telkens een nieuwe rij voor drie wensen. Voeg de volgende code toe aan de succes terugbellen van de AJAX-oproep dashboard.html.

var itemsPerRow = 0; var div = $ ('
') .attr (' klasse ',' rij '); for (var i = 0; i < data.length; i++)  if (itemsPerRow < 3)  if (i == data.length - 1)  div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath)); $('.well').append(div);  else  div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath)); itemsPerRow++;   else  $('.well').append(div); div = $('
') .attr (' klasse ',' rij '); div.append (CreateThumb (data [i] .Id, data [i] .Titel, data [i] .Beschrijving, data [i] .FilePath)); if (i == data.length - 1) $ ('. well'). append (div);  itemsPerRow = 1; 

Sla de wijzigingen op en start de server opnieuw op. Meld u aan bij de toepassing en wanneer u zich op de dashboardpagina bevindt, moet u de wensen van verschillende gebruikers kunnen bekijken, met een optie om ze leuk te vinden.

Laten we vervolgens een toevoegen Klik evenement naar soortgelijke knoppen onder de miniaturen van wensen. Omdat we de knoppen dynamisch hebben gemaakt, moeten we de klikgebeurtenis koppelen aan de knoppen met de methode jQuery op. 

$ (document) .on ('klik', '[id ^ = "btn_"]', function () // Eventfunctie kan hier worden toegevoegd);

Het implementeren van dezelfde functionaliteit

Laten we beginnen met het maken van een tabel die bijhoudt wat een bepaalde wens heeft opgeleverd. Maak een tabel met de naam tbl_likes. 

CREËER TAFEL 'BucketList'. 'Tbl_likes' ('wish_id' INT NOT NULL, 'like_id' INT NOT NULL AUTO_INCREMENT, 'user_id' INT NULL, 'wish_like' INT NULL DEFAULT 0; PRIMARY KEY ('like_id')); 

Wanneer een gebruiker een bepaalde wens leuk of niet leuk vindt, werken we deze tabel bij. Laten we een opgeslagen MySQL-procedure maken om de bovenstaande tabel bij te werken.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, p_like int) BEGIN if (select exists (selecteer 1 uit tbl_likes waar wish_id = p_wish_id en user_id = p_user_id)) update dan tbl_likes set wish_like = p_like waar wish_id = p_wish_id en user_id = p_user_id; anders invoegen in tbl_likes (wish_id, user_id, wish_like) waarden (p_wish_id, p_user_id, p_like); stop als; EINDE

In deze opgeslagen procedure hebben we eenvoudig gecontroleerd of de persoon de wens al leuk vond of niet. Als hij of zij dit al leuk vond, hebben we datzelfde bericht bijgewerkt of een nieuw bericht toegevoegd.

Laten we een Python-methode maken om de bovenstaande opgeslagen procedure aan te roepen.

@ app.route ('/ addUpdateLike', methods = ['POST']) def addUpdateLike (): try: if session.get ('user'): _wishId = request.form ['wish'] _like = request.form ['like'] _user = session.get ('user') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_AddUpdateLikes', (_ wishId, _user, _like)) data = cursor.fetchall () als len (data) 0 is: conn.commit () return json.dumps ('status': 'OK') anders: return render_template ('error.html', error = 'Er is een fout opgetreden!') else: return render_template ('error.html', error = 'Unauthorized Access') behalve uitzondering als e: return render_template ('error.html', error = str (e)) eindelijk: cursor.close () conn.close ( )

Dit is de Python-methode die de opgeslagen procedure zal oproepen sp_AddUpdateLikes. In deze methode hebben we gecontroleerd op een geldige gebruikerssessie en vervolgens de wens doorgegeven ID kaart en net zoals status naar de opgeslagen procedure voor update. Wanneer de gebruiker op de like-knop klikt, moeten we de Python-methode aanroepen / addUpdateLike. Dus voeg de volgende code toe aan de net zoals knop klik gebeurtenisfunctie in dashboard.html. 

$ (document) .on ('klik', '[id ^ = "btn_"]', function () $ .ajax (url: '/ addUpdateLike', methode: 'POST', data: wens: $ (this) .attr ('id'). split ('_') [1], zoals: 1, success: function (response) console.log (response);, error: function (error) console .log (fout);););

Voorlopig hebben we de waarde van like in de bovenstaande oproep hard gecodeerd. Sla de wijzigingen dus op en herstart de server. Log in op de applicatie en klik op de like-knop onder elke wensminiatuur. Nu controleren tbl_likes en je zou daar een inzending moeten hebben.

Conclusie

In dit deel van de zelfstudie hebben we de dashboardpagina van onze applicatie gevuld met de wensen van verschillende gebruikers. We hebben ook een soortgelijke knop aan elk bevestigd, zodat gebruikers een bepaalde wens kunnen waarderen. In het volgende gedeelte zullen we zien hoe je de soortgelijke weergave kunt schakelen en het totale aantal vind-ik-leuks van een bepaalde wens weergeven.

Plaats uw suggesties of eventuele correcties in het opmerkingenveld hieronder. Broncode van deze tutorial is beschikbaar op GitHub.