Статьи

Создание веб-приложения с нуля с использованием Python Flask и MySQL

Январь 9, 2019

В этой серии мы будем использовать Python , Flask и MySQL для создания простого веб-приложения с нуля. Это будет простое приложение со списком корзин, в котором пользователи могут зарегистрироваться, войти в систему и создать свой список корзин.

В этом руководстве предполагается, что у вас есть базовые знания Python программирования Python . Мы будем использовать Flask , среду веб-приложений Python, для создания нашего приложения с MySQL в качестве бэкенда.

Если вам нужно освежить свои навыки Python, попробуйте курс Введение в Python , который дает вам прочную основу языка всего за 5 долларов.

Введение в Python Flask

Flask — это среда Python для создания веб-приложений. С официального сайта,

Flask — это микрофрейм для Python, основанный на Werkzeug, Jinja 2 и добрых намерениях.

Когда мы думаем о Python, де-факто фреймворк, который приходит нам в голову, это фреймворк Django . Но с точки зрения начинающего Python, с Flask легче начать, по сравнению с Django.

Настройка колбы

Настроить Flask довольно просто и быстро. С менеджером пакетов pip все, что нам нужно сделать, это:

1
pip install flask

Когда вы закончите установку Flask, создайте папку с именем FlaskApp . Перейдите в папку FlaskApp и создайте файл с именем app.py Импортируйте модуль flask и создайте приложение, используя Flask, как показано:

1
2
from flask import Flask
app = Flask(__name__)

Теперь определите основной маршрут / и соответствующий ему обработчик запросов:

1
2
3
@app.route(«/»)
def main():
    return «Welcome!»

Затем проверьте, является ли исполняемый файл основной программой, и запустите приложение:

1
2
if __name__ == «__main__»:
   app.run()

Сохраните изменения и выполните app.py :

1
python app.py

Укажите в браузере http: // localhost: 5000 /, и вы должны получить приветственное сообщение.

Создание домашней страницы

Во-первых, когда приложение запускается, мы должны показать домашнюю страницу с последними элементами списка корзин, добавленными пользователями. Итак, давайте добавим нашу домашнюю страницу в нашу папку приложений.

Flask ищет файлы шаблонов внутри папки templates . Итак, перейдите в папку PythonApp и создайте папку с именем templates . Внутри templates создайте файл с именем index.html . Откройте index.html и добавьте следующий HTML:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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»>
 
 
</head>
 
<body>
 
    <div class=»container»>
        <div class=»header»>
            <nav>
                <ul class=»nav nav-pills pull-right»>
                    <li role=»presentation» class=»active»><a href=»#»>Home</a>
                    </li>
                    <li role=»presentation»><a href=»#»>Sign In</a>
                    </li>
                    <li role=»presentation»><a href=»showSignUp»>Sign Up</a>
                    </li>
                </ul>
            </nav>
            <h3 class=»text-muted»>Python Flask App</h3>
        </div>
 
        <div class=»jumbotron»>
            <h1>Bucket List App</h1>
            <p class=»lead»></p>
            <p><a class=»btn btn-lg btn-success» href=»showSignUp» role=»button»>Sign up today</a>
            </p>
        </div>
 
        <div class=»row marketing»>
            <div class=»col-lg-6″>
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus.
 
                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
 
                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
 
            <div class=»col-lg-6″>
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus.
 
                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
 
                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
        </div>
 
        <footer class=»footer»>
            <p>&copy;
        </footer>
 
    </div>
</body>
 
</html>

Откройте app.py и импортируйте render_template , который мы будем использовать для визуализации файлов шаблонов.

1
from flask import Flask, render_template

Измените метод main, чтобы он возвращал файл с отрендеренным шаблоном.

1
2
def main():
   return render_template(‘index.html’)

Сохраните изменения и перезапустите сервер. Направьте ваш браузер на http: // localhost: 5000 /, и у вас должен появиться следующий экран:

Домашняя страница приложения Bucket List

Создание страницы регистрации

Шаг 1: Настройка базы данных

Мы будем использовать MySQL в качестве серверной части. Поэтому войдите в MySQL из командной строки, или, если вы предпочитаете графический интерфейс, такой как MySQL , вы также можете использовать это. Сначала создайте базу данных с именем BucketList . Из командной строки:

1
mysql -u <username> -p

Введите требуемый пароль и, войдя в систему, выполните следующую команду для создания базы данных:

1
CREATE DATABASE BucketList;

Как только база данных будет создана, создайте таблицу с именем tbl_user как показано:

1
2
3
4
5
6
CREATE TABLE `BucketList`.`tbl_user` (
 `user_id` BIGINT NULL AUTO_INCREMENT,
 `user_name` VARCHAR(45) NULL,
 `user_username` VARCHAR(45) NULL,
 `user_password` VARCHAR(45) NULL,
 PRIMARY KEY (`user_id`));

Мы будем использовать Stored procedures для нашего приложения Python для взаимодействия с базой данных MySQL. Итак, после создания таблицы tbl_user создайте хранимую процедуру sp_createUser чтобы зарегистрировать пользователя.

При создании хранимой процедуры для создания пользователя в таблице tbl_user сначала нам нужно проверить, существует ли уже пользователь с таким username . Если он существует, нам нужно выдать ошибку пользователю, иначе мы создадим пользователя в пользовательской таблице. Вот как будет выглядеть хранимая процедура sp_createUser :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
    IN p_name VARCHAR(20),
    IN p_username VARCHAR(20),
    IN p_password VARCHAR(20)
)
BEGIN
    if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
     
        select ‘Username Exists !!’;
     
    ELSE
     
        insert into tbl_user
        (
            user_name,
            user_username,
            user_password
        )
        values
        (
            p_name,
            p_username,
            p_password
        );
     
    END IF;
END$$
DELIMITER ;

Шаг 2: Создайте интерфейс регистрации

Перейдите в PythonApp/templates и создайте файл HTML с именем signup.html . Добавьте следующий HTML-код в signup.html :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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»>
    <link href=»../static/signup.css» rel=»stylesheet»>
    
  </head>
 
  <body>
 
    <div class=»container»>
      <div class=»header»>
        <nav>
          <ul class=»nav nav-pills pull-right»>
            <li role=»presentation» ><a href=»main»>Home</a></li>
            <li role=»presentation»><a href=»#»>Sign In</a></li>
            <li role=»presentation» class=»active»><a href=»#»>Sign Up</a></li>
          </ul>
        </nav>
        <h3 class=»text-muted»>Python Flask App</h3>
      </div>
 
      <div class=»jumbotron»>
        <h1>Bucket List App</h1>
        <form class=»form-signin»>
        <label for=»inputName» class=»sr-only»>Name</label>
        <input type=»name» name=»inputName» id=»inputName» class=»form-control» placeholder=»Name» required autofocus>
        <label for=»inputEmail» class=»sr-only»>Email address</label>
        <input type=»email» name=»inputEmail» id=»inputEmail» class=»form-control» placeholder=»Email address» required autofocus>
        <label for=»inputPassword» class=»sr-only»>Password</label>
        <input type=»password» name=»inputPassword» id=»inputPassword» class=»form-control» placeholder=»Password» required>
         
        <button id=»btnSignUp» class=»btn btn-lg btn-primary btn-block» type=»button»>Sign up</button>
      </form>
      </div>
 
       
 
      <footer class=»footer»>
        <p>&copy;
      </footer>
 
    </div>
  </body>
</html>

Также добавьте следующий CSS как signup.css в статическую папку внутри PythonApp .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body {
  padding-top: 40px;
  padding-bottom: 40px;
}
 
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type=»email»] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type=»password»] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

В app.py добавьте еще один метод с именем showSignUp чтобы отобразить страницу регистрации после /showSignUp запроса в /showSignUp :

1
2
3
@app.route(‘/showSignUp’)
def showSignUp():
    return render_template(‘signup.html’)

Сохраните изменения и перезапустите сервер. Нажмите на кнопку « Зарегистрироваться» на домашней странице, и у вас должна появиться страница регистрации, как показано:

Зарегистрироваться на странице пользователя

Шаг 3: Реализация метода регистрации

Далее нам нужен серверный метод для взаимодействия пользовательского интерфейса с базой данных MySQL. Итак, перейдите к PythonApp и откройте app.py Создайте новый метод с именем signUp а также добавьте route /signUp . Вот как это выглядит:

1
2
3
@app.route(‘/signUp’)
def signUp():
    # create user code will be here !!

Мы будем использовать jQuery AJAX для публикации данных о регистрации в методе signUp , поэтому мы определим этот метод в определении маршрута.

1
2
3
@app.route(‘/signUp’,methods=[‘POST’])
def signUp():
    # create user code will be here !!

Чтобы прочитать опубликованные значения, нам нужно импортировать request из Flask.

1
from flask import Flask, render_template, request

Используя request мы можем прочитать опубликованные значения, как показано ниже:

1
2
3
4
5
6
7
@app.route(‘/signUp’,methods=[‘POST’])
def signUp():
 
    # read the posted values from the UI
    _name = request.form[‘inputName’]
    _email = request.form[‘inputEmail’]
    _password = request.form[‘inputPassword’]

Как только значения будут прочитаны, мы просто проверим, действительны ли они, и пока просто вернем простое сообщение:

01
02
03
04
05
06
07
08
09
10
11
12
13
@app.route(‘/signUp’,methods=[‘POST’])
def signUp():
 
    # read the posted values from the UI
    _name = request.form[‘inputName’]
    _email = request.form[‘inputEmail’]
    _password = request.form[‘inputPassword’]
 
    # validate the received values
    if _name and _email and _password:
        return json.dumps({‘html’:'<span>All fields good !!
    else:
        return json.dumps({‘html’:'<span>Enter the required fields

Также импортируйте json из Flask, так как мы используем его в приведенном выше коде для возврата данных json .

1
from flask import Flask, render_template, json, request

Шаг 4: Создайте запрос на регистрацию

Мы будем использовать jQuery AJAX для отправки запроса регистрации в метод Python. Загрузите и поместите jQuery в PythonApp/static/js и добавьте ссылку на него со страницы регистрации. Как только jQuery будет включен, мы добавим jQuery POST запрос, когда пользователь нажмет кнопку « Sign Up .

Итак, давайте прикрепим событие нажатия кнопки регистрации, как показано:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$(function() {
    $(‘#btnSignUp’).click(function() {
 
        $.ajax({
            url: ‘/signUp’,
            data: $(‘form’).serialize(),
            type: ‘POST’,
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

Сохраните все изменения и перезапустите сервер. На странице регистрации введите данные и нажмите « Зарегистрироваться» . Проверьте консоль браузера, и у вас должно появиться следующее сообщение:

1
{«html»: «<span>All fields good !!

Шаг 5: вызов хранимой процедуры MySQL

Получив name , email address и password , мы можем просто вызвать хранимую процедуру MySQL, чтобы создать нового пользователя.

Чтобы соединиться с MySQL, мы будем использовать Flask-MySQL , который является расширением Flask. Чтобы начать работу с Flask-MySQL , установите его с помощью менеджера пакетов pip :

1
pip install flask-mysql

Импортируйте MySQL внутри app.py :

1
from flask.ext.mysql import MySQL

Ранее мы определили наше приложение как показано:

1
app = Flask(__name__)

Наряду с этим включают следующие конфигурации MySQL:

1
2
3
4
5
6
7
8
mysql = MySQL()
 
# MySQL configurations
app.config[‘MYSQL_DATABASE_USER’] = ‘jay’
app.config[‘MYSQL_DATABASE_PASSWORD’] = ‘jay’
app.config[‘MYSQL_DATABASE_DB’] = ‘BucketList’
app.config[‘MYSQL_DATABASE_HOST’] = ‘localhost’
mysql.init_app(app)

Сначала давайте создадим соединение MySQL:

1
conn = mysql.connect()

Как только соединение будет создано, нам потребуется cursor для запроса нашей хранимой процедуры. Итак, используя соединение conn , создайте курсор.

1
cursor = conn.cursor()

Прежде чем вызывать хранимую процедуру создания пользователя, давайте добавим пароль в помощник, предоставленный Werkzeug . Импортируйте модуль в app.py :

1
from werkzeug import generate_password_hash, check_password_hash

Используйте солевой модуль для создания хешированного пароля.

1
_hashed_password = generate_password_hash(_password)

Теперь давайте вызовем процедуру sp_createUser :

1
cursor.callproc(‘sp_createUser’,(_name,_email,_hashed_password))

Если процедура выполнена успешно, то мы передадим изменения и вернем сообщение об успехе.

1
2
3
4
5
6
7
data = cursor.fetchall()
 
if len(data) is 0:
    conn.commit()
    return json.dumps({‘message’:’User created successfully !’})
else:
    return json.dumps({‘error’:str(data[0])})

Сохраните изменения и перезапустите сервер. Перейдите на страницу регистрации, введите name , email address и password и нажмите кнопку « Зарегистрироваться» . После успешного создания пользователя вы сможете увидеть сообщение в консоли браузера.

1
{«message»: «User created successfully !»}

Завершение

В этом руководстве мы увидели, как начать создавать веб-приложение с использованием Python Flask , MySQL и расширения Flask-MySQL . Мы создали и спроектировали таблицы базы данных и хранимую процедуру, а также реализовали функцию регистрации. В следующем уроке мы перенесем эту серию на следующий уровень, реализовав функции входа и некоторые другие функции.

Исходный код из этого урока доступен на GitHub .

Дайте нам знать ваши мысли в комментариях ниже!

Выучить питон

Изучите Python с нашим полным руководством по питону, независимо от того, начинаете ли вы или начинающий программист, ищущий новые навыки.

191
Share: