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 нужно сделать только:
1 |
pip install flask |
Когда вы закончите установку Flask, создайте папку FlaskApp. Перейдите в папку FlaskApp и создайте файл с именем app.py. Импортируйте модуль flask и создайте приложение с помощью Flask, как показано ниже:
1 |
from flask import Flask |
2 |
app = Flask(__name__) |
Теперь определим основной путь / и соответствующий ему обработчик запросов:
1 |
@app.route("/") |
2 |
def main(): |
3 |
return "Welcome!" |
Затем проверьте, является ли исполняемый файл главной программой и запустите приложение:
1 |
if __name__ == "__main__": |
2 |
app.run() |
Сохраните изменения и выполните app.py:
1 |
python app.py |
Укажите браузеру на http://localhost:5000/ и у вас должно появиться приветственное сообщение.
Создание домашней страницы
Во-первых, при запуске приложения мы должны показать домашнюю страницу с последними элементами списка дел, добавленными пользователями. Итак, добавим нашу домашнюю страницу в папку приложения.
Flask ищет файлы шаблонов внутри папки templates. Перейдите в папку PythonApp и создайте папку под названием templates. Внутри templates создайте файл index.html. Откройте index.html и пропишите следующий HTML:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
|
4 |
<head>
|
5 |
<title>Python Flask Bucket List App</title> |
6 |
|
7 |
|
8 |
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> |
9 |
|
10 |
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> |
11 |
|
12 |
|
13 |
</head>
|
14 |
|
15 |
<body>
|
16 |
|
17 |
<div class="container"> |
18 |
<div class="header"> |
19 |
<nav>
|
20 |
<ul class="nav nav-pills pull-right"> |
21 |
<li role="presentation" class="active"><a href="#">Home</a> |
22 |
</li>
|
23 |
<li role="presentation"><a href="#">Sign In</a> |
24 |
</li>
|
25 |
<li role="presentation"><a href="showSignUp">Sign Up</a> |
26 |
</li>
|
27 |
</ul>
|
28 |
</nav>
|
29 |
<h3 class="text-muted">Python Flask App</h3> |
30 |
</div>
|
31 |
|
32 |
<div class="jumbotron"> |
33 |
<h1>Bucket List App</h1> |
34 |
<p class="lead"></p> |
35 |
<p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a> |
36 |
</p>
|
37 |
</div>
|
38 |
|
39 |
<div class="row marketing"> |
40 |
<div class="col-lg-6"> |
41 |
<h4>Bucket List</h4> |
42 |
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> |
43 |
|
44 |
<h4>Bucket List</h4> |
45 |
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> |
46 |
|
47 |
<h4>Bucket List</h4> |
48 |
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> |
49 |
</div>
|
50 |
|
51 |
<div class="col-lg-6"> |
52 |
<h4>Bucket List</h4> |
53 |
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> |
54 |
|
55 |
<h4>Bucket List</h4> |
56 |
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> |
57 |
|
58 |
<h4>Bucket List</h4> |
59 |
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> |
60 |
</div>
|
61 |
</div>
|
62 |
|
63 |
<footer class="footer"> |
64 |
<p>© Company 2015</p> |
65 |
</footer>
|
66 |
|
67 |
</div>
|
68 |
</body>
|
69 |
|
70 |
</html>
|
Откройте app.py и импортируйте render_template, который мы будем использовать для рендеринга файлов шаблонов.
1 |
from flask import Flask, render_template |
Измените основной метод, чтобы вернуть созданный файл шаблона.
1 |
def main(): |
2 |
return render_template('index.html') |
Сохраните изменения и перезапустите сервер. Указав браузеру http://localhost:5000/ вы увидите следующее:
Создание страницы регистрации
Шаг 1. Настройка базы данных
Мы будем использовать MySQL в качестве сервера. Войдите в MySQL из командной строки или, если вы предпочитаете GUI, например, MySQL work bench, тоже можете пользоваться. Сначала создайте базу данных BucketList. Из командной строки:
1 |
mysql -u <username> -p |
Введите требуемый пароль и при входе в систему выполните следующую команду для создания базы данных:
1 |
CREATE DATABASE BucketList; |
Как только база данных будет создана, создайте таблицу tbl_user, как показано ниже:
1 |
CREATE TABLE `BucketList`.`tbl_user` ( |
2 |
`user_id` BIGINT NULL AUTO_INCREMENT, |
3 |
`user_name` VARCHAR(45) NULL, |
4 |
`user_username` VARCHAR(45) NULL, |
5 |
`user_password` VARCHAR(45) NULL, |
6 |
PRIMARY KEY (`user_id`)); |
Мы будем использовать Stored procedures в приложении Python для взаимодействия с базой данных MySQL. Поскольку таблица tbl_user была создана, создайте процедуру сохранения под названием sp_createUser, чтобы зарегистрировать пользователя.
При создании этой процедуры в таблице tbl_user сначала нужно проверить, не существует ли пользователь с тем же именем username. Если существует, нам нужно выдать ошибку, иначе мы создадим пользователя в таблице user. Вот как должна выглядеть процедура sp_createUser :
1 |
DELIMITER $$ |
2 |
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`( |
3 |
IN p_name VARCHAR(20), |
4 |
IN p_username VARCHAR(20), |
5 |
IN p_password VARCHAR(20) |
6 |
)
|
7 |
BEGIN
|
8 |
if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN |
9 |
|
10 |
select 'Username Exists !!'; |
11 |
|
12 |
ELSE
|
13 |
|
14 |
insert into tbl_user |
15 |
(
|
16 |
user_name, |
17 |
user_username, |
18 |
user_password
|
19 |
)
|
20 |
values
|
21 |
(
|
22 |
p_name, |
23 |
p_username, |
24 |
p_password
|
25 |
);
|
26 |
|
27 |
END IF; |
28 |
END$$ |
29 |
DELIMITER ; |
Шаг 2. Создание интерфейса регистрации
Перейдите в каталог PythonApp/templates и создайте файл HTML с именем signup.html. Добавьте следующий код HTML в signup.html:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<title>Python Flask Bucket List App</title> |
5 |
|
6 |
|
7 |
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> |
8 |
|
9 |
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> |
10 |
<link href="../static/signup.css" rel="stylesheet"> |
11 |
|
12 |
</head>
|
13 |
|
14 |
<body>
|
15 |
|
16 |
<div class="container"> |
17 |
<div class="header"> |
18 |
<nav>
|
19 |
<ul class="nav nav-pills pull-right"> |
20 |
<li role="presentation" ><a href="main">Home</a></li> |
21 |
<li role="presentation"><a href="#">Sign In</a></li> |
22 |
<li role="presentation" class="active"><a href="#">Sign Up</a></li> |
23 |
</ul>
|
24 |
</nav>
|
25 |
<h3 class="text-muted">Python Flask App</h3> |
26 |
</div>
|
27 |
|
28 |
<div class="jumbotron"> |
29 |
<h1>Bucket List App</h1> |
30 |
<form class="form-signin"> |
31 |
<label for="inputName" class="sr-only">Name</label> |
32 |
<input type="name" name="inputName" id="inputName" class="form-control" placeholder="Name" required autofocus> |
33 |
<label for="inputEmail" class="sr-only">Email address</label> |
34 |
<input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> |
35 |
<label for="inputPassword" class="sr-only">Password</label> |
36 |
<input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required> |
37 |
|
38 |
<button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign up</button> |
39 |
</form>
|
40 |
</div>
|
41 |
|
42 |
|
43 |
|
44 |
<footer class="footer"> |
45 |
<p>© Company 2015</p> |
46 |
</footer>
|
47 |
|
48 |
</div>
|
49 |
</body>
|
50 |
</html>
|
Добавьте такой CSS как signup.css в постоянную папку внутри PythonApp.
1 |
body { |
2 |
padding-top: 40px; |
3 |
padding-bottom: 40px; |
4 |
}
|
5 |
|
6 |
.form-signin { |
7 |
max-width: 330px; |
8 |
padding: 15px; |
9 |
margin: 0 auto; |
10 |
}
|
11 |
.form-signin .form-signin-heading, |
12 |
.form-signin .checkbox { |
13 |
margin-bottom: 10px; |
14 |
}
|
15 |
.form-signin .checkbox { |
16 |
font-weight: normal; |
17 |
}
|
18 |
.form-signin .form-control { |
19 |
position: relative; |
20 |
height: auto; |
21 |
-webkit-box-sizing: border-box; |
22 |
-moz-box-sizing: border-box; |
23 |
box-sizing: border-box; |
24 |
padding: 10px; |
25 |
font-size: 16px; |
26 |
}
|
27 |
.form-signin .form-control:focus { |
28 |
z-index: 2; |
29 |
}
|
30 |
.form-signin input[type="email"] { |
31 |
margin-bottom: -1px; |
32 |
border-bottom-right-radius: 0; |
33 |
border-bottom-left-radius: 0; |
34 |
}
|
35 |
.form-signin input[type="password"] { |
36 |
margin-bottom: 10px; |
37 |
border-top-left-radius: 0; |
38 |
border-top-right-radius: 0; |
39 |
}
|
В app.py добавьте метод showSignUp для отображения страницы регистрации после поступления запроса в /showSignUp:
1 |
@app.route('/showSignUp') |
2 |
def showSignUp(): |
3 |
return render_template('signup.html') |
Сохраните изменения и перезапустите сервер. Нажмите кнопку Sign Up на главной странице и у вас должна получиться такая страница регистрации:
Шаг 3. Внедрение метода регистрации
Затем нам нужен server-side метод для UI взаимодействия с базой данных MySQL. Перейдите в PythonApp и откройте app.py. Создайте новый метод signUp, а также добавьте /signUp. Так это выглядит:
1 |
@app.route('/signUp') |
2 |
def signUp(): |
3 |
# create user code will be here !!
|
Мы будем использовать jQuery AJAX для публикации данных регистрации в методе signUp, поэтому укажем метод в определении маршрута.
1 |
@app.route('/signUp',methods=['POST']) |
2 |
def signUp(): |
3 |
# create user code will be here !!
|
Чтобы прочитать опубликованные значения, нам нужно импортировать request из Flask.
1 |
from flask import Flask, render_template, request |
С помощью request мы прочитаем значения, как показано ниже:
1 |
@app.route('/signUp',methods=['POST']) |
2 |
def signUp(): |
3 |
|
4 |
# read the posted values from the UI
|
5 |
_name = request.form['inputName'] |
6 |
_email = request.form['inputEmail'] |
7 |
_password = request.form['inputPassword'] |
Как только значения прочитаны, мы проверяем, верны ли они, а пока давайте вернём простое сообщение:
1 |
@app.route('/signUp',methods=['POST']) |
2 |
def signUp(): |
3 |
|
4 |
# read the posted values from the UI
|
5 |
_name = request.form['inputName'] |
6 |
_email = request.form['inputEmail'] |
7 |
_password = request.form['inputPassword'] |
8 |
|
9 |
# validate the received values
|
10 |
if _name and _email and _password: |
11 |
return json.dumps({'html':'<span>All fields good !!</span>'}) |
12 |
else: |
13 |
return json.dumps({'html':'<span>Enter the required fields</span>'}) |
Импортируйте json из Flask, так как мы используем его для возвращения данных json.
1 |
from flask import Flask, render_template, json, request |
Шаг 4. Создание запроса на регистрацию
Мы будем использовать jQuery AJAX для отправки запроса на регистрацию в метод Python. Загрузите jQuery , разместите его внутри PythonApp/static/js и добавьте ссылку на него со страницы регистрации. Как только jQuery будет включен, мы добавим запрос POST JQuery при нажатии кнопки Sign Up.
Итак, давайте присоединим событие нажатия кнопки, как показано:
1 |
$(function() { |
2 |
$('#btnSignUp').click(function() { |
3 |
|
4 |
$.ajax({ |
5 |
url: '/signUp', |
6 |
data: $('form').serialize(), |
7 |
type: 'POST', |
8 |
success: function(response) { |
9 |
console.log(response); |
10 |
},
|
11 |
error: function(error) { |
12 |
console.log(error); |
13 |
}
|
14 |
});
|
15 |
});
|
16 |
});
|
Сохраните изменения и перезапустите сервер. На странице Sign Up заполните данные и нажмите Sign Up. Проверьте браузер, у вас должно получиться следующее сообщение:
1 |
{"html": "<span>All fields good !!</span>"} |
Шаг 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 |
mysql = MySQL() |
2 |
|
3 |
# MySQL configurations
|
4 |
app.config['MYSQL_DATABASE_USER'] = 'jay' |
5 |
app.config['MYSQL_DATABASE_PASSWORD'] = 'jay' |
6 |
app.config['MYSQL_DATABASE_DB'] = 'BucketList' |
7 |
app.config['MYSQL_DATABASE_HOST'] = 'localhost' |
8 |
mysql.init_app(app) |
Сначала давайте создадим соединение MySQL:
1 |
conn = mysql.connect() |
Когда соединение установлено, нам понадобится cursor для запроса stored процедуры. Через conn соединение создаём курсор.
1 |
cursor = conn.cursor() |
Перед вызовом stored процедуры, давайте сделаем надёжный пароль с помощником от 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 |
data = cursor.fetchall() |
2 |
|
3 |
if len(data) is 0: |
4 |
conn.commit() |
5 |
return json.dumps({'message':'User created successfully !'}) |
6 |
else: |
7 |
return json.dumps({'error':str(data[0])}) |
Сохраните изменения и перезапустите сервер. На странице регистрации введите name, email address и password и нажмите кнопку Sign Up. После успешного создания пользователя вы увидите сообщение в консоли браузера.
1 |
{"message": "User created successfully !"}
|
Подводя итоги
В этом уроке мы рассмотрели начало работы по созданию приложения с помощью Python Flask, MySQL и расширения Flask-MySQL . Мы создали и прописали таблицы базы данных, stored процедуру, а также обеспечили функциональность регистрации. В следующем уроке мы перейдём на уровень выше, реализовав функции входа в систему и некоторые ещё.
Исходный код к этому уроку доступен на GitHub.
Сообщите нам свои мысли в комментариях!
By
