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

In het vorige deel van deze tutorialserie hebben we de aanmeldings- en uitlogfunctionaliteit geïmplementeerd voor onze bucketlijst-applicatie. In dit deel van de serie zullen we de back-end en front-end implementeren die een gebruiker nodig heeft om bucket-listitems toe te voegen en weer te geven.

Ermee beginnen

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

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

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

cd PythonFlaskMySQLApp_Part2 python app.py

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

Bucketlijstitems toevoegen

Stap 1: maak een interface om items toe te voegen

We beginnen met het maken van een interface voor de ingelogde gebruiker om items uit de bucketlijst toe te voegen. Navigeer naar de templates map in de projectmap en maak een bestand met de naam addWish.html. Open addWish.html en voeg de volgende HTML-code toe:

         
 
  
Python Flask-app
 
 
 
 
  
Maak je wens
  
 Titel 
  
 
  
 Post 
  
 
  
  
  
 
 
 
 
  
  

Open app.py en voeg een nieuwe route en methode toe om de Voeg Wish toe pagina.

@ app.route ('/ showAddWish') def showAddWish (): return render_template ('addWish.html')

Open userHome.html en voeg een nieuw menu-item toe om te linken naar de Voeg Wish toe pagina.

Voeg Wish toe

Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 5002 en log in met een geldig e-mailadres en wachtwoord. Nadat u bent ingelogd, klikt u op de Voeg Wish toe link en je zou de Add Wish-pagina moeten laten weergeven.

Stap 2: Database-implementatie

Om items aan de bucketlijst toe te voegen, moeten we een tabel maken met de naam tbl_wish.

CREËER TABEL 'tbl_wish' ('wish_id' int (11) NOT NULL AUTO_INCREMENT, 'wish_title' varchar (45) DEFAULT NULL, 'wish_description' varchar (5000) DEFAULT NULL, 'wish_user_id' int (11) DEFAULT NULL, 'wish_date' datetime DEFAULT NULL, PRIMARY KEY ('wish_id')) ENGINE = InnoDB AUTO_INCREMENT = 3 STANDAARD CHARSET = latin1; 

tbl_wish zal hebben titel, Omschrijving en de ID kaart van de gebruiker die de wens heeft gecreëerd.

Vervolgens moeten we een opgeslagen MySQL-procedure maken om items toe te voegen aan de tbl_wish tafel.

GEBRUIK 'BucketList'; DROP-procedure IF EXISTS 'BucketList'. '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) BEGIN invoegen in tbl_wish (wish_title, wish_description , wish_user_id, wish_date) waarden (p_title, p_description, p_user_id, NOW ()); END $$ DELIMITER; ; 

Stap 3: Maak een Python-methode om de opgeslagen MySQL-procedure aan te roepen 

Maak een methode genaamd addWish in app.py.

@ app.route ('/ addWish', methods = ['POST']) def addWish (): # Code zal hier zijn 

Aangezien we gegevens op deze methode zullen publiceren, hebben we deze expliciet in de gedefinieerde route aangegeven.

Wanneer een oproep wordt gedaan naar de addWish methode, moeten we valideren of het een authentieke aanroep betreft door te controleren of de sessievariabele gebruiker bestaat. Zodra we de sessie hebben gevalideerd, lezen we de geposte berichten titel en Omschrijving.

_title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('gebruiker') 

Zodra we de vereiste invoerwaarden hebben, openen we een MySQL-verbinding en bellen we de opgeslagen procedure sp_addWish.

conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_addWish', (_ title, _description, _user)) data = cursor.fetchall () 

Nadat we de opgeslagen procedure hebben uitgevoerd, moeten we de wijzigingen in de database vastleggen.

als len (data) 0 is: conn.commit () return redirect ('/ userHome') else: return render_template ('error.html', error = 'Er is een fout opgetreden!') 

Hier is het complete addWish methode.

@ app.route ('/ addWish', methods = ['POST']) def addWish (): try: if session.get ('user'): _title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('user') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_addWish', (_ title, _description, _user)) data = cursor.fetchall () als len (data) 0 is: conn.commit () return redirect ('/ userHome') else: return render_template ('error.html', error = 'Er is een fout opgetreden!') anders: 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 () 

Sla alle broncode op en start de server opnieuw op. Richt uw browser op http: // localhost: 5002 en log in met een geldig e-mailadres en wachtwoord. Nadat u bent ingelogd, klikt u op de Voeg Wish toe link. Ga naar titel en Omschrijving voor uw wens en klik Publiceren. Na het succesvol toevoegen van de wens, zou het moeten verwijzen naar de homepage van de gebruiker. Log in op de MySQL-database en je zou de wens in je hebben tbl_wish tafel. 

Geef een bucketlijstitem weer

Stap 1: Maak een opgeslagen procedure om een ​​wens op te halen

Laten we een opgeslagen MySQL-procedure maken die de door een gebruiker gecreëerde wensen krijgt. Het zal de gebruiker nodig hebben ID kaart als een parameter en retourneer een dataset met wensen die door de specifieke gebruikers-ID zijn gemaakt. 

GEBRUIK 'BucketList'; DROP-procedure IF EXISTS 'sp_GetWishByUser'; DELIMITER $$ GEBRUIK 'BucketList' $$ CREËER PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint) BEGIN selecteer * from tbl_wish where wish_user_id = p_user_id; END $$ DELIMITER; 

Stap 2: Maak een Python-methode voor het ophalen van gegevens

Laten we vervolgens een Python-methode maken die de sp_GetWishByUser opgeslagen procedure om de door een gebruiker gecreëerde wensen te krijgen. Voeg een methode toe genaamd getWish in app.py.

@ app.route ('/ getWish') def getWish (): try: if session.get ('user'): _user = session.get ('user') else: return render_template ('error.html', error = 'Unauthorized Access') behalve uitzondering als e: return render_template ('error.html', error = str (e)) 

Zoals te zien is in de bovenstaande code, kan deze methode alleen met geldig worden gebeld gebruiker sessie. Nadat we een geldige gebruikerssessie hebben goedgekeurd, maken we een verbinding met de MySQL-database en bellen we de opgeslagen procedure sp_GetWishByUser.

 _user = session.get ('user') # Maak verbinding met MySQL en haal data op con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser', (_ user,)) wishes = cursor.fetchall ( )

Zodra we gegevens van MySQL hebben opgehaald, zullen we de gegevens analyseren en omzetten in een woordenboek zodat het gemakkelijk terug te keren is zoals JSON.

wishes_dict = [] voor wens in wensen: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description': wish [2], 'Date': wish [4] wishes_dict. voeg (wish_dict)

Na het converteren van de gegevens in een woordenboek we zullen de gegevens omzetten in JSON En terugkomen.

return json.dumps (wishes_dict)

Hier is het vol getWish methode.

@ app.route ('/ getWish') def getWish (): try: if session.get ('user'): _user = session.get ('user') con = mysql.connect () cursor = con.cursor ( ) cursor.callproc ('sp_GetWishByUser', (_ user,)) wishes = cursor.fetchall () wishes_dict = [] voor wensen in wensen: wish_dict = 'Id': wish [0], 'Title': wish [1] , 'Beschrijving': wish [2], 'Date': wish [4] 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)) 

Stap 3: Bindende JSON-gegevens aan HTML

Wanneer de startpagina van de gebruiker is geladen, bellen we de getWish methode met behulp van jQuery AJAX en bind de ontvangen gegevens in onze HTML. In userHome.html voeg het volgende toe jQuery AJAX-script:

Sla de bovenstaande wijzigingen op en start de server opnieuw. Nadat u bent ingelogd met een geldig e-mailadres en wachtwoord, controleert u uw browserconsole en moet u de verlanglijst uit de database halen zoals getoond:

["Datum": "Vr, 23 januari 2015 23:26:05 GMT", "Beschrijving": "Ik wil de Mount Everest beklimmen", "Id": 1, "Titel": "Climb Everest",  "Datum": "Vrijdag 23 januari 2015 23:27:05 GMT", "Beschrijving": "Ik wil van de top van een berg springen", "Id": 2, "Titel": "Bungee Jump"]

Nu moeten we de. Herhalen JSON gegevens en bind het in de HTML. We zullen bootstrap gebruiken list-groep om onze verlanglijstje-items weer te geven. Hier is de basissjabloon voor list-groep:

  
Wens titel
 
Wensbeschrijving
  

Voeg de bovenstaande HTML-code toe aan de jumbotron div in userHome.html. Hier is hoe het eruit ziet: 

Wat we zullen doen, is het hierboven getoonde creëren list-groep div dynamisch voor elk verlanglijstje en deze toevoegen aan de jumbotron div. Binnen het succes callback van de getWish functieaanroep, maak een div zoals getoond:

var div = $ ('
') .attr (' class ',' list-group ') .append ($ ('') .attr (' class ',' list-group-item active ') .append ($ ('
') .attr (' class ',' list-group-item-heading '), $ ('
') .attr (' class ',' list-group-item-text ')));

We zullen de bovenstaande div klonen om de. Te creëren list-groep div voor elk verlanglijstje. Sorteer vervolgens het geretourneerde artikel JSON teken in een JavaScript-object. 

var wishObj = JSON.parse (res);

Herhaal dit nu wishObj en voor elk wensitem, klone een nieuwe div en voeg deze toe aan de jumbotron div.

var wish = "; $ .each (wishObj, function (index, waarde) wish = $ (div) .clone (); $ (wish) .find ('h4'). text (value.Title); $ ( wish) .find ('p'). text (value.Description); $ ('. jumbotron'). append (wish););

Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in met een geldig e-mailadres en wachtwoord en je zou in staat moeten zijn om de lijst met wensen te bekijken die door de specifieke gebruiker is gemaakt.

Conclusie

In deze zelfstudie hebben we een interface geïmplementeerd voor een ingelogde gebruiker om een ​​wens te creëren. We hebben ook de vereiste methoden en opgeslagen procedures voor de database geïmplementeerd om de gemaakte wensen op te halen en weer te geven op de startpagina van de gebruiker. 

In het volgende deel van deze serie zullen we zien hoe het Bewerk en Verwijder functionaliteit voor de verlanglijst die wordt weergegeven op de startpagina van de gebruiker.

Broncode van deze tutorial is beschikbaar op GitHub.

Laat het ons weten in de reacties hieronder!