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.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part2.git
Gdy kod źródłowy zostanie sklonowany, przejdź do katalogu projektu i uruchom serwer.
cd PythonFlaskMySQLApp_Part2 python app.py
Wpisz w przeglądarkę adres http://localhost:5002/ - aplikacja powinna zadziałać.

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:
<!DOCTYPE html> <html lang="en"> <head> <title>Python Flask Bucket List App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> <script src="../static/js/jquery-1.11.2.js"></script> </head> <body> <div class="container"> <div class="header"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation" class="active"><a href="#">Add Item</a> </li> <li role="presentation"><a href="/logout">Logout</a> </li> </ul> </nav> <h3 class="text-muted">Python Flask App</h3> </div> <section> <form class="form-horizontal" method="post" action="/addWish"> <fieldset> <!-- Form Name --> <legend>Create Your Wish</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtTitle">Title</label> <div class="col-md-4"> <input id="txtTitle" name="inputTitle" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="txtPost">Post</label> <div class="col-md-4"> <textarea class="form-control" id="txtPost" name="inputDescription"></textarea> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /> </div> </div> </fieldset> </form> </section> <footer class="footer"> <p>© Company 2015</p> </footer> </div> </body> </html>
Otwórz app.py
i dodaj nowe przekierowanie wraz z metodą, która wyświetli stronę Add Wish
(dodaj życzenie).
@app.route('/showAddWish') def showAddWish(): return render_template('addWish.html')
Otwórz userHome.html
i dodaj nowy element menu z linkiem do strony Add Wish
.
<li role="presentation"><a href="/showAddWish">Add Wish</a></li>
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ń.

Krok 2: Wdrażanie bazy danych
Aby dodawać życzenia do listy, musimy utworzyć tabelę o nazwie tbl_wish
.
CREATE TABLE `tbl_wish` ( `wish_id` int(11) NOT NULL AUTO_INCREMENT, `wish_title` varchar(45) DEFAULT NULL, `wish_description` varchar(5000) DEFAULT NULL, `wish_user_id` int(11) DEFAULT NULL, `wish_date` datetime DEFAULT NULL, PRIMARY KEY (`wish_id`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
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
.
USE `BucketList`; DROP procedure IF EXISTS `BucketList`.`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 ) BEGIN insert into tbl_wish( wish_title, wish_description, wish_user_id, wish_date ) values ( p_title, p_description, p_user_id, NOW() ); END$$ DELIMITER ; ;
Krok 3: Utwórz w Pythonie metodę do wywołania procedury składowanej MySQL
Utwórz w app.py
metodę o nazwie addWish
.
@app.route('/addWish',methods=['POST']) def addWish(): # Code will be here
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
.
_title = request.form['inputTitle'] _description = request.form['inputDescription'] _user = session.get('user')
Gdy już mamy wymagane wartości z formularza, otwieramy połączenie MySQL i wywołujemy procedurę składowaną sp_addWish
.
conn = mysql.connect() cursor = conn.cursor() cursor.callproc('sp_addWish',(_title,_description,_user)) data = cursor.fetchall()
Po wykonaniu procedury musimy zapisać zmiany w bazie danych.
if len(data) is 0: conn.commit() return redirect('/userHome') else: return render_template('error.html',error = 'An error occurred!')
Oto kompletna metoda addWish
.
@app.route('/addWish',methods=['POST']) def addWish(): try: if session.get('user'): _title = request.form['inputTitle'] _description = request.form['inputDescription'] _user = session.get('user') conn = mysql.connect() cursor = conn.cursor() cursor.callproc('sp_addWish',(_title,_description,_user)) data = cursor.fetchall() if len(data) is 0: conn.commit() return redirect('/userHome') else: return render_template('error.html',error = 'An error occurred!') else: return render_template('error.html',error = 'Unauthorized Access') except Exception as e: return render_template('error.html',error = str(e)) finally: cursor.close() conn.close()
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.
USE `BucketList`; DROP procedure IF EXISTS `sp_GetWishByUser`; DELIMITER $$ USE `BucketList`$$ CREATE PROCEDURE `sp_GetWishByUser` ( IN p_user_id bigint ) BEGIN select * from tbl_wish where wish_user_id = p_user_id; END$$ DELIMITER ;
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
.
@app.route('/getWish') def getWish(): try: if session.get('user'): _user = session.get('user') else: return render_template('error.html', error = 'Unauthorized Access') except Exception as e: return render_template('error.html', error = str(e))
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
.
_user = session.get('user') # Connect to MySQL and fetch data con = mysql.connect() cursor = con.cursor() cursor.callproc('sp_GetWishByUser',(_user,)) wishes = cursor.fetchall()
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
.
wishes_dict = [] for wish in wishes: wish_dict = { 'Id': wish[0], 'Title': wish[1], 'Description': wish[2], 'Date': wish[4]} wishes_dict.append(wish_dict)
Po przekształceniu danych w słownik, przeformatujemy je na JSON
i zwrócimy.
return json.dumps(wishes_dict)
Oto metoda getWish
w całej rozciągłości.
@app.route('/getWish') def getWish(): try: if session.get('user'): _user = session.get('user') con = mysql.connect() cursor = con.cursor() cursor.callproc('sp_GetWishByUser',(_user,)) wishes = cursor.fetchall() wishes_dict = [] for wish in wishes: wish_dict = { 'Id': wish[0], 'Title': wish[1], 'Description': wish[2], 'Date': wish[4]} wishes_dict.append(wish_dict) return json.dumps(wishes_dict) else: return render_template('error.html', error = 'Unauthorized Access') except Exception as e: return render_template('error.html', error = str(e))
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
:
<script> $(function() { $.ajax({ url: '/getWish', type: 'GET', success: function(res) { console.log(res); }, error: function(error) { console.log(error); } }); }); </script>
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:
[{ "Date": "Fri, 23 Jan 2015 23:26:05 GMT", "Description": "I want to climb Mount Everest", "Id": 1, "Title": "Climb Everest" }, { "Date": "Fri, 23 Jan 2015 23:27:05 GMT", "Description": "I want to jump from top of a mountain", "Id": 2, "Title": "Bungee Jump" }]
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
:
<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">Wish Title</h4> <p class="list-group-item-text">Wish Description</p> </a> </div>
Dodaj powyższy kod HTML do diva jumbotron
wewnątrz userHome.html
. Powinno to wyglądać tak:

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:
var div = $('<div>') .attr('class', 'list-group') .append($('<a>') .attr('class', 'list-group-item active') .append($('<h4>') .attr('class', 'list-group-item-heading'), $('<p>') .attr('class', 'list-group-item-text')));
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.
var wishObj = JSON.parse(res);
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
.
var wish = ''; $.each(wishObj, function(index, value) { wish = $(div).clone(); $(wish).find('h4').text(value.Title); $(wish).find('p').text(value.Description); $('.jumbotron').append(wish); });
Zapisz wszystkie zmiany i zrestartuj serwer. Zaloguj się poprawnym adresem i hasłem. Powinieneś teraz zobaczyć listę życzeń stworzonych przez konkretnego użytkownika.

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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post