Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Stwórz od zera aplikację sieciową w Python Flask i MySQL: Część 6

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 5
Creating a Web App From Scratch Using Python Flask and MySQL: Part 7

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

W poprzedniej części cyklu zaimplementowaliśmy paginację listy marzeń na stronie użytkownika. W tym odcinku wprowadzimy możliwość wstawiania obrazka odpowiadającego życzeniu, opcję oznaczenia życzenia spełnionego oraz możliwość ustawienia prywatności.

Pierwsze kroki

Zaczynamy od sklonowania poprzedniej części tutorialu z GitHub.

Gdy plik źródłowy zostanie sklonowany, przejdź do katalogu projektu i uruchom serwer.

Skieruj przeglądarkę na adres http://localhost:5002/ - aplikacja powinna zadziałać.

Zmienianie interfejsu użytkownika

Na początek zajmiemy się stroną "dodaj marzenie" i wprowadzimy na niej opcję przesyłania obrazów. Przejdź do templates/addWish.html. Formularz przy addWish.html wygląda bardzo skromnie, zmieńmy więc nasz kod bootstrap HTML, by formularz wyświetlany był pionowo.

Najpierw zmienimy form-horizontal na pionową - usuń klasę form-horizontal z formularza. Dodamy też trzy nowe kontrolery: kontroler przesyłania plików, okienko do zaznaczania, czy marzenie jest prywatne i dodatkowe do odhaczenia, gdy marzenie zostanie spełnione. Tak wygląda zmodyfikowany addWish.html.

Zapisz zmianę i zrestartuj serwer. Po zalogowaniu, kliknij w link Add Wish, by zobaczyć zmienioną stronę dodawania marzenia.

Add Wish Page with Image Upload

Implementacja funkcji przesyłania

Do zaimplementowania funkcji przesyłania plików skorzystamy z blueimp jQuery-File-Upload. Ściągnij potrzebne pliki z GitHub. Rozpakuj pliki źródłowe i dopisz następujące odwołania do addWish.html.

Dopisz kod inicjalizacji wtyczki do przycisku dodawania plików przy załadowaniu strony addWish.html.

Jak widać, przypięliśmy wtyczkę do przesyłania plików do przycisku #fileupload. Wtyczka do przesyłania plików wysyła plik do procedury obsługi zapytań /upload, którą zdefiniujemy w pliku Pythona. Zdefiniowaliśmy również funkcję add do podawania danych, a także informacje zwrotne (callback) success  i failure, które obsłużą odpowiednio udaną i nieudaną próbę przesłania pliku.

Teraz zdefiniujmy funkcję obsługi przesyłania plików upload wewnątrz app.py. Zdefiniiuj przkierowanie /upload, jak w przykładzie:

Sprawdź, czy zapytanie jest typu POST - w takim przypadku odczytamy plik z zapytania.

Musimy też poznać rozszerzenie pliku przesłanego obrazka, zanim go zapiszemy. Zaimportuj zatem os, a następnie wyodrębnij rozszerzenie z nazwy pliku.

Gdy już znamy rozszerzenie, nadajemy obrazkowi nową, unikalną nazwę za pomocą metody uuid. Zaimportuj uuid i wygeneruj nową nazwę pliku.

Utwórz katalog o nazwie Uploads w folderze static. Tu będziemy przechowywać przesłane pliki. Dopisz ścieżkę folderu Upload w ustawieniach aplikacji.

Teraz zapisz przesłany plik pod UPLOAD_FOLDER i zwróć w odpowiedzi nazwę pliku.

Zapisz wszystkie zmiany i uruchom serwer ponownie. Skieruj przeglądarkę na http://localhost:5002 i zaloguj się poprawnymi danymi. Spróbuj wczytać zdjęcie korzystając z przycisku browse, a następnie sprawdź, co dzieje się w konsoli przeglądarki. Powinna się pokazać nazwa wczytanego pliku.

W miejsce pola tekstu wejściowego tylko do odczytu  wstawimy element obrazka, w którym wyświetli się wczytane zdjęcie. Zastąp więc pole tekstowe następującym kodem HTML.

W informacji zwrotnej o wczytaniu pliku zaktualizuj adres wysłanego obrazka - src przy #imgUpload

Zapisz powyższe zmiany i uruchom ponownie serwer. Zaloguj się do aplikacji i spróbuj przesłać nowy plik obrazu. Powinieneś już zobaczyć przesłane zdjęcie.

Add Wish Page With Upload

Musimy teraz zmienić strukturę naszej tbl_wish - dodać do niej trzy nowe pola. Wprowadź zmiany w tbl_wish, jak pokazano poniżej:

Teraz zmodyfikujmy nasze procedury składowane sp_addWish i sp_updateWish, by pojawiły się w nich nowododane pola bazy.

Zmień sp_addWish, dodając trzy nowe pola.

Zmień również sp_updateWish, dołączając trzy nowo dodane pola.

A teraz zmodyfikuj funkcję obsługi zapytań /addWish, aby czytała nowoprzesłane pola i przekazywała je do procedury składowanej.

Po zczytaniu wartości, prześlemy je do odwołania do procedury składowanej MySQL.

Na stronie addWish.html musimy ustalić atrybut name elementów, które zostaną przesłane. Dodaj zatem name przy obu nowoutworzonych polach do zaznaczania.

Teraz musimy także przesłać adres do wczytanych plików. Utworzymy zatem ukryte pole wejściowe i ustalimy jego wartość w odwołaniu zwrotnym o powodzeniu przesyłania pliku.

Ustaw zawartość pola tekstowego w odwołaniu zwrotnym. 

Zapisz powyższe zmiany i uruchom ponownie serwer. Zaloguj się przy użyciu prawidłowych danych i spróbuj dodać nowe marzenie wraz ze wszystkimi szczegółami.. Po wprowadzeniu wszystkich danych, powinny się one pojawić na stronie domowej użytkownika.

Zmiany w implementacji Edycji Marzenia

Najpierw musimy wstawić nieco kodu HTML dla nowych trzech pól. Otwórz więc userHome.html i wklej poniższy kod HTML poniżej title i description.

Musimy odebrać wymagane dane, aby wprowadzić je w do pól formularza edycji. Zmieńmy więc procedurę składowaną sp_GetWishById, aby uwzględniała dodatkowe pola, jak pokazano:

Teraz musimy zmodyfikować ciąg JSON w przekierowaniu /getWishById, by uwzględniał nowe pola: Zmień listę marzeń w  /getWishById, zgodnie z instrukcją:

Aby wyrenderować stronę, musimy zczytać dane otrzymane w pozytywnej informacji zwrotnej  z funkcji JavaScript Edit na userHome.html.

Zapisz zmiany i uruchom serwer ponownie. Zaloguj się właściwymi danymi, a gdy znajdziesz się na stronie domowej, spróbuj edytować jedno z marzeń z listy. Dane powinny wyświetlić się w polach okienka Edit.

Edit Pop Up With Additional Fields

Teraz, w taki sam sposób, jak to zrobiliśmy na stronie dodawania marzeń, wstaw odwołanie do jQuery-File-Upload na userHome.html.

Wstaw moduł przesyłania plików do okienka edycji korzystając z tego samego kodu, którego użyliśmy na stronie dodawania marzeń.

Teraz musimy zmienić reakcję na kliknięcie przycisku Update w okienku Edit, aby uwzględnić kilka nowych pól. A więc, przy kliknięciu pod btnUpdate, zmień parametry przesyłanych danych, dopisując trzy nowe pola, zgodnie z instrukcją:

Otwórz app.py i zmień funkcję obsługi odwołania /updateWish tak, aby zczytywała dane z nowych pól.

Zmodyfikuj metodę wywołania procedury, wstawiając dodatkowe parametry.

Teraz otwórz sp_updateWish i zmień ją, by uwzględnić nowe pola.

Zapisz wszystkie zmiany i ponownie uruchom serwer. Zaloguj się prawidłowymi danymi i spróbuj edytować i aktualizować wcześniejsze wpisy.

Podsumowując

W tej części tutorialu nauczyliśmy się wstawiać i wtyczkę blueimp jQuery-File-Upload i korzystać z niej do wczytywania obrazków w aplikacji Python Flask. W kolejnej części cyklu pokażemy marzenia zrealizowane przez użytkowników na głównej stronie aplikacji i dodamy funkcję. która pozwoli je polubić.

Podziel się z nami swoją opinią, uwagami i sugestiami w komentarzach poniżej. Kod źródłowy z tego tutorialu jest dostępny na GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.