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>© 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>© 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.
Сообщите нам свои мысли в комментариях!
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