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

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

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

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

Введение в Python Flask

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

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

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

Установка Flask

Установить Flask легко и просто. С менеджером пакетов pip нужно сделать только:

pip install flask

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

from flask import Flask
app = Flask(__name__)

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

@app.route("/")
def main():
    return "Welcome!"

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

if __name__ == "__main__":
    app.run()

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

python app.py

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

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

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

Flask ищет файлы шаблонов внутри папки templates. Перейдите в папку PythonApp и создайте папку под названием templates. Внутри templates создайте файл index.html. Откройте index.html и пропишите следующий 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">


</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. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <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. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
        </div>

        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

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

from flask import Flask, render_template

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

def main():
    return render_template('index.html')

Сохраните изменения и перезапустите сервер. Указав браузеру http://localhost:5000/ вы увидите следующее:

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

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

Мы будем использовать MySQL в качестве сервера. Войдите в MySQL из командной строки или, если вы предпочитаете GUI, например, MySQL work bench, тоже можете пользоваться. Сначала создайте базу данных BucketList. Из командной строки:

mysql -u <username> -p

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

CREATE DATABASE BucketList;

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

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. Если существует, нам нужно выдать ошибку, иначе мы создадим пользователя в таблице user. Вот как должна выглядеть процедура sp_createUser :

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:

<!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; Company 2015</p>
      </footer>

    </div>
  </body>
</html>

Добавьте такой CSS как signup.css в постоянную папку внутри PythonApp.

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:

@app.route('/showSignUp')
def showSignUp():
    return render_template('signup.html')

Сохраните изменения и перезапустите сервер. Нажмите кнопку Sign Up на главной странице и у вас должна получиться такая страница регистрации:

Шаг 3. Внедрение метода регистрации

Затем нам нужен server-side метод для UI взаимодействия с базой данных MySQL. Перейдите в PythonApp и откройте app.py. Создайте новый метод signUp, а также добавьте /signUp. Так это выглядит:

@app.route('/signUp')
def signUp():
    # create user code will be here !!

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

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

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

from flask import Flask, render_template, request

С помощью request мы прочитаем значения, как показано ниже:

@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']

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

@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 !!</span>'})
    else:
        return json.dumps({'html':'<span>Enter the required fields</span>'})

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

from flask import Flask, render_template, json, request

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

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

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

$(function() {
    $('#btnSignUp').click(function() {

        $.ajax({
            url: '/signUp',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

Сохраните изменения и перезапустите сервер. На странице Sign Up заполните данные и нажмите Sign Up. Проверьте браузер, у вас должно получиться следующее сообщение:

{"html": "<span>All fields good !!</span>"}

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

У нас есть name, email address и password, мы вызываем процедуру MySQL для создания нового пользователя.

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

pip install flask-mysql

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

from flask.ext.mysql import MySQL

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

app = Flask(__name__)

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

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:

conn = mysql.connect()

Когда соединение установлено, нам понадобится cursor для запроса stored процедуры. Через conn соединение создаём курсор.

cursor = conn.cursor()

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

from werkzeug import generate_password_hash, check_password_hash

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

_hashed_password = generate_password_hash(_password)

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

cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

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

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 и нажмите кнопку Sign Up. После успешного создания пользователя вы увидите сообщение в консоли браузера.

{"message": "User created successfully !"}

Подводя итоги

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

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

Сообщите нам свои мысли в комментариях!