Flask название вкладки как сделать

Использование шаблонов страниц сайта

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

from flask import Flask app = Flask(__name__) @app.route("/") def index(): return ''' ''' @app.route("/about") def about(): return "Про Flask
" if __name__ == "__main__": app.run(debug=True)

Кроме того структура страницы может меняться и вносить изменения непосредственно в программе – это плохой подход к программированию. Поэтому все HTML-шаблоны хранятся в виде отдельных файлов и загружаются по мере необходимости.

Для работы с шаблонами Flask использует стандартный модуль Jinja (если вы не знаете что это такое и как происходит обработка шаблонов, то смотрите занятия по этой ссылке).

Чтобы воспользоваться шаблонизатором во Flask нужно импортировать его элемент render_template:

from flask import Flask, render_template

и, затем, в обработчике index вызвать его:

@app.route("/") def index(): return render_template('index.html')

Следующий вопрос: где расположить шаблон ‘index.html’, чтобы он был найден и загружен модулем Flask. Существует следующее простое соглашение: по умолчанию все шаблоны берутся из подкаталога templates, относительно рабочего каталога программы (или соответствующем подкаталоге пакета). Так мы и сделаем. Разместим в этом подкаталоге файл index.html со следующим содержимым:

DOCTYPE html> html> head> title>Главная страница сайта/title> /head> body> h1>Главная страница сайта/h1> /body> /html>

Обратите внимание, для корректного отображения кириллицы все шаблоны рекомендуется сохранять в кодировке utf-8. Тем более, что сам Python, начиная с версии 3, по умолчанию использует юникод.

Запустим программу и при переходе на главную страницу увидим отображение нашего шаблона в браузере:

По аналогии создадим такой же шаблон about.html и также будем загружать его при обращении по URL /about:

@app.route("/about") def about(): return render_template('about.html')

Теперь, посещая эту страницу, пользователь увидит:

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

Передача шаблонам параметров

Я много раз произносил слово «шаблон», но что оно означает? Если посмотреть на файлы index.html или about.html, то это просто текст, который загружается и отдается браузеру по соответствующему запросу. Все так, но в этих же файлах можно прописать конструкции для отображения информации, например, из БД. Давайте для начала сделаем так, чтобы на каждой странице был свой заголовок, переданный ей через параметр title. Это можно сделать так:

DOCTYPE html> html> head> title>{{title}}/title> /head> body> h1>{{title}}/h1> /body> /html>

А в обработчике указать этот параметр:

return render_template('index.html', title="Про Flask")

Все, теперь вместо title будет подставлена строка «Про Flask». Удобно, правда? Вот в этом и есть роль шаблонов: они описывают структуру страницы, а ее наполнение происходит динамически в самой программе.

Но какие вообще конструкции можно использовать в шаблонах? Как я уже отмечал, модуль Flask использует шаблонизатор Jinja и шаблоны строятся по его правилам. Если вы не знаете как работать с шаблонами, то под этим видео увидите ссылку на этот курс.

Давайте для примера еще добавим в документ простой список, пусть он символизирует наше меню. Шаблон для него можно прописать так (в файле index.html):

ul> {% for m in menu %} li>{{m}}/li> {% endfor %} /ul>

А в программе добавить список и передать его шаблону:

menu = ["Установка", "Первое приложение", "Обратная связь"] @app.route("/") def index(): return render_template('index.html', title="Про Flask", menu = menu)

При обновлении страницы увидим следующее:

Добавим большей гибкости нашему шаблону и для заголовка пропишем следующую конструкцию:

{% if title %} title>Про Flask - {{title}}/title> {% else %} title>Про Flask/title> {% endif %}

И то же самое для тега h1:

{% if title -%} h1>{{title}}/h1> {% else -%} h1>Про Flask/h1> {% endif %}

Теперь в обработчике можно не указывать параметр title, тогда будет отображаться строка «Про Flask», а иначе, подставляться другой заголовок, причем во вкладке браузеры будем видеть «Про Flask — ». Например, пропишем такой же шаблон для about.html и в обработчике добавим:

def about(): return render_template('about.html', title = "О сайте", menu = menu)

В результате, вид страницы будет такой:

Но, наши созданные шаблоны, мягко говоря, не очень, т.к. они содержат много повторяющегося кода. Лучшим вариантом будет воспользоваться механизмом расширения (наследования) шаблона для создания дочерних страниц сайта. Для начала определим базовый шаблон страницы – ее структуру, следующим образом (файл base.html):

DOCTYPE html> html> head> {% block title -%} {% if title %} title>Про Flask - {{title}}/title> {% else %} title>Про Flask/title> {% endif %} {% endblock %} /head> body> {% block content -%} {%- block mainmenu -%} ul> {% for m in menu -%} li>{{m}}/li> {% endfor -%} /ul> {% endblock mainmenu -%} {% if title -%} h1>{{title}}/h1> {% else -%} h1>Про Flask/h1> {% endif -%} {% endblock -%} /body> /html>

А в дочерних расширим этот базовый шаблон:

— для index.html:

{% extends 'base.html' %} {% block content %} {{ super() }} Содержимое главной страницы {% endblock %}

— для about.html:

{% extends 'base.html' %} {% block content %} {{ super() }} Содержимое страницы "о сайте" {% endblock %}

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

Видео по теме

Flask #1: Что это такое? Простое WSGI-приложение

Flask #2: Использование шаблонов страниц сайта

Flask #3: Контекст приложения и контекст запроса

Flask #4: Функция url_for и переменные URL-адреса

Flask #5: Подключение внешних ресурсов и работа с формами

Flask #6: Мгновенные сообщения — flash, get_flashed_messages

Flask #7: Декоратор errorhandler, функции redirect и abort

Flask #8: Создание БД, установление и разрыв соединения при запросах

Flask #9: Добавление и отображение статей из БД

Flask #10: Способ представления полноценных HTML-страниц на сервере

Flask #11: Формирование ответа сервера, декораторы перехвата запроса

Flask #12: Порядок работы с cookies (куками)

Flask #13: Порядок работы с сессиями (session)

Flask #14: Регистрация пользователей и шифрование паролей

Flask #15: Авторизация пользователей на сайте через Flask-Login

Flask #16: Улучшение процесса авторизации (Flask-Login)

Flask #17: Загрузка файлов на сервер и сохранение в БД

Flask #18: Применение WTForms для работы с формами сайта

Flask #19: Обработка ошибок во Flask-WTF

Flask #20: Blueprint — что это такое, где и как использовать

Flask #21: Blueprint — подключение к БД и работа с ней

Flask #22: Flask-SQLAlchemy — установка, создание таблиц, добавление записей

Flask #23: Операции с таблицами через Flask-SQLAlchemy

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

Руководство. Начало работы с веб-платформой Flask в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Flask — это упрощенная платформа Python для веб-приложений, которая обеспечивает основные возможности маршрутизации URL-адресов и визуализации страниц.

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

В этом руководстве описано следующее:

Создание базового проекта Flask в репозитории Git с помощью шаблона «Пустой веб-проект Flask» (шаг 1).
Создание приложения Flask с одной страницей и преобразование этой страницы для просмотра с помощью шаблона (шаг 2).
Обслуживание статических файлов, добавление страниц и использование наследования шаблонов (шаг 3).
Использование шаблона веб-проекта Flask для создания приложения с несколькими страницами и адаптивным дизайном (шаг 4).

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

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

Необходимые компоненты

Visual Studio 2017 или более поздней версии в Windows со следующими параметрами:
- Рабочая нагрузка Разработка на Python (вкладка Рабочая нагрузка в установщике). Инструкции см. в статье Установка поддержки Python в Visual Studio.
- Git для Windows и расширение GitHub для Visual Studio на вкладке Отдельные компоненты в разделе Средства кода.
- Visual Studio 2022 в Windows со следующими параметрами:
  - Рабочая нагрузка Разработка на Python (вкладка Рабочая нагрузка в установщике). Инструкции см. в статье Установка поддержки Python в Visual Studio.
  - Git для Windows на вкладке Отдельные компоненты в разделе Средства для работы с кодом.
  Шаблоны проектов Flask также входят в состав всех ранних версий инструментов Python для Visual Studio, хотя и могут незначительно отличаться от рассматриваемых в этом руководстве.
  
  Разработка Python в настоящее время не поддерживается в Visual Studio для Mac. В системах Mac и Linux используйте учебник Расширение Python в Visual Studio Code.
  
  Шаг 1–1. Создание проекта и решения Visual Studio
  1. В Visual Studio выберите Файл>Создать>Проект, выполните поиск по запросу «Flask» и выберите шаблон Пустой веб-проект Flask. (Шаблон также можно найти в папке Python>Интернет в списке слева.)
  2. В нижней части диалогового окна в полях введите следующие сведения (как показано на предыдущем рисунке), а затем нажмите кнопку ОК.
    - Имя. В качестве имени проекта Visual Studio укажите BasicProject. Это имя используется также и для проекта Flask.
    - Расположение. Укажите расположение для создания решения и проекта Visual Studio.
    - Имя решения. Укажите LearningFlask. В этом руководстве данное имя подходит для решения как контейнер для нескольких проектов.
    - Создать каталог для решения. Оставьте флажок установленным (по умолчанию).
    - Создать новый репозиторий Git. Выберите этот параметр (по умолчанию флажок не установлен), чтобы при создании решения в Visual Studio был создан локальный репозиторий Git. Если этот параметр не отображается, запустите Visual Studio Installer и добавьте Git для Windows и Расширение GitHub для Visual Studio на вкладке Отдельные компоненты в разделе Средства для работы с кодом.
  3. Через некоторое время в Visual Studio отобразится диалоговое окно с сообщением Для этого проекта требуются внешние пакеты (как показано ниже). Это диалоговое окно открывается, так как шаблон включает файл requirements.txt, ссылающийся на последнюю версию пакета Flask 1.x. (Выберите Показать необходимые пакеты, чтобы просмотреть точный список зависимостей.)
  4. Выберите параметр I will install them myself (Я установлю их самостоятельно). В ближайшее время вы можете создать виртуальное окружение и исключить его из системы управления версиями. (Окружение всегда можно создать из requirements.txt.)
  1. В Visual Studio выберите Файл>Создать>Проект и выполните поиск по запросу «Flask». Затем выберите пустой шаблон Веб-проект Flask и нажмите кнопку Далее.
  2. Настройте новый проект, указав следующие сведения, а затем нажмите кнопку Создать.
    - Имя. В качестве имени проекта Visual Studio укажите BasicProject. Это имя используется также и для проекта Flask.
    - Расположение. Укажите расположение для создания решения и проекта Visual Studio.
    - Имя решения. Укажите LearningFlask. В этом руководстве данное имя подходит для решения как контейнер для нескольких проектов.
  Шаг 1–2. Проверка элементов управления Git и публикация в удаленном репозитории
  
  Так как вы выбрали Создать новый репозиторий Git в диалоговом окне Новый проект, проект уже был зафиксирован в локальной системе управления версиями сразу после завершения процесса создания. На этом шаге вы ознакомитесь с элементами управления Git в Visual Studio и окном Team Explorer, в котором вы будете работать с системой управления версиями.
  Примечание. Если вы не выбрали параметр Создать новый репозиторий Git в диалоговом окне Новый проект, элементы управления Git отображают только команду Добавить в систему управления версиями, которая создает локальный репозиторий.
- Нажмите кнопку «Изменить» и в Visual Studio на странице изменений откроется окно Team Explorer. Так как созданный проект уже зафиксирован в системе управления версиями автоматически, ожидающие изменения не отобразятся.
- В строке состояния Visual Studio нажмите кнопку фиксации (стрелка вверх со значением 2), чтобы открыть страницу Синхронизация в Team Explorer. Так как у вас есть только локальный репозиторий, страница предоставляет простые варианты для публикации репозитория для разных удаленных репозиториев. Для своих проектов вы можете выбрать любую службу. В этом руководстве используется GitHub. Завершенный пример кода для работы см. в репозитории Microsoft/python-sample-vs-learning-flask.
- При выборе любого из элементов управления ПубликацияTeam Explorer предложит проверить зависимости для получения дополнительной информации. Например, при публикации примера для этого руководства сначала нужно было создать репозиторий, и в этом случае параметр Отправить в удаленный репозиторий использовался с URL-адресом репозитория. Если у вас нет репозитория, параметры Опубликовать в GitHub и Отправить в Azure DevOps позволяют создать его непосредственно из Visual Studio.
- При работе с этим руководством вы будете периодически использовать элементы управления в Visual Studio для фиксации и отправки изменений. Мы напомним вам об этом при необходимости.