Een webapp maken van kras met behulp van Python Flask en MySQL deel 6

In het vorige deel van deze serie hebben we paginering geïmplementeerd voor de verlanglijst op de startpagina van de gebruiker. In dit deel van de serie zullen we een optie voor de gebruiker implementeren om een afbeelding te uploaden die een wens vertegenwoordigt, een optie om de wens als voltooid te markeren en een optie om privacy in te stellen.

Ermee beginnen

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

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

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

cd PythonFlaskMySQLApp_Part5 python app.py

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

De gebruikersinterface wijzigen

Laten we beginnen met het aanpassen van onze "voeg wens toe" -pagina om een optie op te nemen om een afbeelding te uploaden. Navigeren naar templates / addWish.html. Onze vorm in addWish.html ziet er vrij klein uit, dus laten we de bootstrap-HTML-code aanpassen om het formulier verticaal te maken.

Ten eerste zullen we de horizontale vorm- naar een verticale vorm, dus verwijder de klas horizontale vorm- van het formulier. We voegen ook drie nieuwe besturingselementen toe: een besturingselement voor het uploaden van bestanden om foto's te uploaden, een selectievakje om de wens als privé te markeren en een ander selectievakje om de wens als voltooid te markeren. Dit is het aangepaste addWish.html.

   Python Flask Bucket Lijst App           Voeg item toe 
 Uitloggen 
 
 
 Python Flask-app
 
   Maak je wens   Titel  
   Omschrijving  
  foto's    Blader…     
 
  Markeer dit als privé en niet zichtbaar voor anderen. 
  Markeren als privé  
  Heb je dit al bereikt?? 
  Markeren als voltooid  
     
 
 
  © Bedrijf 2015

Sla de bovenstaande wijziging op en start de server opnieuw op. Nadat u zich hebt aangemeld, klikt u op de Voeg Wish toe link en je zou de gewijzigde pagina voor het toevoegen van de pagina kunnen zien.

Implementatie van uploadfunctionaliteit

We zullen blue-jet jQuery-File-Upload gebruiken om de bestandsuploadfunctionaliteit te implementeren. Download de vereiste bestanden van GitHub. Pak de bron uit en voeg de volgende scriptreferenties toe aan addWish.html.

Op addWish.html pagina laden, voeg de plugin-startcode toe aan de bestandsuploadknop klik.

$ (function () $ ('# fileupload'). fileupload (url: 'upload', dataType: 'json', voeg toe: functie (e, data) data.submit ();, succes: functie ( antwoord, status) console.log (response);, error: function (error) console.log (error););)

Zoals te zien in de bovenstaande code, hebben we de plug-in voor het uploaden van bestanden aan de #bestand upload knop. De plug-in voor het uploaden van bestanden stuurt het bestand naar de /uploaden aanvraag handler, die we zullen definiëren in onze Python-code. We hebben ook een gedefinieerd toevoegen functie om de gegevens in te dienen en gedefinieerd succes en mislukking callbacks om het uploadsucces en de mislukkingen te behandelen.

Laten we vervolgens de uploaden Python file upload handler in app.py. Definieer een route /uploaden zoals getoond:

@ app.route ('/ upload', methods = ['GET', 'POST']) def upload (): # file upload handler code zal hier zijn

Controleer of het verzoek een is POST aanvraag, en lees zo het bestand op verzoek.

if request.method == 'POST': file = request.files ['file']

We moeten ook de afbeeldingsbestandsextensie ophalen om het bestand op te slaan. Dus importeer os en split de extensie naam van de bestandsnaam.

extensie = os.path.splitext (bestands.bestandsnaam) [1]

Zodra we de bestandsextensie hebben, maken we een nieuwe unieke bestandsnaam met uuid. Importeren uuid en maak de bestandsnaam aan.

f_name = str (uuid.uuid4 ()) + extensie

Maak een map met de naam upload in de statische map. Dit is waar we de geüploade afbeeldingen zullen bewaren. Voeg het pad toe aan de Upload-map in de app-configuratie.

app.config ['UPLOAD_FOLDER'] = 'static / Uploads'

Sla nu het geposte bestand op in de UPLOAD_FOLDER locatie en stuur de bestandsnaam terug als antwoord.

file.save (os.path.join (app.config ['UPLOAD_FOLDER'], f_name)) return json.dumps ('filename': f_name)

Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 5002 en log in met geldige inloggegevens. Probeer een afbeelding te uploaden met de bladerknop en controleer je browserconsole wanneer je klaar bent. U zou de geretourneerde geüploade bestandsnaam moeten kunnen zien.

Laten we in plaats van het alleen-lezen invoertekstveld een afbeeldingselement toevoegen om de geüploade afbeelding weer te geven. Vervang dus het alleen-lezen invoertekstveld door de volgende HTML-code.

Bij het uploaden van het succes van het bestand, update #imgUpload's src naar de geüploade afbeelding.

$ ( '# ImgUpload') attr ( 'src', 'static / uploads /' + response.filename).;

Sla de bovenstaande wijzigingen op en start de server opnieuw. Meld u aan bij de toepassing en probeer een nieuw afbeeldingsbestand te uploaden en u zou de geüploade afbeelding kunnen zien.

We zullen onze moeten aanpassen tbl_wish tabelstructuur om drie nieuwe velden te bevatten. Verander de tbl_wish zoals hieronder getoond:

ALTER TABLE 'BucketList'. 'Tbl_wish' VOEG KOLOM TOE 'wish_file_path' VARCHAR (200) NULL NA 'wish_date', VOEG KOLOM TOE 'wish_accomplished' INT NULL DEFAULT 0 NA 'wish_file_path', VOEG KOLOM TOE 'wish_private' INT NULL DEFAULT 0 NA 'wish_accomplished ';

Laten we vervolgens onze opgeslagen procedures aanpassen sp_addWish en sp_updateWish om de nieuw toegevoegde velden aan de database toe te voegen.

Wijzig de sp_addWish opgeslagen procedure om de drie nieuw toegevoegde velden op te nemen.

GEBRUIK 'BucketList'; DROP-procedure IF EXISTS '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, IN p_file_path varchar (200), IN p_is_private int, IN p_is_done int) BEGIN invoegen in tbl_wish (wish_title, wish_description, wish_user_id, wish_date, wish_file_path, wish_private, wish_accomplished) values (p_title, p_description, p_user_id, NOW (), p_file_path, p_is_private, p_is_done); END $$ DELIMITER;

Pas ook de opgeslagen procedure aan sp_updateWish om de drie nieuw toegevoegde velden op te nemen.

GEBRUIK 'BucketList'; DROP-procedure IF EXISTS 'sp_updateWish'; DELIMITER $$ USE 'BucketList' $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, In p_user_id bigint, IN p_file_path varchar ( 200), IN p_is_private int, IN p_is_done int) BEGIN update 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 where wish_id = p_wish_id en wish_user_id = p_user_id; END $$ DELIMITER;

Wijzig vervolgens de / addWish aanvraag handler methode om de nieuw geposte velden te lezen en door te geven aan de opgeslagen procedure.

als request.form.get ('filePath') None is: _filePath = "else: _filePath = request.form.get ('filePath') als request.form.get ('private') None is: _private = 0 else: _private = 1 als request.form.get ('done') None is: _done = 0 else: _done = 1

Nadat de waarden zijn gelezen, zullen we ze doorgeven aan de op MySQL opgeslagen procedureaanroep.

cursor.callproc (sp_addWish ', (_ titel, _description, _user, _filePath, _private, _done))

In de addWish.html pagina die we moeten instellen naam attribuut voor de elementen die moeten worden gepost. Dus voeg toe naam zowel voor de nieuw toegevoegde selectievakjes.

 Markeren als privé   Markeren als voltooid

Nu moeten we ook het uploadbestandspad passeren. We zullen dus een verborgen invoerveld maken en de waarde ervan instellen in de succesoproep voor het uploaden van bestanden.

Stel de waarde in bij het succes van het uploaden van het bestand.

succes: functie (respons, status) var filePath = 'static / Uploads /' + response.filename; $ ('# imgUpload'). attr ('src', filePath); $ ( '# FilePath') val (filePath).;

Sla de bovenstaande wijzigingen op en start de server opnieuw. Log in met geldige inloggegevens en probeer een nieuwe wens toe te voegen met alle vereiste details. Nadat het is toegevoegd, moet dit worden vermeld op de startpagina van de gebruiker.

Pas de Edit Wish-implementatie aan

Allereerst moeten we een HTML-code toevoegen voor de drie nieuwe velden. Dus open userHome.html en voeg de volgende HTML-code toe na de titel en Omschrijving HTML.

 foto's    Blader…       
 
 
  Markeer dit als privé en niet zichtbaar voor anderen. 
  Markeren als privé  
  Heb je dit al bereikt?? 
  Markeren als voltooid

We moeten de vereiste gegevens ophalen om de bovenstaande velden in te vullen bij bewerken. Dus laten we de opgeslagen procedure aanpassen sp_GetWishById om de extra velden op te nemen zoals getoond:

CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishById' (IN p_wish_id bigint, In p_user_id bigint) BEGIN selecteer wish_id, wish_title, wish_description, wish_file_path, wish_private, wish_accomplished from tbl_wish where wish_id = p_wish_id en wish_user_id = p_user_id; EINDE

Vervolgens moeten we het wijzigen JSON string in de / getWishById routemethode om de nieuwe velden op te nemen. Wijzig de verlanglijst in / getWishById zoals getoond:

wish.append ( 'Id': resultaat [0] [0], 'titel': result [0] [1], 'Beschrijving': resultaat [0] [2], 'FilePath': resultaat [0] [ 3], 'Privé': resultaten [0] [4], 'OK': resultaat [0] [5])

Om het resultaat te renderen, moeten we de gegevens ontleden die zijn ontvangen in de succes-callback van de Bewerk JavaScript-functie in userHome.html.

succes: function (res) var data = JSON.parse (res); . $ ( '# EditTitle') val (data [0] [ 'Titel']); . $ ( '# EditDescription') val (data [0] [ 'Beschrijving']); $ ('# imgUpload'). attr ('src', data [0] ['FilePath']); if (data [0] ['Private'] == "1") $ ('# chkPrivate'). attr ('checked', 'checked');  if (data [0] ['Done'] == "1") $ ('# chkDone'). attr ('checked', 'checked');  $ ('# editModal'). modal ();

Sla de wijzigingen op en start de server opnieuw op. Log in met geldige legitimatiegegevens en probeer op de startpagina van de gebruiker een wens uit de verlanglijst te bewerken. De gegevens moeten in de pop-up Bewerken worden ingevuld.

Nu, vergelijkbaar met wat we hebben gedaan op de pagina met het toevoegen van de vraag, voeg de jQuery-File-Upload scriptreferentie toe in userHome.html.

Initialiseer het besturingselement voor bestandsuploads in de pop-up met dezelfde code die we hebben gebruikt op de pagina voor het toevoegen van de vraag.

$ (function () $ ('# fileupload'). fileupload (url: 'upload', dataType: 'json', voeg toe: functie (e, data) data.submit ();, succes: functie ( antwoord, status) var filePath = 'static / Uploads /' + response.filename; $ ('# imgUpload'). attr ('src', filePath); $ ('# filePath'). val (filePath); , error: function (error) console.log (error););)

Vervolgens moeten we de knop bijwerken klikken in de pop-up Bewerken om de extra toegevoegde velden toe te voegen. Dus in de btnUpdate klik op de knop, wijzig de gegevensparameters die zijn doorgegeven om de drie nieuwe velden op te nemen zoals getoond:

data: title: $ ('# editTitle'). val (), description: $ ('# editDescription'). val (), id: localStorage.getItem ('editId'), filePath: $ ('# imgUpload' ) .attr ( 'src'), isPrivate:. $ ( '# chkPrivate') is ( ': aangevinkt') 1: 0, isDone:. $ ( '# chkDone') is (? ': aangevinkt) 1 : 0

Doe open app.py en wijzig de / updateWish aanvraag behandelingsmethode om de nieuw toegevoegde velden te ontleden.

_filePath = request.form ['filePath'] _isPrivate = request.form ['isPrivate'] _isDone = request.form ['isDone']

Pas de procedure aanroepmethode aan om de extra parameters op te nemen.

cursor.callproc (sp_updateWish ', (_ titel, _description, _wish_id, _user, _filePath, _isPrivate, _isDone))

Open nu sp_updateWish en pas het aan om de nieuw toegevoegde velden op te nemen.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, In p_user_id bigint, IN p_file_path varchar (200), IN p_is_private int , IN p_is_done int) BEGIN update 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 where wish_id = p_wish_id en wish_user_id = p_user_id; EINDE

Sla alle bovenstaande wijzigingen op en start de server opnieuw op. Log in met geldige legitimatiegegevens en probeer de bestaande gegevens te bewerken en bij te werken.

Inpakken

In dit deel van de tutorialserie hebben we gezien hoe we de plug-in blueraph jQuery-File-Upload kunnen integreren en gebruiken om afbeeldingen in onze Python Flask-applicatie te uploaden. In het volgende deel van deze serie laten we de wensen zien die gebruikers op de startpagina van de toepassing hebben bereikt en voegen ze de functionaliteit toe aan de wensen.

Laat ons uw mening, correcties en suggesties weten in de opmerkingen hieronder. Broncode van deze tutorial is beschikbaar op GitHub.

Code