Share
În partea anterioară a acestei serii, am implementat paginarea pentru lista de dorințe de pe pagina de pornire a utilizatorului. În această parte a seriei vom implementa o opțiune pentru ca utilizatorul să încarce o imagine care să reprezinte o dorință, o opțiune pentru a marca dorința așa cum a fost realizată și o opțiune pentru a seta confidențialitatea.
Să începem prin clonarea părții anterioare a tutorialului de la GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part5.git
Odată ce codul sursă a fost clonat, navigați la directorul de proiect și porniți serverul web.
cd PythonFlaskMySQLApp_Part5 Python app.py
Punctați browser-ul dvs. la http: // localhost: 5002 / și ar trebui să aveți aplicația să ruleze.
Să începem prin modificarea paginii "adăugați dorința" pentru a include o opțiune de încărcare a unei imagini. Navigheaza catre template-uri / addWish.html. Forma noastră în addWish.html arata destul de mic, asa ca sa modificam codul HTML de bootstrap pentru a face forma verticala.
În primul rând, vom modifica formă orizontală la o formă verticală, îndepărtați astfel clasa formă orizontală din formular. De asemenea, vom adăuga trei comenzi noi: un control de încărcare a fișierelor pentru încărcarea fotografiilor, o casetă de selectare pentru a marca dorința ca fiind privată și o altă casetă de selectare pentru a marca dorința ca fiind finalizată. Aici este modificat addWish.html.
Python Cup Bucket List App Python Flask App
Salvați modificările de mai sus și reporniți serverul. După ce v-ați conectat cu succes, faceți clic pe Adăugați dorință și ar trebui să puteți vedea pagina modificată de adăugare a dorinței.
Vom folosi jQuery-File-upload pentru a implementa funcționalitatea de încărcare a fișierelor. Descărcați fișierele necesare de la GitHub. Extrageți sursa și adăugați următoarele referințe de script addWish.html.
Pe addWish.html încărcați pagina, adăugați codul de inițiere a pluginului la butonul de încărcare a fișierului.
(url: 'upload', dataType: 'json', add: functie (e, data) data.submit ();, success: function răspuns, stare) console.log (răspuns);, eroare: funcție (eroare) console.log (eroare););)
După cum se vede în codul de mai sus, am atașat pluginul pentru încărcarea fișierelor în #fișier încărcat buton. Pluginul de încărcare a fișierelor trimite fișierul la încărcare / editorul de cereri, pe care îl vom defini în codul nostru Python. De asemenea, am definit un adăuga funcția de a trimite datele și a le defini succes și eșec apeluri de apel pentru a face față succesului de încărcare și a eșecurilor.
Apoi, să definim încărcați Încărcați fișierul de încărcare a fișierului Python în app.py. Definiți un traseu încărcare / așa cum se arată:
Accentsconagua
@ app.route ('/ upload', methods = ['GET', 'POST']) def upload ():Verificați dacă cererea este a POST cererea și, dacă este așa, citiți fișierul din cerere.
if request.method == 'POST': file = request.files ['fișier']
De asemenea, va trebui să obțineți extensia de fișier imagine pentru a salva fișierul. Deci importă os și apoi împărțiți numele extensiei din numele fișierului.
extensie = os.path.splitext (file.filename) [1]
Odată ce avem extensia de fișier, vom crea un nou nume de fișier unic folosind UUID. Import UUID și să creați numele fișierului.
f_name = str (uuid.uuid4 ()) + extensie
Creați un dosar numit încărcările în dosarul static. Aici vom păstra imaginile încărcate. Adăugați calea în dosarul Încărcați în configurația aplicației.
app.config ['UPLOAD_FOLDER'] = 'static / Uploads'
Salvați acum fișierul postat în UPLOAD_FOLDER și returnează numele fișierului ca răspuns.
fișierul.save (os.path.join (app.config ['UPLOAD_FOLDER'], f_name)) returnează json.dumps ('nume fișier': f_name)Salvați modificările de mai sus și reporniți serverul. Punctați browser-ul dvs. la adresa http: // localhost: 5002 și conectați-vă utilizând acreditări valide. Încercați să încărcați o imagine utilizând butonul de navigare și, când ați terminat, verificați consola browserului. Ar trebui să puteți vedea numele fișierului încărcat returnat.
În loc de câmpul de introducere numai pentru citire, să adăugăm un element de imagine pentru a afișa imaginea încărcată. Deci, înlocuiți câmpul de text de introducere numai pentru citire cu următorul cod HTML.
În apelul de reușită pentru încărcarea fișierelor, actualizați #imgUpload„s src la imaginea încărcată.
$ ( '# ImgUpload') Attr ( 'src', 'static / uploads /' + response.filename).;
Salvați modificările de mai sus și reporniți serverul. Conectați-vă la aplicație și încercați să încărcați un nou fișier imagine și ar trebui să puteți vedea imaginea încărcată.
Va trebui să ne modificăm tbl_wish pentru a include trei domenii noi. Modificați tbl_wish așa cum se arată mai jos:
ALTER TABLE 'BucketList'. 'Tbl_wish' ADAUGA COLUMN 'wish_file_path' VARCHAR (200) NULL DUPĂ 'wish_date', ADĂUGEAZĂ COLUMN 'wish_accomplished' INT NULL DEFAULT 0 DUPĂ 'wish_file_path', ADAUGA COLUMN 'wish_private' INT NULL DEFAULT 0 AFTER 'wish_accomplished „;
Înainte să modificăm procedurile stocate sp_addWish și sp_updateWish pentru a include campurile noi adăugate în baza de date.
Modificați sp_addWish procedură stocată pentru a include cele trei câmpuri recent adăugate.
USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "sp_addWish"; (IN p_title varchar (45), IN p_description varchar (1000), IN p_user_id bigint, IN p_file_path varchar (200), IN p_is_private int, IN p_is_done int) BEGIN introduceți valorile (p_title, p_description, p_user_id, NOW (), p_file_path, p_is_private, p_is_done) în tbl_wish (wish_title, wish_description, wish_user_id, wish_date, wish_file_path, wish_private, wish_accomplished); END $$ DELIMITER;
De asemenea, modificați procedura stocată sp_updateWish pentru a include cele trei campuri noi adăugate.
USE 'BucketList'; Procedura DROP DACĂ EXISTĂ "sp_updateWish"; (IN) p_descrierea varchar (1000), IN p_wish_id bigint, în p_user_id bigint, IN p_file_path varchar (IN_pile_path varchar (45), IN p_file_path varchar 200), int p_is_private int, IN p_is_done int) BEGIN actualizare tbl_wish set wish_title = p_title, wish_description = p_description, wish_file_path = p_file_path, wish_private = p_is_private, wish_accomplished = p_is_done unde wish_id = p_wish_id și wish_user_id = p_user_id; END $$ DELIMITER;
Apoi, modificați / addWish a solicitat metoda handlerului de a citi câmpurile postate recent și de a le transmite procedeului stocat.
dacă request.form.get ('filePath') este Niciuna: _filePath = "else: _filePath = request.form.get ('filePath') dacă request.form.get ('privat' _private = 1 dacă request.form.get ('done') este Niciuna: _done = 0 else: _done = 1 Odată ce valorile au fost citite, le vom trimite la apelul procedurii memorate MySQL.
cursor.callproc ( 'sp_addWish', (_ titlu, _description, _user, _filePath, _private, _done))
În addWish.html pagina va trebui să setați Nume atribut pentru elementele care urmează să fie postate. Adăugați Nume la ambele casete de validare nou adăugate.
Marchează ca privat Marcați ca terminat
Acum, de asemenea, trebuie să trecem calea fișierului de încărcare. Așadar, vom crea un câmp de intrare ascuns și vom seta valoarea sa în apelul de reușită pentru încărcarea fișierelor.
Setați valoarea sa în apelul de reușită pentru încărcarea fișierelor.
succes: funcție (răspuns, stare) var filePath = 'static / Uploads /' + answer.filename; $ ('# imgUpload'). atr ('src', filePath); $ ( '# FILEPATH') val (FILEPATH).; Salvați modificările de mai sus și reporniți serverul. Conectați-vă utilizând acreditările valide și încercați să adăugați o nouă dorință, cu toate detaliile necesare. Odată adăugată cu succes, ar trebui să fie afișată pe pagina de pornire a utilizatorului.
În primul rând, trebuie să adăugăm un cod HTML pentru cele trei noi câmpuri. Deci, deschide-te userHome.html și adăugați următorul cod HTML după titlu și Descriere HTML.
Naviga…![]()
Marchează ca privat
Marcați ca terminat
Va trebui să preluăm datele necesare pentru a popula câmpurile de mai sus în editare. Deci, haideți să modificăm procedura stocată sp_GetWishById pentru a include câmpurile suplimentare așa cum se arată:
CREATE DEFINER = "root" @ 'localhost' PROCEDURA 'sp_GetWishById' (IN p_wish_id bigint, În p_user_id bigint) BEGIN selectați wish_id, wish_title, wish_description, wish_file_path, wish_private, wish_accomplished din tbl_wish where wish_id = p_wish_id and wish_user_id = p_user_id; SFÂRȘIT
Apoi, va trebui să modificăm JSON șir în / getWishById metoda rutei pentru a include noile câmpuri. Modificați lista de dorințe din / getWishById așa cum se arată:
wish.append ( 'Id': rezultat [0] [0], 'Titlu': rezultat [0] [1], 'Descriere': rezultat [0] [2], 'filepath': rezultat [0] [ 3], 'privat': rezultat [0] [4], 'Efectuat': rezultat [0] [5])
Pentru a face rezultatul, trebuie să analizăm datele primite în apelul de reușită al Editați | × Funcția JavaScript în userHome.html.
succes: funcția (res) var data = JSON.parse (res); . $ ( '# EditTitle') Val (date [0] [ 'titlul']); . $ ( '# EditDescription') val (date [0] [ 'Descriere']); $ ('# imgUpload'). attr ('src', date [0] ['FilePath']); dacă (date [0] ['privat'] == "1") $ ('chkPrivate'). dacă (date [0] ['terminat'] == "1") $ ('chkDone'). $ ('# editModal'). modal (); Salvați modificările și reporniți serverul. Conectați-vă utilizând acreditările valide și, atunci când vă aflați pe pagina de pornire a utilizatorului, încercați să editați o dorință din lista de dorințe. Ar trebui să aveți datele populate în fereastra de editare.
Acum, similar cu ceea ce am făcut în pagina de adăugare a dorinței, adăugați referința scriptului jQuery-File-Upload în userHome.html.
Inițializați controlul de încărcare a fișierelor în fereastra de editare utilizând același cod pe care l-am utilizat în pagina de adăugare a dorințelor.
(url: 'upload', dataType: 'json', add: functie (e, data) data.submit ();, success: function răspuns, stare) var filePath = 'static / Uploads /' + răspuns.filename; $ ('# imgUpload'). , eroare: funcția (eroare) console.log (eroare););)În continuare, trebuie să modificăm butonul Actualizați clic în fereastra de editare pentru a include câmpurile suplimentare adăugate. Deci, în btnUpdate faceți clic pe butonul, modificați parametrii de date transmise pentru a include cele trei câmpuri noi, după cum se arată:
date: ('editTitle') val (), descriere: $ ('# editDescription') val (), id: localStorage.getItem ) .attr ( 'src'), isPrivate:. $ ( '# chkPrivate') este ( ': verificat') 1: 0, isDone:. $ ( '# chkDone') este (? ': verificat') 1 : 0Deschide app.py și modificați / updateWish metoda de manipulare a cererii pentru a analiza câmpurile recent adăugate.
_filePath = request.form ['filePath'] _isPrivate = request.form ['estePrivate'] _isDone = request.form ['isDone']
Modificați metoda de apelare a procedurii pentru a include parametrii suplimentari.
cursor.callproc ( 'sp_updateWish', (_ titlu, _description, _wish_id, _user, _filePath, _isPrivate, _isDone))
Deschide acum sp_updateWish și modificați-o pentru a include câmpurile recent adăugate.
(IN) p_description varchar (1000), IN p_wish_id bigint, în p_user_id bigint, IN p_file_path varchar (200), IN p_is_private int , IN p_is_done int) BEGIN actualizare tbl_wish set wish_title = p_title, wish_description = p_description, wish_file_path = p_file_path, wish_private = p_is_private, wish_accomplished = p_is_done unde wish_id = p_wish_id și wish_user_id = p_user_id; SFÂRȘIT
Salvați toate modificările de mai sus și reporniți serverul. Conectați-vă utilizând acreditările valide și încercați să editați și să actualizați intrările existente.
În această parte a seriei tutorial, am văzut cum să integrăm și să folosim plug-inul jQuery-File-Upload pentru a încărca imagini în aplicația Python Flask. În următoarea parte a acestei serii, vom arăta dorințele realizate de utilizatori pe pagina de pornire a aplicației și vom adăuga funcționalitatea dorințelor.
Spuneți-ne gândurile, corecțiile și sugestiile din comentariile de mai jos. Codul sursă din acest tutorial este disponibil pe GitHub.
