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

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>&copy; 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!