Crearea unei aplicații Web de la zero utilizând Python Flack și MySQL Partea 7

În partea anterioară a acestei serii, am implementat funcționalitatea de încărcare a imaginilor pentru utilizatori, adăugând în același timp o dorință. De asemenea, am adaugat cateva optiuni legate de dorinta unui utilizator pe pagina Add Wish. În acest tutorial, vom trece la nivelul următor prin implementarea funcționalității pentru a vă place o anumită dorință.

Noțiuni de bază 

Să începem prin clonarea părții anterioare a tutorialului de la GitHub.

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

Odată ce codul sursă a fost clonat, navigați la directorul de proiect și porniți serverul web. 

cd PythonFlaskMySQLApp_Part6 Python app.py

Punctați browser-ul dvs. la http: // localhost: 5002 / și ar trebui să aveți aplicația să ruleze.

Crearea interfeței UI

Vom crea o nouă pagină numită tablou de bord unde vor fi afișate toate dorințele de la diferiți utilizatori. Orice utilizator poate dori sau să comenteze dorințele afișate în tabloul de bord. Așadar, navigați la dosarul Șabloane și creați un fișier numit dashboard.html. Deschide dashboard.html și adăugați următorul cod HTML:

        
 
  
Python Flask App
 
 
 
 
 
  
 
Bungee Jumping
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee Jumping
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee Jumping
 
vehicula ut id elit.
 
    
 
 
 
 
 
 
  
 
Bungee Jumping
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee Jumping
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
 
Bungee Jumping
 
vehicula ut id elit.
 
    
 
 
 
 
 
  
  

Deschide app.py și să creeze un nou traseu numit / showDashboard. Utilizând acest traseu, vom afișa pagina tabloului de bord.

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

Modificați / validateLogin pentru a redirecționa utilizatorul la conectarea cu succes la pagina de bord în locul paginii de pornire a utilizatorului.

return redirect ('/ showDashboard')

Salvați modificările de mai sus și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 50002 și conectați-vă utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, ar trebui să vedeți pagina tabloului de bord.

După cum se vede în imaginea de mai sus, vom afișa toate dorințele create de diferiți utilizatori și vom oferi accesul altor utilizatori pentru a le place.

Populați tabloul de bord

În primul rând, trebuie să preluăm datele din baza de date pentru a popula tabloul de bord. Deci, să creăm o procedură stocată pentru a obține dorințele create de utilizatori.

USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "sp_GetAllWishes"; DELIMITER $$ UTILIZAREA 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURA 'sp_GetAllWishes' () BEGIN selectați wish_id, wish_title, wish_description, path_query_file din tbl_wish where wish_private = 0; END $$ DELIMITER; 

Procedura stocată de mai sus va prelua toate dorințele de la tbl_wish care nu sunt marcate ca private.

Apoi, vom crea o nouă metodă Python pentru a apela procedura stocată sp_GetAllWishes. Deschis app.py și adăugați următorul cod pentru getAllWishes metodă.

@ app.route ('/ getAllWishes') def getAllWishes (): încercați: if session.get ('user'): rezultatul cursului conn = mysql.connect () cursor.callproc ('sp_GetAllWishes') = cursor.fetchall () wishes_dict = [] pentru dorință în rezultat: wish_dict = 'Id': wish [0], 'Title': wish [1], 'Description' [3] wishes_dict.append (wish_dict) returnează json.dumps (wishes_dict) altfel: return render_template ('error.html', error ='Acces neautorizat ') excepție la excepție ca e: return render_template (' error.html ' = str (e))

În metoda de mai sus, am verificat mai întâi o sesiune de utilizator valabilă și apoi am creat o conexiune MySQL. Utilizarea conexiunii MySQL Conn, am folosit un cursor pentru a apela procedura stocată sp_GetAllWishes pentru a obține datele necesare. Odată ce datele au fost extrase, am analizat rezultatul și am returnat-o corect JSON şir.

Vom suna pe cele create mai sus / getAllWishes când se încarcă pagina tabloului de bord. Deschis dashboard.html și, folosind jQuery AJAX, apelați la / getAllWishes pe document.ready.

$ (functie () $ .ajax (url: '/ getAllWishes', tip: 'GET', succes: function (response) console.log (response); (eroare););)

Salvați modificările de mai sus și reporniți serverul. După ce v-ați conectat la aplicație, verificați consola browserului dvs. și ar trebui să puteți vizualiza datele preluate din baza de date.

["Descrierea": ​​"Bungee Jumping", "FilePath": "images_11 / create-a-web-app-from-scratch-using-python-flask-and- : 10, "Titlu": "Bungee Jumping", "Descriere": "Muntele Everest urca", "FilePath": "static / Uploads / e3e8f7fa-6cb9-4cc3-9989-a80e5089546f.png" 11, "Titlu": "Urcarea pe Everest", "Descriere": "Rafting pe râu", "FilePath": "static / Uploads / dff3a64c-5193-42b5-9cdb-9d67a7bbacab.png" , "Titlu": "River Rafting", "Descriere": "Deep Sea Diving", "FilePath": 15, "Titlu": "Diving adânc"]

Folosind datele din răspuns, vom popula pagina noastră de tablou de bord. Mai întâi, eliminați codul HTML între .bine div din dashboard.html.

În apelul de reușită al apelului AJAX, analizați parola raspuns la un obiect JavaScript.

var data = JSON.parse (răspuns);

Va trebui să creăm dinamic codul HTML miniatural folosind jQuery pentru fiecare set de trei dorințe la rând. Deci, mai întâi să creăm o funcție JavaScript pentru a crea dinamic codul HTML. Iată codul HTML pe care îl vom crea dinamic folosind jQuery:

 
 
 
Testarea aplicației
 
Salut
 
  
 
 
 

Vom numi funcția JavaScript CreateThumb. În această funcție, vom crea elementele HTML și le vom adăuga elementelor părinte pentru a obține codul HTML afișat mai sus.

funcția CreateThumb (id, title, desc, filepath) var mainDiv = $ ('
') .attr (' clasă ',' col-sm-4 col-md-4 '); var thumbNail = $ ('
') .attr (' clasă ',' miniatură '); var img = $ ('') .attr (' src ': filepath,' data-holder-rendered ': true,' style ':' height: 150px; width: 150px; display: block '); var caption = $ ('
') .attr (' clasă ',' caption '); var titlu = $ ('
„) .Text (titlu); var desc = $ ('
„) .Text (desc); var p = $ ('
„); var btn = $ ('') .attr (' id ':' btn_ '+ id,' tip ':' buton ',' clasă ':' btn btn-danger btn-sm '); var span = $ ('') .attr (' clasa ':' glyphicon glyphicon-thumbs-up ',' aria-hidden ':' true '); p.append (btn.append (interval)); caption.append (titlu); caption.append (desc); caption.append (p); thumbNail.append (img); thumbNail.append (legendă); mainDiv.append (Miniatură); întoarcere mainDiv; 

Codul de mai sus este destul de simplu, așa că nu voi intra în detalii.

Mergând înainte, vom repeta analiza parsată JSON răspundeți și creați codul HTML utilizând CreateThumb funcţie. Planificăm să afișăm trei dorințe pe rând. Așa că vom verifica și vom crea câte un rând de fiecare dată pentru trei dorințe. Adăugați următorul cod la succes apel invers al apelului AJAX în dashboard.html.

var itemsPerRow = 0; var div = $ ('
') .attr (' clasă ',' rând '); pentru (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 (' clasă ',' rând '); div.append (CreareThumb (date [i] .Id, date [i]. Titlu, date [i] .Descriere, date [i] .FilePath)); dacă (i == data.length - 1) $ ('. bine'). append (div);  itemsPerRow = 1; 

Salvați modificările și reporniți serverul. Conectați-vă la aplicație și atunci când sunteți pe pagina de bord, ar trebui să puteți vedea dorințele adăugate de diferiți utilizatori, cu opțiunea de a le place.

Apoi, să adăugăm o clic eveniment la butoanele similare sub miniaturile dorințelor. Deoarece am creat dinamic butoanele, va trebui să atașăm evenimentul de clic pe butoane utilizând metoda jQuery on. 

$ (document) .on ('click', '[id ^ =' btn_ ']', funcția () // Funcția Event poate fi adăugată aici);

Implementarea funcționalității

Să începem prin crearea unei mese care să țină evidența dorințelor pe care le-a câștigat o anumită dorință. Creați un tabel numit tbl_likes. 

CREATE TABLE 'BucketList'. 'Tbl_likes' ('desire_id' INT NOT NULL, 'like_id' INT NOT NULL AUTO_INCREMENT, 'user_id' INT NULL, 'like_like' INT NULL DEFAULT 0; 

Acum, ori de câte ori un utilizator îi place sau dorește o anumită dorință, vom actualiza acest tabel. Să creați o procedură memorată MySQL pentru a actualiza tabelul de mai sus.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURĂ 'sp_AddUpdateLikes' (p_wish_id int, p_user_id int, p_like int) BEGIN dacă selectați (selectați 1 din tbl_likes unde wish_id = p_wish_id și user_id = p_user_id) setul wish_like = p_like unde wish_id = p_wish_id și user_id = p_user_id; altfel introduceți valorile tbl_likes (desire_id, user_id, wish_like) (p_wish_id, p_user_id, p_like); sfârșit dacă; SFÂRȘIT

În această procedură stocată, am verificat pur și simplu dacă persoana a plăcut deja dorința sau nu. Dacă el sau ea a plăcut deja, atunci am actualizat-o ca intrare sau am adăugat unul nou.

Să creați o metodă Python pentru a apela procedura memorată mai sus.

@ app.route ('/ addUpdateLike', methods = ['POST']) def addUpdateLike (): try: if session.get ('user'): _wishId = request.form [' ['cum ar fi'] _user = session.get ('user') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_AddUpdateLikes') data = cursor.fetchall (), dacă len (date) este 0: conn.commit () returnează json.dumps ('status': 'OK') else: return render_template ('error.html', error = altfel: returna render_template ('error.html', error = str (e)) în cele din urmă: cursor.close () conn.close ('error.html' )

Aceasta este metoda Python care va apela procedura stocată sp_AddUpdateLikes. În această metodă am verificat o sesiune de utilizator validă și apoi am trecut dorința ID-ul și ca statutul procedurii memorate pentru actualizare. Când utilizatorul face clic pe butonul similar, trebuie să apelăm metoda Python / addUpdateLike. Deci, adăugați următorul cod la ca butonul de activare a butonului pentru clicuri în dashboard.html. 

(url: '/ addUpdateLike', metoda: 'POST', data: wish: $. (aceasta) .attr ('id') împărțit ('_') [1], cum ar fi: 1, succesul: funcția (răspunsul) console.log .log (eroare);););

Pentru moment, am codificat greu valoarea de tipul celei de mai sus. Deci, salvați modificările și reporniți serverul. Conectați-vă la aplicație și faceți clic pe butonul de mai jos, sub orice miniatură de dorință. Acum verificați tbl_likes și ar trebui să aveți o intrare acolo.

Concluzie

În această parte a tutorialului, am populat pagina de tablou de bord a aplicației noastre cu dorințele create de diferiți utilizatori. De asemenea, am atașat un buton asemănător fiecăruia, astfel încât utilizatorii să poată dori o anumită dorință. În următoarea parte, vom vedea cum să comutați afișajul similar și să afișăm numărul total de plăceri primite de o anumită dorință.

Postați sugestiile sau corecțiile din caseta de comentarii de mai jos. Codul sursă din acest tutorial este disponibil pe GitHub.