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