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

Stwórz od zera aplikację internetową przy użyciu Python Flask i MySQL: Część 3

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 2
Creating a Web App From Scratch Using Python Flask and MySQL: Part 4

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

W poprzedniej części tutorialu zaimplementowaliśmy funkcję zapisu  i wylogowania użytkownika dla naszej Listy Marzeń. W tej części cyklu opracujemy część kliencką i zaplecze (front end i back end) potrzebne, by wyświetlić listę zapisanych punktów.

Pierwsze kroki

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

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

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

Bucket List App Home Page

Dodaj nowe punkty Listy Marzeń

Krok 1: Utwórz interfejs, aby dodawać elementy do listy

Na początek stworzymy interfejs zalogowanego użytkownika służący do dodawania elementów do listy zadań. Przejdź do folderu templates wewnątrz katalogu projektu i utwórz plik o nazwie addWish.html. Otwórz addWish.html i wpisz następujący kod HTML:

Otwórz app.py i dodaj nowe przekierowanie wraz z metodą, która wyświetli stronę Add Wish (dodaj życzenie).

Otwórz userHome.html i dodaj nowy element menu z linkiem do strony Add Wish.

Zapisz zmiany i uruchom ponownie serwer. Skieruj przeglądarkę na http://localhost:5002 i zaloguj się, używając zarejestrowanego adresu i hasła. Po zalogowaniu kliknij w link Add Wish - powinna wyświetlić się strona dodawania życzeń.

Add Bucket List Item

Krok 2: Wdrażanie bazy danych

Aby dodawać życzenia do listy, musimy utworzyć tabelę o nazwie tbl_wish.

tbl_wish będzie miała kolumny title (tytuł), description (opis) oraz ID dla użytkownika, który dodał życzenie.

Teraz musimy utworzyć procedurę składowaną MySQL, która będzie dodawała elementy do tabeli tbl_wish.

Krok 3: Utwórz w Pythonie metodę do wywołania procedury składowanej MySQL

Utwórz w app.py metodę o nazwie addWish.

Ponieważ będziemy do tej metody przesyłać dane, zadeklarowaliśmy to już w definicji przekierowania.

Przy każdym wywołaniu metody addWish musimy się upewnić, czy jest to prawidłowe odwołanie, sprawdzając, czy istnieje zmienna sesji user. Gdy już zatwierdzimy sesję, zczytujemy przesłane title oraz description.

Gdy już mamy wymagane wartości z formularza, otwieramy połączenie MySQL i wywołujemy procedurę składowaną sp_addWish.

Po wykonaniu procedury musimy zapisać zmiany w bazie danych.

Oto kompletna metoda addWish.

Zapisz cały kod źródłowy i ponownie uruchom serwer. Skieruj przeglądarkę na http://localhost:5002 i zaloguj się, używając zarejestrowanego adresu i hasła. Po zalogowaniu, kliknij w link Add Wish. Wpisz tytuł i opis swojego życzenia i kliknij Publish (opublikuj). Gdy życzenie zostanie dodane, powinno nastąpić przekierowanie do strony domowej użytkownika. Zaloguj się do bazy danych MySQL - życzenie powinno już znaleźć się w tabeli tbl_wish.

Wyświetlanie elementu Listy Życzeń

Krok 1: Utwórz procedurę składowaną do wyświetlania życzeń

Teraz stworzymy procedurę składowaną MySQL, która wyświetli życzenia zapisane przez użytkownika. Pobierze ona ID użytkownika jako parametr i zwróci dane z życzeniami przypisanymi do odpowiedniego ID.

Krok 2: Utwórz w Pythonie metodę pobierania danych

Teraz utworzymy metodę Pythona, która wywoła procedurę sp_GetWishByUser, by pobrać życzenia zapisane przez użytkownika. Dodaj do pliku app.py metodę getWish.

Jak widać w przytoczonym kodzie, wywołanie tej metody zawsze musi zawierać prawidłową zmienną sesji user. Gdy już zatwierdzimy poprawność użytkownika, utworzymy połączenie z bazą MySQL i wywołamy procedurę sp_GetWishByUser.

Gdy już pobierzemy dane z MySQL, zostaną one przetworzone i przekształcone w dictionary (Pythonowski słownik), aby dało się je zwrócić w formacie  JSON.

Po przekształceniu danych w słownik, przeformatujemy je na JSON i zwrócimy.

Oto metoda getWish w całej rozciągłości.

Krok 3: Przypinsnir danych JSON do HTML

Gdy załaduje się strona domowa użytkownika, wywołamy metodę getWish korzystając z jQuery AJAX i przypniemy otrzymane dane do naszego HTML. W userHome.html wstaw poniższy skrypt AJAX jQuery:

Zapisz wprowadzone zmiany i zrestartuj serwer. Po zalogowaniu się prawidłowym adresem i hasłem, zerknij do konsoli przeglądarki - powinna się w niej pojawić lista życzeń pobrana z bazy danych:

Teraz musimy zczytać dane z JSON i przypiąć je do HTML. Skorzystamy z bootstrapowego list-group do wyświetlenia elementów listy. Oto podstawowy szablon dla list-group:

Dodaj powyższy kod HTML do diva jumbotron wewnątrz userHome.html. Powinno to wyglądać tak:

list-group in User Home

Teraz utworzymy podobny div list-group dynamicznie dla każdego nowego życzenia i dołączymy go do divu jambotron. Wewnątrz komunikatu o sukcesie dla wywołania funkcji getWish, utwórz div jak pokazano poniżej:

Będziemy klonować taki div przy każdym nowym elemencie listy, aby każdy miał swój własny div list-group. Następnie przetwórz zwrócony string JSON w obiekt JavaScript.

Teraz przeiteruj wishObj dla każdego elementu-życzenia, wstawiając dla niego nowego klona diva, który tworzyliśmy wyżej, i dołączając go do diva jumbotron.

Zapisz wszystkie zmiany i zrestartuj serwer. Zaloguj się poprawnym adresem i hasłem. Powinieneś teraz zobaczyć listę życzeń stworzonych przez konkretnego użytkownika.

User Home Page Populated with Wishes

Podsumowanie

W tym tutorialu zaimplementowaliśmy interfejs, dzięki któremu zalogowany użytkownik może dodawać życzenia, Wprowadziliśmy również niezbędne metody oraz procedurę składowaną w bazie danych, aby odbierać i wyświetlać utworzone życzenia na stronie domowej użytkownika.

W kolejnej części cyklu zobaczymy, jak wprowadzić funkcjonalności Edit oraz Delete dla listy życzeń wyświetlanej na stronie domowej.

Kod źródłowy z tego tutorialu jest dostępny na GitHub.

Podziel się swoimi wrażeniami w komentarzach poniżej!

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.