Oprettelse af en webapp fra bunden ved hjælp af Python Flask og MySQL:Del 3

I den forrige del af denne selvstudieserie implementerede vi login- og logout-funktionaliteten til vores Bucket List-applikation. I denne del af serien implementerer vi den bagende og den forreste ende, der kræves for, at en bruger kan tilføje og vise emner i en bucket-liste.

Kom godt i gang

Lad os starte med at klone den forrige del til selvstudiet fra GitHub.

git-klon https://github.com/jay3dec/PythonFlaskMySQLApp_Part2.git

Når kildekoden er blevet klonet, skal du navigere til projektbiblioteket og starte webserveren.

cd PythonFlaskMySQLApp_Part2python app.py

Peg din browser til http://localhost:5002/ og du burde have applikationen kørende.

Tilføj Bucket List-elementer

Trin 1:Opret en grænseflade for at tilføje elementer

Vi starter med at oprette en grænseflade til den loggede bruger for at tilføje bucket list-elementer. Naviger til skabelonerne mappe inde i projektmappen, og opret en fil kaldet addWish.html . Åbn addWish.html og tilføj følgende HTML-kode:

     
 
  
Python Flask App
 
 
 
 
  
Opret dit ønske
  
 Titel 
  
 
  
 Indlæg 
  
 
  
  
  
 
 
 
   

Åbn app.py og tilføje en ny rute og metode for at vise Tilføj ønske side.

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

Åbn userHome.html og tilføj et nyt menupunkt for at linke til Tilføj ønske side.

Tilføj ønske

Gem ændringerne og genstart serveren. Peg din browser til http://localhost:5002 og log ind med en gyldig e-mailadresse og adgangskode. Når du er logget ind, skal du klikke på Tilføj ønske linket, og du skulle have vist siden Tilføj ønske.

Trin 2:Databaseimplementering

For at tilføje elementer til bucketlisten skal vi oprette en tabel kaldet tbl_wish .

OPRET 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(NULL, DE) `wish_date` datetime DEFAULT NULL, PRIMÆR NØGLE (`wish_id`)) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

tbl_wish vil have titel , beskrivelse og ID af brugeren, der har oprettet ønsket.

Dernæst skal vi oprette en MySQL-lagret procedure for at tilføje elementer til tbl_wish tabel.

BRUG `BucketList`;DROP procedure HVIS FINDER `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 indsæt i tbl_wish( wish_title, wish_description, wish_user_id, wish_date ) værdier ( p_title, p_description, p_user_id, NOW() );END$$DELIMITER;; 
Trin 3:Opret en Python-metode til at kalde MySQL Stored Procedure 
 

 Opret en metode kaldet addWish i app.py .
 
@app.route('/addWish',methods=['POST'])def addWish():# Kode vil være her 
 

 Da vi vil sende data til denne metode, har vi eksplicit erklæret det i den definerede rute.
 

 Når der foretages et opkald til addWish metode, skal vi validere, om det er et autentisk opkald ved at kontrollere, om sessionsvariablen bruger eksisterer. Når vi har valideret sessionen, læser vi den postede titel og beskrivelse .
 
_title =request.form['inputTitle']_description =request.form['inputDescription']_user =session.get('user')
 

 Når vi har de nødvendige inputværdier, åbner vi en MySQL-forbindelse og kalder den lagrede procedure sp_addWish .
 
conn =mysql.connect()cursor =conn.cursor()cursor.callproc('sp_addWish',(_title,_description,_user))data =cursor.fetchall()
 

 Efter at vi har eksekveret den lagrede procedure, skal vi forpligte ændringerne til databasen.
 
hvis len(data) er 0:conn.commit() return redirect('/userHome')else:return render_template('error.html',error ='Der opstod en fejl!')
 

 Her er den komplette addWish metode.
 
@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() hvis len(data) er 0:conn.commit() return redirect('/userHome') else:return render_template('error.html',error ='Der opstod en fejl!') else:return render_template ('error.html',error ='Uautoriseret adgang') undtagen Undtagelse som e:return render_template('error.html',error =str(e)) finally:cursor.close() conn.close()
 

 Gem al kildekoden og genstart serveren. Peg din browser til http://localhost:5002 og log ind med en gyldig e-mailadresse og adgangskode. Når du er logget ind, skal du klikke på Tilføj ønske link. Indtast titlen og beskrivelse efter dit ønske, og klik på Udgiv . Når ønsket er blevet tilføjet, bør det omdirigere til brugerens hjemmeside. Log ind på MySQL-databasen, og du skulle have ønsket i din tbl_wish bord. 
 
Vis et Bucket List-element
 
Trin 1:Opret en lagret procedure for at hente et ønske
 

 Lad os oprette en MySQL lagret procedure, som vil få ønskerne oprettet af en bruger. Det vil tage brugerens ID som en parameter og returnere et datasæt af ønsker, der er oprettet af det pågældende bruger-id. 
 
BRUG `BucketList`;DROP-procedure HVIS FINDER `sp_GetWishByUser`;DELIMITER $$USE `BucketList`$$CREATE PROCEDURE `sp_GetWishByUser` (IN p_user_id bigint)BEGIN vælg * fra =tbl_user_wish;END_$user_id;I_$user_id;I_$user_id; 
 
Trin 2:Opret en Python-metode til at hente data
 

 Lad os derefter oprette en Python-metode, som kalder sp_GetWishByUser gemt procedure for at få oprettet ønskerne af en bruger. Tilføj en metode kaldet getWish i app.py .
 
@app.route('/getWish')def getWish():try:if session.get('user'):_user =session.get('user') else:return render_template('error.html' , error ='Uautoriseret adgang') undtagen Undtagelse som e:return render_template('error.html', error =str(e))
 

 Som det ses i ovenstående kode, kan denne metode kun kaldes med gyldig bruger session. Når vi har valideret for en gyldig brugersession, opretter vi en forbindelse til MySQL-databasen og kalder den lagrede procedure sp_GetWishByUser .
 
 _user =session.get('user')# Opret forbindelse til MySQL og hent datacon =mysql.connect()cursor =con.cursor()cursor.callproc('sp_GetWishByUser',(_user,))wishes =cursor. fetchall()
 

 Når vi har hentet data fra MySQL, parser vi dataene og konverterer dem til en ordbog så det er nemt at returnere som JSON .
 
wishes_dict =[]for wish in wishes:wish_dict ={ 'Id':wish[0], 'Title':wish[1], 'Description':wish[2], 'Dato':wish[4] }wishes_dict.append(wish_dict)
 

 Efter konvertering af data til en ordbog vi konverterer dataene til JSON og returnere.
 
retur json.dumps(wishes_dict)
 

 Her er den fulde getWish metode.
 
@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 =[] for wish in wishes:wish_dict ={ 'Id':wish[0], 'Title':wish [1], 'Description':wish[2], 'Date':wish[4]} wishes_dict.append(wish_dict) return json.dumps(wishes_dict) else:return render_template('error.html', error ='Uautoriseret Access') undtagen Undtagelse som e:return render_template('error.html', error =str(e))
 
Trin 3:Binding af JSON-data til HTML
 

 Når brugerhjemmesiden er indlæst, kalder vi getWish metode ved hjælp af jQuery AJAX og bind de modtagne data ind i vores HTML. I userHome.html tilføje følgende jQuery AJAX script:
 
 

 Gem ovenstående ændringer og genstart serveren. Når du er logget ind med en gyldig e-mail-adresse og adgangskode, skal du tjekke din browserkonsol, og du skal have hentet ønskeliste fra databasen som vist:
 
[{ "Date":"Fre, 23 Jan 2015 23:26:05 GMT", "Description":"Jeg vil bestige Mount Everest", "Id":1, "Title":"Bestigning Everest" }, { "Date":"Fre, 23 Jan 2015 23:27:05 GMT", "Description":"Jeg vil hoppe fra toppen af ​​et bjerg", "Id":2, "Title":"Bungee Jump "}]
 

 Nu skal vi iterere over JSON data og binde dem ind i HTML. Vi bruger bootstrap list-group for at vise vores ønskeliste elementer. Her er den grundlæggende skabelon for liste-gruppe :
 
  
Ønsketitel
 
Ønskebeskrivelse
 

 

 Tilføj ovenstående HTML-kode til jumbotron div i userHome.html . Sådan ser det ud: 
    

 Nu, hvad vi skal gøre er at oprette den ovenfor viste liste-gruppe div dynamisk for hver ønskeliste og føj den til jumbotron div. Inde i succes-tilbagekaldet af getWish funktionskald, opret en div som vist:
 
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')));
 

 Vi kloner ovenstående div for at oprette liste-gruppen div for hver ønskeliste. Dernæst skal du parse den returnerede JSON streng ind i et JavaScript-objekt. 
 
var wishObj =JSON.parse(res);
 

 Gentag nu over wishObj og for hvert ønskeelement skal du klone en ny div og tilføje den til jumbotronen div.
 
var wish ='';$.each(wishObj, function(index, value) { wish =$(div).clone(); $(wish).find('h4').text(value.Title) ); $(wish).find('p').text(value.Description); $('.jumbotron').append(wish);});
 

 Gem ovenstående ændringer og genstart serveren. Log ind med en gyldig e-mail-adresse og adgangskode, og du bør kunne se listen over ønsker, der er oprettet af den pågældende bruger.