Как создать свое первое веб-приложение с помощью Flask и Python

Вступление

Flask — это легкая веб‑платформа Python, которая предоставляет полезные инструменты и функции для создания веб‑приложений на языке Python. Это дает разработчикам гибкость и является доступной средой для новых разработчиков, поскольку вы можете быстро создать веб‑приложение, используя только один файл Python. Flask также является расширяемым и не требует определенной структуры каталогов и не требует сложного шаблонного кода перед началом работы.

Знание Flask позволит вам быстро создавать веб‑приложения на Python. Вы можете воспользоваться библиотеками Python для добавления расширенных функций в свое веб‑приложение, таких как хранение данных в базе данных или проверка веб‑форм.

В этом уроке вы создадите небольшое веб‑приложение, которое отображает текст HTML в браузере. Вы установите Flask, напишите и запустите приложение Flask, а также запустите приложение в режиме разработки. Вы будете использовать маршрутизацию для отображения различных веб‑страниц, которые служат разным целям в вашем веб‑приложении. Вы также будете использовать функции просмотра, чтобы позволить пользователям взаимодействовать с приложением через динамические маршруты. Наконец, вы воспользуетесь отладчиком для устранения ошибок.

Прежде чем…

Локальная среда программирования Python 3. Следуйте руководству для вашего дистрибутива в Как установить и настроить локальную среду программирования для Python 3. В этом руководстве мы назовем наш каталог проекта flask_app.
Понимание основных концепций Python 3, таких кактипы данных,списки,functions и другие подобные концепции. Если вы не знакомы с Python, ознакомьтесь с нашим Как кодировать на Python 3 серия.
Понимание основных концепций HTML. Вы можете просмотреть руководствоКак создать веб‑сайт с помощью HTML. серия для базовых знаний.

Установка Flask

На этом шаге вы активируете среду Python и установите Flask с помощью установщика пакета pip.

Во-первых, активируйте среду программирования, если вы еще этого не сделали:

source env/bin/activate

После активации среды программирования установите Flask с помощью команды pip install:

pip install flask

После завершения установки вы увидите список установленных пакетов в последних частях вывода, аналогичный следующему:

...

Installing collected packages: Werkzeug, MarkupSafe, Jinja2, itsdangerous, click, flask
Successfully installed Jinja2-3.0.1 MarkupSafe-2.0.1 Werkzeug-2.0.1 click-8.0.1 flask-2.0.1 itsdangerous-2.0.1

Это означает, что установка Flask также установила несколько других пакетов. Эти пакеты являются зависимостями, которые необходимы Flask для выполнения различных функций.

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

Создание простого приложения

Теперь, когда у вас настроена среда программирования, вы начнете использовать Flask. На этом этапе вы создадите небольшое веб‑приложение Flask внутри файла Python, в котором вы напишете HTML‑код для отображения в браузере.

В каталоге flask_app откройте файл с именем app.py для редактирования, используйте IDLE или ваш любимый текстовый редактор напишите следующий код:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'

Сохраните и закройте файл.

В приведенном выше блоке кода вы сначала импортируете объект Flask из пакета flask. Затем вы используете его для создания экземпляра приложения Flask, присвоив ему имя app. Вы передаете специальную переменную __name__, которая содержит имя текущего модуля Python. Это имя сообщает экземпляру, где он находится; это нужно, потому что Flask устанавливает некоторые пути за кулисами.

Создав экземпляр приложения, вы можете использовать его для обработки входящих веб‑запросов и отправки ответов пользователю. @app.route — это декоратор, который превращает обычную функцию Python в функцию просмотра Flask, который преобразует возвращаемое значение функции в HTTP-ответ, отображаемый HTTP-клиентом, например веб‑браузером. Вы передаете значение ‘/‘ в @app.route (), чтобы указать, что эта функция будет отвечать на веб‑запросы для URL-адреса /, который является основным URL-адресом.

Функция просмотра hello() возвращает строку ‘<h1>Hello, World!</h1>‘ в качестве ответа HTTP..

Теперь у вас есть простое приложение Flask в файле Python с именем app.py, на следующем шаге вы запустите приложение, чтобы увидеть результат функции просмотра hello(), отображаемой в веб‑браузере.

Запуск приложения

После создания файла, содержащего приложение Flask, вы запустите его с помощью интерфейса командной строки Flask, чтобы запустить сервер разработки и отобразить в браузере HTML‑код, который вы написали в качестве возвращаемого значения для функции просмотра hello() в предыдущем разделе. шаг.

Первый, находясь в каталоге flask_app с активированной виртуальной средой, сообщите Flask, где найти приложение (app.py в вашем случае), используя переменную среды FLASK_APP с помощью следующей команды (в Windows используйте set вместо export):

export FLASK_APP=app

Затем укажите, что вы хотите запустить приложение в режиме разработки (чтобы вы могли использовать отладчик для обнаружения ошибок) с помощью переменной среды FLASK_ENV:

export FLASK_ENV=development

Наконец, запустите приложение, используя команду flask run:

flask run

После запуска приложения вы увидите примерно это:

 * Serving Flask app "app" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 296-353-699

Предыдущие выходные данные содержат несколько частей информации, например:

Название приложения, которое вы запускаете («app»).
Среда, в которой выполняется приложение (development).
Debug mode (Режим отладки): on означает, что отладчик Flask запущен. Это полезно при разработке, поскольку предоставляет подробные сообщения об ошибках, когда что-то идет не так, что упрощает поиск и устранение неисправностей.
Приложение работает локально по URL-адресу http://127.0.0.1:5000/. 127.0.0.1 — это IP-адрес, который представляет локальный хост вашего компьютера, а: 5000 — это номер порта.

Откройте браузер и введите URL-адрес http://127.0.0.1:5000/. Вы увидите текст Hello, World! в заголовке <h1> в качестве ответа. Это подтверждает, что ваше приложение успешно работает.

Если вы хотите остановить сервер разработки, нажмите CTRL + C.

Предупреждение: Flask использует простой веб‑сервер для обслуживания вашего приложения в среде разработки, что также означает, что отладчик Flask работает, чтобы упростить обнаружение ошибок. Вы не должны использовать этот сервер разработки в производственном развертывании. Дополнительную информацию см. На странице «Параметры развертывания» в документации Flask. Вы также можете ознакомиться с этим руководством по развертыванию Flask с помощью Gunicorn или с uWSGI, или вы можете использовать платформу приложений DigitalOcean для развертывания приложения Flask, следуя инструкциям по развертыванию приложения Flask с помощью Gunicorn на платформе приложений.

Чтобы продолжить разработку приложения app.py, оставьте сервер разработки запущенным и откройте другое окно терминала. Перейдите в каталог flask_app, активируйте виртуальную среду, установите переменные среды FLASK_ENV и FLASK_APP и перейдите к следующим шагам. (Эти команды перечислены ранее на этом этапе.)

Примечание. При открытии нового терминала или когда вы закрываете тот, на котором запущен сервер разработки, и хотите его перезапустить, важно помнить об активации виртуальной среды и установке переменных среды FLASK_ENV и FLASK_APP для команды запуска flask для его нормальной работы. Вам нужно всего лишь один раз запустить сервер в одном окне терминала.

Пока сервер разработки приложения Flask уже запущен, невозможно запустить другое приложение Flask с той же командой запуска flask. Это связано с тем, что запуск Flask по умолчанию использует номер порта 5000, и после его выполнения становится недоступным для запуска другого приложения, поэтому вы получите сообщение об ошибке, подобное следующему:
OSError: [Errno 98] Address already in use
Чтобы решить эту проблему, либо остановите сервер, который в настоящее время работает, с помощью CTRL + C, затем снова запустите flask run, либо, если вы хотите запустить оба приложения одновременно, вы можете передать другой номер порта аргументу -p для Например, чтобы запустить другое приложение на порту 5001, используйте следующую команду:
flask run -p 5001
При этом вы можете запустить одно приложение на http://127.0.0.1:5000/, а другое — на http://127.0.0.1:5001/, если хотите.

Теперь у вас есть небольшое веб‑приложение Flask. Вы запустили приложение и отобразили информацию в веб‑браузере. Далее познакомимся с маршрутами и тем, как их использовать для обслуживания нескольких веб‑страниц.

Маршруты и функции просмотра

На этом этапе вы добавите в приложение несколько маршрутов для отображения разных страниц в зависимости от запрошенного URL. Вы также узнаете о функциях просмотра и их использовании.

Маршрут — это URL-адрес, который вы можете использовать, чтобы определить, что пользователь получает, когда посещает ваше веб‑приложение в своем браузере. Например, http://127.0.0.1:5000/ — это основной маршрут, который может использоваться для отображения главной страницы. URL-адрес http://127.0.0.1:5000/about может быть другим маршрутом, используемым для страницы «About», которая дает посетителю некоторую информацию о вашем веб‑приложении. Точно так же вы можете создать маршрут, который позволяет пользователям входить в ваше приложение по адресу http://127.0.0.1:5000/login.

В настоящее время ваше приложение Flask имеет один маршрут, который обслуживает пользователей, запрашивающих основной URL-адрес (http://127.0.0.1:5000/). Чтобы продемонстрировать, как добавить новую веб‑страницу в приложение, вы отредактируете файл приложения, чтобы добавить еще один маршрут, который предоставляет информацию о вашем веб‑приложении по адресу http://127.0.0.1:5000/about.

Сначала откройте свое app.py файл для редактирования и добавьте следующий код в конец файла:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

Сохраните и закройте файл.

Вы добавили новую функцию about(). Эта функция украшена декоратором @app.route(), который преобразует ее в функцию представления, которая обрабатывает запросы к конечной точке http://127.0.0.1:5000/about.

Когда сервер разработки запущен, перейдите по следующему URL-адресу в своем браузере:

http://127.0.0.1:5000/about

Вы увидите текст This is a Flask web application. отображается в заголовке <h3> HTML.

Вы также можете использовать несколько маршрутов для одной функции просмотра. Например, вы можете обслуживать индексную страницу как в /, так и в /index/. Для этого откройте файл app.py для редактирования и добавьте еще один декоратор к функции просмотра hello():

from flask import Flask

app = Flask(__name__)

@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'

@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

Сохраните и закройте файл.

После добавления этого нового декоратора вы можете получить доступ к странице индекса как по адресу http://127.0.0.1:5000/, так и по адресу http://127.0.0.1:5000/index.

Теперь вы понимаете, что такое маршруты, как использовать их для создания функций просмотра и как добавлять новые маршруты в ваше приложение. Затем вы воспользуетесь динамическими маршрутами, чтобы позволить пользователям управлять ответом приложения.

Динамические маршруты

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

Обычно пользователи не взаимодействуют с веб‑приложением, редактируя URL вручную. Скорее, пользователь взаимодействует с элементами на странице, которые ведут к разным URL-адресам в зависимости от ввода и действия пользователя, но для целей этого руководства вы отредактируете URL-адрес, чтобы продемонстрировать, как заставить приложение по-разному реагировать с разными URL-адресами.

Сначала откройте файл app.py для редактирования. Если вы разрешаете пользователю отправлять что-то в ваше веб‑приложение, например значение в URL-адресе, как вы собираетесь сделать в следующем редактировании, вы всегда должны помнить, что ваше приложение не должно напрямую отображать ненадежные данные (данные, которые пользователь представляет). Чтобы безопасно отображать пользовательские данные, используйте функцию escape(), которая поставляется с пакетом markupsafe, который был установлен вместе с Flask.

Отредактируйте app.py и добавьте следующую строку в начало файла над импортом Flask:

from markupsafe import escape
from flask import Flask

# ...

Затем добавьте в конец файла следующий маршрут:

# ...

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

Сохраните и закройте файл.

Этот новый маршрут имеет переменную секцию . Это говорит Flask взять значение из URL-адреса и передать его функции просмотра. Переменная URL передает аргумент ключевого слова функции просмотра capitalize(). Аргумент имеет то же имя, что и переменная URL (в данном случае слово). При этом вы можете получить доступ к слову, переданному через URL-адрес, и ответить его версией с заглавной буквы, используя метод capitalize() в Python.

Вы используете функцию escape(), которую вы импортировали ранее, чтобы отобразить строку слова как текст. Это важно, чтобы избежать атак с использованием межсайтовых сценариев (XSS). Если пользователь отправляет вредоносный код JavaScript вместо слова, escape() отобразит его как текст, а браузер не запустит его, сохраняя безопасность вашего веб‑приложения.

Чтобы отобразить слово с заглавной буквы внутри заголовка HTML <h1>, используйте метод Python format(), подробнее об этом методе см. Как использовать средства форматирования строк в Python 3.

Запустив сервер разработки, откройте браузер и перейдите по следующим URL-адресам. Вы можете заменить выделенные слова любым словом по вашему выбору.

http://127.0.0.1:5000/capitalize/hello
http://127.0.0.1:5000/capitalize/flask
http://127.0.0.1:5000/capitalize/python

Вы можете увидеть слово в URL, написанное с заглавной буквы в теге <h1> на странице.

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

Откройте файл app.py для редактирования и добавьте в конец файла следующий маршрут:

# ...

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

Сохраните и закройте файл.

В этом маршруте вы используете специальный преобразователь int с переменной URL (/add///), который принимает только положительные целые числа. По умолчанию переменные URL-адреса считаются строками и рассматриваются как таковые.

Запустив сервер разработки, откройте браузер и перейдите по следующему URL-адресу:

http://127.0.0.1:5000/add/5/5/

Результатом будет сумма двух чисел (в данном случае 10).

Теперь вы понимаете, как использовать динамические маршруты для отображения разных ответов в одном маршруте в зависимости от запрошенного URL-адреса. Затем вы узнаете, как устранять неполадки и отлаживать приложение Flask в случае ошибки.

Отладка приложения Flask

При разработке веб‑приложения вы часто будете сталкиваться с ситуациями, когда приложение отображает ошибку вместо ожидаемого поведения. Вы можете неправильно написать переменную или забыть определить или импортировать функцию. Чтобы упростить решение этих проблем, Flask предоставляет отладчик при запуске приложения в режиме разработки. На этом шаге вы узнаете, как исправить ошибки в вашем приложении с помощью отладчика Flask.

Чтобы продемонстрировать, как обрабатывать ошибки, вы создадите маршрут, который приветствует пользователя из списка имен пользователей.

Откройте файл app.py для редактирования и добавьте в конец файла следующий маршрут:

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    return '<h2>Hi {}</h2>'.format(users[user_id])

Сохраните и закройте файл.

В приведенном выше маршруте функция просмотра greet_user() получает аргумент user_id из переменной URL user_id. Вы используете преобразователь int, чтобы принимать положительные целые числа. Внутри функции у вас есть список Python под названием users, который содержит три строки, представляющие имена пользователей. Функция просмотра возвращает строку, которая создается в зависимости от предоставленного user_id. Если user_id равен 0, ответом будет Привет, Боб в теге <h2>, потому что Боб является первым элементом в списке (значение users[0]).

Запустив сервер разработки, откройте браузер и перейдите по следующим URL-адресам:

http://127.0.0.1:5000/users/0
http://127.0.0.1:5000/users/1
http://127.0.0.1:5000/users/2

Вы получите следующие ответы:

Hi Bob
Hi Jane
Hi Adam

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

http://127.0.0.1:5000/users/3

Вверху на странице указано имя исключения Python, которым является IndexError, что указывает на то, что индекс списка (в данном случае 3) находится за пределами диапазона списка (который составляет только от 0 до 2, потому что в списке всего три элемента). В отладчике вы можете увидеть трассировку, которая сообщает вам строки кода, вызвавшие это исключение.

Последние две строки трассировки обычно указывают источник ошибки. В вашем случае строки могут быть примерно такими:

File "/home/USER/flask_app/app.py", line 28, in greet_user
    return '<h2>Hi {}</h2>'.format(users[user_id])

Это говорит о том, что ошибка возникает из-за функции greet_user() внутри файла app.py, в частности, в строке возврата.

Знание исходной строки, вызывающей исключение, поможет вам определить, что пошло не так в вашем коде, и решить, что делать, чтобы это исправить.

В этом случае вы можете использовать простую команду try ... except, чтобы исправить эту ошибку. Если запрошенный URL-адрес имеет индекс за пределами диапазона списка, пользователь получит ошибку 404 Not Found, которая является ошибкой HTTP, которая сообщает пользователю, что страница, которую он ищет, не существует.

Откройте файл app.py для редактирования. Чтобы ответить с ошибкой HTTP 404, вам понадобится функция Flask abort(), которую можно использовать для создания ответов об ошибках HTTP. Измените вторую строку файла, чтобы также импортировать эту функцию:

from markupsafe import escape
from flask import Flask, abort

Затем отредактируйте функцию просмотра greet_user(), чтобы она выглядела следующим образом:

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

Вы использовали попытку выше, чтобы проверить возвращаемое выражение на наличие ошибок. Если ошибки не было, то есть user_id имеет значение, соответствующее индексу в списке пользователей, приложение ответит соответствующим приветствием. Если значение user_id выходит за пределы диапазона списка, возникает исключение IndexError,
и вы используете except, чтобы поймать ошибку и ответить ошибкой HTTP 404 с помощью вспомогательной функции Flask abort().

Теперь, когда сервер разработки запущен, снова посетите URL-адрес:

http://127.0.0.1:5000/users/3

На этот раз вы увидите стандартную страницу с ошибкой 404, информирующую пользователя о том, что страница не существует.

К концу этого руководства ваш файл app.py будет выглядеть так:

from markupsafe import escape
from flask import Flask, abort

app = Flask(__name__)


@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

Теперь у вас есть общее представление о том, как использовать отладчик Flask для устранения ошибок и помочь вам определить соответствующий курс действий для их исправления.

Заключение

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

Вы также узнали, как использовать динамические маршруты, чтобы позволить пользователям взаимодействовать с вашим веб‑приложением через URL-адрес, и как использовать отладчик для устранения ошибок.

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

Мотиватор How To Create Your First Web Application Using Flask and Python 3

Получить в PDF

Как создать свое первое веб-приложение с помощью Flask и Python

Вступление

Прежде чем…

Установка Flask

Создание простого приложения

Hello, World!

Запуск приложения

Маршруты и функции просмотра

Динамические маршруты

Отладка приложения Flask

Заключение

Опубликовано Вадим В. Костерин

Оставьте комментарий

Отменить ответ