Share
În partea anterioară a acestei serii de tutorial, am implementat funcția de conectare și deconectare pentru aplicația Listă de Bucket. În această parte a seriei, vom implementa capătul din spate și capătul frontal necesare pentru ca un utilizator să adauge și să afișeze elementele listei de cupă.
Să începem prin clonarea părții anterioare pentru tutorialul de la GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part2.git
Odată ce codul sursă a fost clonat, navigați la directorul de proiect și porniți serverul web.
cd PythonFlaskMySQLApp_Part2 Python app.py
Punctați browser-ul dvs. la http: // localhost: 5002 / și ar trebui să aveți aplicația să ruleze.
Vom începe prin crearea unei interfețe pentru ca utilizatorul conectat să adauge articole din lista. Navigați la template-uri folder din directorul de proiect și creați un fișier numit addWish.html. Deschis addWish.html și adăugați următorul cod HTML:
Python Cup Bucket List App Python Flask App
Deschis app.py și adăugați o nouă rută și o metodă pentru a afișa Adăugați dorință pagină.
Accentsconagua
@ app.route ('/ showAddWish') def showAddWish (): returnați render_template ('addWish.html')Deschis userHome.html și adăugați un element de meniu nou pentru a vă conecta la Adăugați dorință pagină.
Salvați 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, faceți clic pe Adăugați dorință și ar trebui să apară pagina Add Wish.
Pentru a adăuga elemente în lista de cupă, trebuie să creați un tabel numit tbl_wish.
CREATE TABLE 'tbl_wish' ('desire_id' int (11) NU NULL AUTO_INCREMENT, 'wish_title' varchar (45) DEFAULT NULL, 'wish_description' varchar (5000) DEFAULT NULL, 'wish_user_id' int (11) datetime DEFAULT NULL, KEY PRIMARY ('wish_id')) MOTOR = InnoDB AUTO_INCREMENT = 3 DEFAULT CHARSET = latin1; tbl_wish vom avea titlu, Descriere si ID-ul a utilizatorului care a creat dorința.
Apoi, trebuie să creați o procedură memorată MySQL pentru a adăuga elemente la tbl_wish masa.
USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "BucketList". "Sp_addWish"; (IN p_description varchar (1000), IN p_user_id bigint) BEGIN inserați în tbl_wish (wish_title, wish_description , wish_user_id, wish_date) valori (p_title, p_description, p_user_id, NOW ()); END $$ DELIMITER; ;
Creați o metodă numită addWish în app.py.
@ app.route ('/ addWish', methods = ['POST']) def addWish (): # Codul va fi aici Deoarece vom posta date la această metodă, l-am declarat în mod explicit în traseul definit.
Când se efectuează un apel către addWish , trebuie să validăm dacă este un apel autentic, verificând dacă variabila de sesiune utilizator există. Odată ce am validat sesiunea, vom citi mesajul publicat titlu și Descriere.
_title = request.form ['inputTitle'] _description = request.form ['inputDescription'] _user = session.get ('utilizator') După ce vom avea valorile de intrare necesare, vom deschide o conexiune MySQL și vom apela procedura stocată sp_addWish.
conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_addWish', date, _description, _user) data = cursor.fetchall După ce am executat procedura stocată, trebuie să angajăm modificările în baza de date.
dacă lin (date) este 0: conn.commit () return redirect ('/ userHome') alt: return render_template ('error.html', error = 'A apărut o eroare! Aici este completă addWish metodă.
@ app.route ('/ addWish', methods = ['POST']) def addWish (): try: dacă session.get ('user'): _title = request.form ['inputTitle'] _description = ['input_product'] _user = session.get ('user') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_addWish' (), dacă len (date) este 0: conn.commit () retur redirecționare ('/ userHome') alt: return render_template ('error.html', eroare = 'A apărut o eroare! ("error.html", error = str (e)) în cele din urmă: cursor.close () conn.close () Salvați întregul cod sursă ș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, faceți clic pe Adăugați dorință legătură. Introduceți titlu și Descriere pentru dorința dvs. și faceți clic pe Publica. La adăugarea cu succes a dorinței, ar trebui să se redirecționeze către pagina principală a utilizatorului. Conectați-vă la baza de date MySQL și ar trebui să aveți dorința în dvs. tbl_wish masa.
Să creăm o procedură memorată MySQL care va obține dorințele create de un utilizator. Aceasta va lua utilizatorul ID-ul ca parametru și returnați un set de date de dorințe create de ID-ul particular al utilizatorului.
USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "sp_GetWishByUser"; DELIMITER $$ UTILIZAȚI 'BucketList' $$ CREATE PROCEDURE 'sp_GetWishByUser' (IN p_user_id bigint) BEGIN selectați * din tbl_wish unde wish_user_id = p_user_id; END $$ DELIMITER;
Apoi, să creăm o metodă Python care va apela sp_GetWishByUser procedură stocată pentru a obține dorințele create de un utilizator. Adăugați o metodă numită getWish în app.py.
@ app.route ('/ getWish') def getWish (): încercați: if session.get ('user'): _user = session.get (' "Acces neautorizat") cu excepția excepției ca e: return render_template ('error.html', error = str (e)) Așa cum se vede în codul de mai sus, această metodă poate fi apelată numai cu valid utilizator sesiune. După validarea unei sesiuni de utilizator valide, vom crea o conexiune la baza de date MySQL și vom apela procedura stocată sp_GetWishByUser.
_user = session.get ('user') # Conectați-vă la MySQL și extrageți datele con = mysql.connect () cursor = con.cursor () cursor.callproc ('sp_GetWishByUser' )Odată ce am preluat datele din MySQL, vom analiza datele și vom transforma datele în a dicţionar astfel că este ușor să reveniți ca JSON.
wishes_dict = [] pentru dorință în dorințe: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Descriere': wish [2], 'Date': wish [4] wishes_dict. append (wish_dict)
După conversia datelor într-o dicţionar vom converti datele JSON și întoarcere.
retur json.dumps (wishes_dict)
Aici este plinul getWish metodă.
@ app.route ('/ getWish') def getWish (): try: dacă session.get ('user'): _user = session.get ('user') con = mysql.connect ) cursor.callproc ('sp_GetWishByUser', (_ user,)) wishes = cursor.fetchall () wishes_dict = [] , "Descriere": dorință [2], "Data": dorință [4] wishes_dict.append (wish_dict) returnează json.dumps (wishes_dict) altceva: return render_template ('error.html', error = 'Acces neautorizat') cu excepția Excepție ca e: return render_template ('error.html', error = str (e)) Când pagina de pornire a utilizatorului este încărcată, vom apela getWish folosind metoda jQuery AJAX și leagă datele primite în HTML. În userHome.html adăugați următoarele jQuery Script AJAX:
Salvați modificările de mai sus și reporniți serverul. După ce v-ați conectat cu o adresă de e-mail și o parolă valabilă, verificați consola browserului dvs. și ar trebui să aveți lista de dorințe extras din baza de date așa cum este prezentat:
["Data:" Vineri, 23 ianuarie 2015 23:26:05 GMT "," Descriere ":" Vreau să urc pe Muntele Everest "," Id ": 1, "Data": "Vi, 23 Jan 2015 23:27:05 GMT", "Descriere": "Vreau să sară din partea de sus a unui munte", "Id": 2, "Titlu"
Acum, trebuie să repetăm JSON date și legați-l în HTML. Vom folosi bootstrap Lista-grup pentru a afișa elementele listă de dorințe. Iată șablonul de bază pentru Lista-grup:
Titlul dorit
Descrierea dorințelor
Adăugați codul HTML de mai sus la Jumbotron div in userHome.html. Iată cum arată:
Acum, ceea ce vom face este să creați cele prezentate mai sus Lista-grup div dinamic pentru fiecare intrare din lista de dorințe și adăugați-o la Jumbotron div. În interiorul apelului de succes al getWish funcția apel, creați un div așa cum este arătat:
var div = $ ('
