Руководство: Работа с веб-фреймворком Flask в Visual Studio

Статья
2025-01-26

Эта статья является первым шагом в трех частях серии учебников, демонстрирующих работу с Flask в Visual Studio. Flask — это упрощенная платформа Python для веб-приложений, которая предоставляет основы маршрутизации URL-адресов и отрисовки страниц. Flask называется "микро" платформой, так как она не предоставляет напрямую такие функции, как проверка формы, абстракция базы данных, проверка подлинности и т. д. Эти функции предоставляются особыми пакетами Python, называемыми расширениями Flask . Расширения легко интегрируются с Flask, чтобы они отображались, как если бы они были частью самого Flask. Например, сам Flask не предоставляет подсистему шаблонов страницы. Процесс создания шаблонов осуществляется с помощью расширений, таких как Jinja и Jade, как показано в этом руководстве.

На шаге 1 руководства вы узнаете, как:

Создание решения Visual Studio и проекта Flask
Изучите стандартный код проекта и запустите проект
Создание репозитория Git для поддержания изменений в проекте Flask
Работа с элементами управления исходным кодом Git
Создание виртуальной среды для проекта Flask

Это руководство отличается от Flask Quickstart. Вы узнаете больше о Flask и о том, как использовать шаблоны проектов Flask для предоставления более обширной отправной точки для ваших проектов. Шаблоны автоматически устанавливают пакет Flask при создании проекта, в то время как в кратком руководстве показано, как установить пакет вручную.

Необходимые условия

Visual Studio 2022 в Windows со следующими параметрами, выбранными в Visual Studio Installer:
- На вкладке Рабочие нагрузки выберите опцию Python-разработка. Дополнительные сведения см. в статье Установка поддержки Python в Visual Studio.
- На вкладке Отдельные компоненты в разделе средств кодавыберите параметр Git для Windows.

Visual Studio 2017 или Visual Studio 2019 в Windows со следующими параметрами, выбранными в Visual Studio Installer:
- На вкладке Рабочие нагрузки выберите опцию Python-разработка. Дополнительные сведения см. в статье Установка поддержки Python в Visual Studio.
- На вкладке Отдельные компоненты в разделе средств разработки кодавыберите опции Git для Windows и расширение GitHub для Visual Studio.

Шаблоны проектов Flask включены во все более ранние версии средств Python для Visual Studio. Сведения о шаблоне могут отличаться от описаний в этом руководстве.

Visual Studio для Mac не поддерживается. Дополнительные сведения см. в статье Что происходит с Visual Studio для Mac? Visual Studio Code в Windows, Mac и Linux хорошо работает с Python с помощью доступных расширений.

Создание решения Visual Studio и проекта Flask

На шаге 1 этого руководства вы создадите одно решение Visual Studio для хранения двух отдельных проектов Flask. Проекты создаются с помощью различных шаблонов проектов Flask, включенных в Visual Studio. Сохраняя проекты в одном решении, вы можете легко переключаться между различными файлами для сравнения.

Выполните следующую процедуру, чтобы создать решение и веб-проект Flask:

В Visual Studio выберите Файл>Создать>Project и найдите "Flask". Затем выберите шаблон пустого веб-проекта Flask и выберите Далее.
Настройте новый проект и решение:
1. Задайте имени проекта Visual Studio значение BasicProject. Это имя также используется для проекта Flask.
2. Укажите расположение для Visual Studio, чтобы сохранить решение и проект.
3. Снимите решение Place и project в том же каталоге.
4. Задайте имени решения значение LearningFlask. Решение служит контейнером для нескольких проектов в этой серии уроков.
Выберите Создать.
Через некоторое время Visual Studio отображает файл спецификации пакета Python запрос "requirements.txt" обнаружен в проекте BasicProject.:

В диалоговом окне указывается, что выбранный шаблон содержит файл requirements.txt, который можно использовать для создания виртуальной среды для проекта.
Выберите X справа, чтобы закрыть запрос. Далее в этом руководстве вы создадите виртуальную среду и гарантируете, что управление версиями исключает данную среду. (Среда всегда может быть создана позже из файла requirements.txt.)

В Visual Studio выберите Файл>Создать>Проект и найдите "Flask". Затем выберите шаблон Пустой проект веб-приложения Flask. (Шаблон также находится в диалоговом окне в разделе Python>Web в списке слева.)
В нижней части диалогового окна настройте новый проект и решение:
1. Задайте имени проекта Visual Studio значение BasicProject. Это имя также используется для проекта Flask.
2. Укажите расположение для Visual Studio, чтобы сохранить решение и проект.
3. Задайте имени решения значение LearningFlask. Решение служит контейнером для нескольких проектов в этой серии уроков.
4. Выберите параметр Создать каталог для решения (по умолчанию).
5. Выберите опцию Создать новый репозиторий Git. Visual Studio создает локальный репозиторий Git при создании решения.
  
  Если этот параметр не отображается, запустите установщик Visual Studio. На вкладке Отдельные компоненты в разделе Инструменты кодадобавьте опции Git для Windows и GitHub расширение для Visual Studio.
Выберите ОК.
Через некоторое время Visual Studio отображает запрос для этого проекта требуются внешние пакеты:

В диалоговом окне указывается, что выбранный шаблон содержит файл requirements.txt, ссылающийся на последний пакет Flask 1.x. Вы можете выбрать Показать необходимые пакеты, чтобы увидеть точные зависимости.
Выберите параметр я установлю их сам для закрытия диалогового окна. Далее в этом руководстве вы создадите виртуальную среду и гарантируете, что управление версиями исключает данную среду. (Среда всегда может быть создана позже из файла requirements.txt.)

Проверка элементов управления Git

В следующей процедуре вы ознакомились с поддержкой Visual Studio для системы управления версиями Git.

Важный

С выпуском Visual Studio 2019 версии 16.8, по умолчанию используется интерфейс управления версиями Git. Чтобы узнать больше о сравнении с Team Explorer, см. страницу , где представлены параллельные сравнения Team Explorer и Git.

Однако, если вы предпочитаете продолжать использовать Team Explorer в Visual Studio 2019, перейдите в раздел Tools>Options>Environment>Preview Features, а затем переключите флажок New Git user experience. (Этот параметр недоступен в Visual Studio 2022 и более поздних версиях.) Дополнительные сведения см. в разделе Connect to projects in Team Explorer.

Чтобы зафиксировать проект в локальной системе управления версиями, выберите Добавить в систему управления версиями в нижнем правом углу главного окна Visual Studio, а затем выберите Git:

Откроется окно репозитория Create Git, где можно создать и отправить новый репозиторий.
После создания репозитория панель элементов управления Git появится в правом нижнем углу главного окна Visual Studio:

Слева направо на панели элементов управления Git отображается количество исходящих и входящих фиксаций (стрелки #/#), количество незафиксированных изменений (карандаш), имя текущей ветви и текущее имя репозитория. Элементы управления Git также доступны в меню Git на главной панели инструментов.
На панели элементов управления Git выберите изменения (иконка карандаша #), чтобы открыть окно изменения Git. Вы также можете выбрать Просмотр>изменений Git (Ctrl+O, Ctrl+G):

В этом окне отображаются сведения о любых незафиксированных изменениях, включая сохраненные изменения. Поскольку ваш недавно созданный проект автоматически зафиксирован в системе управления версиями, вы не видите никаких ожидающих изменений.
На панели управления Git выберите коммиты (стрелки #/#), а затем выберите Просмотреть все коммиты:

Откроется окно репозитория Git . Вы также можете выбрать Просмотр>репозитория Git (Ctrl+O, Ctrl+R):

В этом окне отображаются сведения о текущем репозитории в левой области и о текущей ветви с исходящими и входящими коммитами в правой области.

Чтобы просмотреть режим различий для файла, выберите коммит на средней панели. Предыдущая версия отображается слева и измененная версия отображается справа. Сведения также содержат автора изменений, коммитера и сообщение коммита.

Так как вы выбрали параметр Create new Git repository в диалоговом окне New Project, проект будет коммитирован в локальный репозиторий сразу после завершения процесса создания. В этой процедуре вы ознакомьтесь с элементами управления Git в Visual Studio и окном Team Explorer, в котором вы работаете с системой контроля версий.

Проверьте элементы управления Git в нижнем углу главного окна Visual Studio. Слева направо эти элементы управления показывают неотправленные коммиты (стрелка #), незафиксированные изменения (карандаш #), имя репозитория и текущую ветвь:

Заметка

Если вы не выберете Создать новый Git-репозиторий в диалоговом окне New Project, элементы управления Git отображают только команду Добавить в контроль версий, которая создаёт локальный репозиторий.
Выберите изменения (карандаш #), и Visual Studio открывает окно Team Explorer на странице Изменения. Так как только что созданный проект уже фиксируется в системе управления версиями автоматически, вы не видите никаких ожидающих изменений.
На строке состояния Visual Studio выберите фиксации (стрелка #), чтобы открыть страницу синхронизации в Team Explorer. Так как у вас есть только локальный репозиторий, страница предоставляет простые возможности для публикации репозитория в разных удаленных репозиториях.

Вы можете выбрать любую службу, которую вы хотите использовать для собственных проектов. В этом руководстве показано использование GitHub, где полный пример кода для учебника поддерживается в репозитории Microsoft/python-sample-vs-learning-flask.
Если выбрать любой из элементов управления публикацией, Team Explorer запрашивает у вас дополнительные сведения. Например, при публикации примера для этого руководства сначала создается сам репозиторий, где параметр push-отправки в удаленный репозиторий используется с URL-адресом репозитория.

Если у вас нет существующего репозитория, параметры Опубликовать в GitHub и Отправить в Azure DevOps позволят создать его непосредственно из Visual Studio.

Совет

Чтобы быстро перейти в Team Explorer, выберите заголовок Изменения или Отправка, чтобы просмотреть всплывающее меню доступных страниц.

При работе с этим руководством вы можете периодически использовать элементы управления Git в Visual Studio для фиксации и отправки изменений. Это руководство напоминает вам в нужные моменты.

Используйте систему управления версиями с самого начала

Использование системы управления версиями с самого начала проекта имеет несколько преимуществ. При использовании системы управления версиями с начала проекта, особенно при использовании удаленного репозитория, вы получаете регулярное резервное копирование проекта вне сайта. В отличие от обслуживания проекта только в локальной файловой системе, система управления версиями также предоставляет полный журнал изменений и легко вернуть один файл или весь проект в предыдущее состояние. Журнал изменений помогает определить причину регрессии (сбои теста).

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

Дополнительные сведения об управлении версиями как автоматизация см. в статье Источник истины: роль репозиториев в DevOps, опубликованной в MSDN Magazine, написанной для мобильных приложений, которая также применима к веб-приложениям.

Запретить автоматическую фиксацию изменений в проектах Visual Studio

Чтобы избежать автоматической фиксации нового проекта в Visual Studio, выполните следующие действия:

Выберите Средства>Параметры>Управление Исходным Кодом>Глобальные Параметры Git.
Снимите флажок Фиксация изменений после слияния по умолчанию и выберите ОК.

Откройте страницу параметров в Team Explorerи выберите глобальные настройки Git>.
Снимите флажок с параметра «Фиксация изменений по умолчанию после слияния» и выберите «Обновить».

Создайте виртуальную среду и исключите систему управления версиями

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

В обозревателе решенийщелкните правой кнопкой мыши узел среды Python и выберите команду Добавить среду.
В диалоговом окне Добавление среды выберите Создать, чтобы принять значения по умолчанию. (Вы можете изменить имя виртуальной среды, если хотите, что изменит имя ее вложенной папки, но env является стандартным соглашением.)
Если Visual Studio запрашивает права администратора, предоставьте свое согласие. Подождите несколько минут, пока Visual Studio загружает и устанавливает пакеты. Для Flask и его зависимостей процесс может потребовать расширения до 1000 файлов в более чем 100 вложенных папок. Ход выполнения можно просмотреть в окне выходных данных Visual Studio.
На панели элементов управления Git выберите незафиксированные изменения (которые теперь отображаются 99+), чтобы открыть окно изменений Git.

Создание виртуальной среды приводит к тысячам изменений, но их не нужно включать в систему контроля версий. Вы или любой другой пользователь, который клонирует проект, всегда может воссоздать среду с помощью файла requirements.txt.
Чтобы исключить виртуальную среду из системы управления версиями, в окне Git Changes щелкните правой кнопкой мыши папку env и выберите Игнорировать эти локальные элементы:

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

Чтобы просмотреть представление различий для файла .gitignore, в окне изменений Git дважды щелкните файл.
В окне Git Changes введите сообщение коммита, например: "Первоначальные изменения проекта"
В раскрывающемся меню фиксации выберите "Зафиксировать этап" и "Отправить".

Вы можете открыть окно репозитория Git и подтвердить, что подготовленные коммиты отображаются в Локальной истории для текущей ветви.

После настройки системы управления версиями для вашего проекта вы можете создать виртуальную среду с необходимыми пакетами Flask, которые требуются проекту. Затем можно использовать Team Explorer, чтобы исключить папку среды из системы управления версиями.

В обозревателе решений щелкните правой кнопкой мыши узел сред Python и выберите Добавить виртуальную среду:
Откроется диалоговое окно Добавление виртуальной среды и отображается сообщение, мы нашли файл requirements.txt. сообщение указывает, что Visual Studio использует файл для настройки виртуальной среды:
Выберите Создать, чтобы принять настройки по умолчанию. (Вы можете изменить имя виртуальной среды, если хотите, что изменит имя ее вложенной папки, но env является стандартным соглашением.)
Если Visual Studio запрашивает права администратора, предоставьте свое согласие. Подождите несколько минут, пока Visual Studio загружает и устанавливает пакеты. Для Flask и его зависимостей процесс может потребовать расширения до 1000 файлов в более чем 100 вложенных папок. Ход выполнения можно просмотреть в окне выходных данных Visual Studio.
На панели управления Git выберите незафиксированные изменения (которые теперь отображаются 99+), чтобы открыть страницу изменений Git в Team Explorer:

Создание виртуальной среды приводит к тысячам изменений, но их не нужно включать в систему контроля версий. Вы или любой другой пользователь, который клонирует проект, всегда может воссоздать среду с помощью файла requirements.txt.
Чтобы исключить виртуальную среду из системы контроля версий, на странице Изменения щелкните правой кнопкой мыши по папке env и выберите Игнорировать эти локальные элементы:

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

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

Общие сведения о назначении виртуальных сред

Виртуальная среда — отличный способ изолировать точные зависимости приложения. Этот метод изоляции исключает конфликты в глобальной Python-среде и помогает в тестировании и сотрудничестве. Со временем при разработке приложения вы неизменно приносите множество полезных пакетов Python. Сохраняя пакеты в виртуальной среде, специфичной для проекта, вы можете легко обновить файл проекта requirements.txt, описывающий эту среду, которая включена в систему управления версиями. При копировании проекта на другие компьютеры, включая серверы сборки, серверы развертывания и другие компьютеры разработки, легко воссоздать среду. Вы можете воссоздать среду, используя только файл requirements.txt, поэтому среда не должна находиться в системе контроля версий. Дополнительные сведения см. в разделе Использование виртуальных сред.

Удалить виртуальную среду под управлением системой контроля версий

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

Измените файл .gitignore, чтобы исключить папку:
1. Откройте файл, выбрав Файл>Открыть файл>.
  
  Вы также можете открыть файл из Team Explorer. На странице «Параметры» выберите «Настройки репозитория» . Перейдите в раздел Игнорировать атрибуты файлов & и выберите ссылку Изменить рядом с .gitignore.
2. Найдите раздел в конце, где есть комментарий # Python Tools for Visual Studio (PTVS).
3. После этого раздела добавьте новую строку для папки виртуальной среды, например /BasicProject/env.
Откройте командное окно и перейдите в папку (например, BasicProject), которая содержит папку виртуальной среды, например env.
Выполните команду git rm -r env, чтобы удалить виртуальную среду, которая сейчас под контролем версий.
Зафиксируйте изменения с помощью команды git commit -m 'Remove venv' или зафиксируйте их на странице изменений team Explorer.

Изучение стандартного кода

В этом разделе вы изучите стандартный код в файле Project (.py), который Visual Studio создает на основе выбора шаблона.

Откройте обозреватель решений, чтобы просмотреть файлы решения и проекта. Исходный проект содержит только два файла, app.py и requirements.txt:

Файл requirements.txt указывает зависимости пакета Flask. Наличие этого файла — это то, что предлагает вам создать виртуальную среду при первом создании проекта.

Один файл app.py содержит стандартный код для пустого веб-проекта Flask.
Откройте файл app.py в редакторе и изучите первый раздел, инструкцию import для Flask.

Эта инструкция создает экземпляр класса Flask, который назначается переменной app. В этом разделе также назначается переменная wsgi_app (которая полезна при развертывании на веб-узле, но не используется в настоящее время):
```
from flask import Flask
app = Flask(__name__)

# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
```
Второй раздел для проверки находится в конце файла. Этот раздел содержит необязательный код, который можно использовать для запуска сервера разработки Flask.

Можно определить код для использования определенных значений узлов и портов, взятых из переменных среды, или использовать значение узла и порта по умолчанию localhost:55551.
```
if __name__ == '__main__':
    import os
    HOST = os.environ.get('SERVER_HOST', 'localhost')
    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555
    app.run(HOST, PORT)
```
Третий раздел кода для проверки назначает функцию маршруту URL-адреса, что означает, что функция предоставляет ресурс, определяемый URL-адресом.

Вы определяете маршруты, используя декоратор @app.route Flask с аргументом, представляющим собой относительный URL-адрес от корневого каталога сайта. Как видно в коде, функция возвращает только текстовую строку, которая достаточна для отображения в браузере. В последующих шагах в этом руководстве вы обновите код, чтобы отобразить более подробные страницы с помощью HTML.
```
@app.route('/')
def hello():
    """Renders a sample page."""
    return "Hello World!"
```

Общие сведения о аргументе имени в классе Flask

Аргумент name в классе Flask — это имя модуля или пакета приложения. Flask использует имя, чтобы определить, где искать шаблоны, статические файлы и другие ресурсы, принадлежащие приложению. Для приложений, содержащихся в одном модуле, __name__ всегда является правильным значением. Имя также важно для расширений, требующих сведений об отладке. Дополнительные сведения и другие аргументы см. в документации по классу Flask (flask.pocoo.org) .

Используйте несколько декораторов маршрутов

Функция может иметь несколько декораторов маршрутов. Вы можете использовать столько декораторов, сколько вы хотите, если одна и та же функция служит нескольким маршрутам. Например, чтобы использовать функцию hello для маршрута / и маршрута /hello, используйте следующий код:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Использование маршрутов переменных URL-адресов и параметров запроса

Flask может работать с переменными URL-маршрутами и параметрами запроса. В маршруте вы помечаете любую переменную атрибутом <variable_name>. Flask передает переменную в функцию с помощью именованного аргумента в пути URL. Например, маршрут в виде /hello/<name> создает строковый аргумент, называемый name функции. Параметры запроса доступны через свойство request.args, в частности с помощью метода request.args.get. В следующем коде приведен пример:

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Чтобы изменить тип, добавьте к переменной префикс int, float, path (который принимает косую черту для разделения имен папок) и uuid. Для получения дополнительной информации см. раздел Правила переменной в документации Flask.

Создание требований после установки пакета

Visual Studio может создать файл requirements.txt из виртуальной среды после установки других пакетов.

В обозревателе решенийразверните узел среды Python, щелкните правой кнопкой мыши виртуальную среду и выберите Создать requirements.txt.

Рекомендуется периодически использовать эту команду при изменении среды. Зафиксируйте изменения в файле requirements.txt в системе управления версиями вместе с другими изменениями кода, зависящими от этой среды. При настройке непрерывной интеграции на сервере сборки необходимо создать файл и зафиксировать изменения при изменении среды.

Запуск проекта

Теперь вы готовы запустить проект в Visual Studio, выполнив следующую процедуру:

В Visual Studio выберите Отладка>Начать отладку (F5) или выберите Веб-сервер на главной панели инструментов (браузер может отличаться):
Любая команда назначает случайный номер порта переменной среды PORT и запускает файл app.py Python.

Код запускает приложение с помощью этого порта на сервере разработки Flask.

Если Visual Studio публикует сообщение не удалось запустить отладчик и указывает, что файл запуска не найден, щелкните правой кнопкой мыши файл app.py в обозревателе решений и выберите Задать в качестве файла запуска.
При запуске сервера откроется окно консоли для отображения журнала сервера. Visual Studio автоматически открывает браузер для http://localhost:<port>, где должно отображаться сообщение, отображаемое функцией hello:
По завершении закройте окно консоли, которое останавливает сервер разработки Flask. Вы также можете выбрать Отладка>Остановить отладку.

Сравнение команд отладки с командами Python проекта

Существует разница между использованием команд меню отладки и команд сервера, перечисленных в подменю Python проекта.

Помимо команд меню отладки и кнопок панели инструментов, вы также можете запустить сервер, используя команду Python>Запустить сервер или Python>Запустить сервер отладки в контекстном меню проекта.

Помимо команд меню отладки и кнопок панели инструментов, вы также можете запустить сервер с помощью команды Python>Запустить сервер или Python>Запустить сервер отладки в контекстном меню проекта.

Обе команды открывают окно консоли, в котором отображается локальный URL-адрес (localhost:port) для работающего сервера. Однако необходимо вручную открыть браузер с этим URL-адресом, и работа сервера отладки не запускает отладчик Visual Studio автоматически. Вы можете подключить отладчик к запущенному процессу позже, если хотите, используя команду отладки>подключиться к процессу.

Следующий шаг

шаг 2. Создание приложения Flask с представлениями и шаблонами страниц