Как добавить готовый веб элемент на флваск

Flask для начинающих

В данном цикле статей-уроков рассматривается создание простого сайта на микрофремворке Flask, его запуск на локальном компьютере и удаленном виртуальном сервере, то есть размещение сайта в Интернет.

Под «простым сайтом» здесь подразумевается создание flask-приложения без базы данных (на первом этапе). Акцент сделан на использовании таких возможностей как шаблонизатор и роутер, облегчающих в том числе разработку и обслуживание сайтов, которые выглядят статично с клиентской стороны (информационные сайты без регистрации пользователей, комментирования и др).

Если под «начинающими» понимать людей, которые не знакомы с программированием, то изучение любого фреймворка будет затруднительным, так как предполагает знание соответствующего языка программирования и сопутствующих технологий (области приложения фреймворка, в данном случае ‒ веб-технологий). Flask в этом смысле не является исключением. Вам должны быть знакомы HTML, CSS, работа в командной строке и, очевидно, язык Python.

Тот факт, что Flask называют микрофреймворком, а не фреймворком как тот же Django, говорит лишь о минимализме самого пакета flask как инструмента. По-умолчанию в нем нет всех тех возможностей и элементов абстрагирования от реализации, которые есть в старших собратьях. Однако, в случае необходимости, многое можно добавить с помощью расширений (установки дополнительных пакетов). Поэтому подготовленному пользователю изучить Flask и начать его использовать проще.

В мини-курсе «Flask для начинающих» изложение адаптировано для начинающего программиста. Кода на Питоне будет мало. Если вы знаете, что такое переменная, функция, условия, исключения на примере других языков, то этого может быть достаточно. Если вы не знакомы с HTML и CSS, рекомендуем хотя бы поверхностно изучить курс «Введение в веб-разработку и создание сайтов».

Опубликовано: декабрь 2023 г.

Краткое описание содержания

Установка Flask и запуск flask-приложения на локальном компьютере
Установка виртуального окружения и пакета flask. Главный файл flask-приложения, запуск сайта на локальном сервере. Функция render_template и html-шаблон. Разбор кода минимального приложения на flask.

Jinja ‒ шаблонизатор для Python
Фреймворк Flask включает в себя Jinja2 ‒ шаблонизатор, для которого в шаблонах используются элементы синтаксиса языка Python. Примеры наследования шаблона и передачи данных через аргументы render_template.

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

Структура сайта на Flask. Готовый шаблон HTML + CSS + JS
Пример файловой структуры проекта сайта на фреймворке Flask с готовым html-шаблоном и таблицами стилей. Адаптивный дизайн с помощью JavaScript. Flask-приложение без базы данных.

#6 Шаблоны во Flask

До этого момента HTML-строки записывались прямо в функцию представления. Это нормально в демонстрационных целях, но неприемлемо при создании реальных приложений. Большинство современных веб-страниц достаточно длинные и состоят из множества динамических элементов. Вместо того чтобы использовать огромные блоки HTML-кода прямо в функциях (с чем еще и неудобно будет работать), применяются шаблоны.

Шаблоны

Шаблон — это всего лишь текстовый файл с HTML-кодом и дополнительными элементами разметки, которые обозначают динамический контент. Последний станет известен в момент запроса. Процесс, во время которого динамическая разметка заменяется, и генерируется статическая HTML-страница, называется отрисовкой (или рендерингом) шаблона. Во Flask есть встроенный движок шаблонов Jinja, который и занимается тем, что конвертирует шаблон в статический HTML-файл.

Jinja — один из самых мощных и популярных движков для обработки шаблонов для языка Python. Он должен быть известен пользователям Django. Но стоит понимать, что Flask и Jinja – два разных пакета, и они могут использоваться отдельно.

Отрисовка шаблонов с помощью render_template()

По умолчанию, Flask ищет шаблоны в подкаталоге templates внутри папки приложения. Это поведение можно изменить, передав аргумент template_folder конструктору Flask во время создания экземпляра приложения.

Этот код меняет расположение шаблонов по умолчанию на папку jinja_templates внутри папки приложения.

app = Flask(__name__, template_folder="jinja_templates") 

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

Создаем новую папку templates внутри папки приложения flask_app . В templates — файл index.html со следующим кодом:

 html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>Name: >p> body> html> 

Стоит обратить внимание, что в «базовом» HTML-шаблоне есть динамический компонент > . Переменная name внутри фигурных скобок представляет собой переменную, значение которой будет определено во время отрисовки шаблона. В качестве примера можно написать, что значением name будет Jerry . Тогда после рендеринга шаблона выйдет следующий код.

 html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>Name: Jerryp> body> html> 

Flask предоставляет функцию rended_template для отрисовки шаблонов. Она интегрирует Jinja во Flask. Чтобы отрисовать шаблон, нужно вызвать rended_template() с именем шаблона и данными, которые должны быть в шаблоне в виде аргументов-ключевых слов. Аргументы-ключевые слова, которые передаются шаблонам, известны как контекст шаблона. Следующий код показывает, как отрисовать шаблон index.html с помощью render_template() .

from flask import Flask, request, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html', name='Jerry') #. 

Важно обратить внимание, что name в name=’Jerry’ ссылается на переменную, упомянутую в шаблоне index.html .

Если сейчас зайти на https://localhost:5000/ , выйдет следующий ответ:

Если render_template() нужно передать много аргументов, можно не разделять их запятыми ( , ), а создать словарь и использовать оператор ** , чтобы передать аргументы-ключевые слова функции. Например:

@app.route('/') def index(): name, age, profession = "Jerry", 24, 'Programmer' template_context = dict(name=name, age=age, profession=profession) return render_template('index.html', **template_context) 

Шаблон index.html теперь имеет доступ к трем переменным шаблона: name , age и profession .

Что случится, если не определить контекст шаблона?

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

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

Теперь при открытии https://localhost:5000/ выйдет следующий ответ:

 html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> p>Name: p> body> html> 

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

Отрисовка шаблонов в консоли

Для тестирования рендерить шаблоны можно и в консоли. Это просто и не требует создания нескольких файлов. Для начала нужно запустить Python и импортировать класс Template из пакета jinja2 следующим образом.

>>> from jinja2 import Template 

Для создания объекта Templates нужно передать содержимое шаблона в виде строки.

>>> t = Template("Name: >") 

Чтобы отрендерить шаблон, нужно вызвать метод render() объекта Template вместе с данными аргументами-ключевыми словами

>>> t.render(name='Jerry') 'Name: Jerry' 

В следующем уроке речь пойдет о шаблонизаторе Jinja.

Создание динамических HTML страниц с Python и Flask

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

Установка Flask

pip install Flask

Создание базового приложения

Для начала создадим базовое веб-приложение Flask. Создайте файл app.py и добавьте следующий код:

from flask import Flask

@app.route(‘/’)
def home():
return ‘Добро пожаловать на динамическую страницу!’

Здесь мы создаем экземпляр Flask и определяем маршрут /, который будет отображать приветственное сообщение.

Чтобы запустить приложение, выполните следующие команды в терминале:

set FLASK_APP=app.py
set FLASK_ENV=development

После этого ваше приложение будет доступно по адресу http://127.0.0.1:5000/.

Использование шаблонов Jinja2

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

Передача данных в шаблон

Теперь давайте передадим данные из Python в HTML шаблон. Мы можем использовать функцию render_template из Flask.

Создайте файл hello.html в папке templates и добавьте в него следующий код:

Добро пожаловать, >!

Теперь обновим наше приложение в app.py, чтобы передать имя в шаблон:

from flask import Flask, render_template

@app.route(‘/’)
def home():
user_name = «Mihail»
return render_template(‘hello.html’, name=user_name)

Мы создали переменную user_name и передали ее в функцию render_template как name . Теперь, если вы посетите главную страницу вашего приложения, вы увидите приветствие «Добро пожаловать, Mihail!».

Получение данных от пользователя

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

Обновите hello.html следующим образом:

Добро пожаловать, >!

Введите ваше имя:

Теперь обновим app.py , чтобы обрабатывать отправку формы:

from flask import Flask, render_template, request

@app.route(‘/’, methods=[‘GET’, ‘POST’])
def home():
user_name = «Гость»

if request.method == ‘POST’:
user_name = request.form[‘name’]

return render_template(‘hello.html’, name=user_name)

Мы добавили метод POST к маршруту / , чтобы обрабатывать отправку формы. Если пользователь отправляет форму, мы получаем имя из запроса и используем его для создания персонализированного приветствия.

Теперь, когда пользователь вводит свое имя в форму и отправляет ее, он увидит персонализированное приветствие на странице.

Создание динамических страниц в Flask — это мощный способ сделать ваши веб-приложения более интересными и полезными для пользователей. Вы можете передавать данные из Python в HTML шаблоны и обрабатывать введенные пользователем данные, делая ваше приложение более интерактивным.

Создано 28.09.2023 11:55:46

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

Мега-Учебник Flask, Часть 2: Шаблоны (издание 2018)

Эта статья является переводом второй части нового издания учебника Мигеля Гринберга, выпуск которого автор планирует завершить в мае 2018.Прежний перевод давно утратил свою актуальность.

Я, со своей стороны, постараюсь не отставать с переводом.

В этом втором выпуске серии Мега-Учебник Flask я расскажу о том, как работать с шаблонами.

Для справки ниже приведен список статей этой серии.

ОГЛАВЛЕНИЕ

• Глава 1: Привет, мир!
• Глава 2: Шаблоны (Эта статья)
• Глава 3: Веб-формы
• Глава 4: База данных
• Глава 5: Пользовательские логины
• Глава 6: Страница профиля и аватары
• Глава 7: Обработка ошибок
• Глава 8: Подписчики, контакты и друзья
• Глава 9: Разбивка на страницы
• Глава 10: Поддержка электронной почты
• Глава 11: Реконструкция
• Глава 12: Дата и время
• Глава 13: I18n и L10n
• Глава 14: Ajax
• Глава 15: Улучшение структуры приложения
• Глава 16: Полнотекстовый поиск
• Глава 16: Полнотекстовый поиск
• Глава 17: Развертывание в Linux
• Глава 18: Развертывание на Heroku
• Глава 19: Развертывание на Docker контейнерах
• Глава 20: Магия JavaScript
• Глава 21: Уведомления пользователей
• Глава 22: Фоновые задачи
• Глава 23: Интерфейсы прикладного программирования (API)

Примечание 1: Если вы ищете старые версии данного курса, это здесь.

Примечание 2: Если вдруг Вы хотели бы выступить в поддержку моей(Мигеля) работы в этом блоге, или просто не имеете терпения дожидаться неделю статьи, я (Мигель Гринберг)предлагаю полную версию данного руководства упакованную электронную книгу или видео. Для получения более подробной информации посетите learn.miguelgrinberg.com.

Краткое повторение

После завершения главы 1 вы должны иметь полностью работающее, но простое веб-приложение, имеющее следующую структуру файлов:

microblog\ venv\ app\ __init__.py routes.py microblog.py

Для запуска приложения вы установили FLASK_APP=microblog.py в сеансе терминала, а затем выполняете запуск flask. Он запустит веб-сервер с приложением, которое вы можете открыть, введя http://localhost:5000 / URL в адресной строке вашего веб-браузера.

В этой главе вы продолжите работу над тем же приложением, и, в частности, вы узнаете, как создавать более сложные веб-страницы, которые имеют более навороченную структуру и множество динамических компонентов. Если что-либо о приложении или технологическом процессе разработки пока неясно, перед продолжением просмотрите главу 1.

Что такое шаблоны?

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

user =

Создание mock-объектов — полезный метод, который позволяет вам сосредоточиться на одной части приложения, не беспокоясь о других частях системы, которые еще не существуют. Я хочу создать домашнюю страницу своего приложения, и я не хочу, чтобы отсутствие системы пользователя отвлекало меня. Поэтому я просто создаю объект пользователя.

Функция просмотра в приложении возвращает простую строку. Теперь я хочу расширить эту возвращаемую строку в полную HTML-страницу, возможно, что-то вроде этого:

from app import app @app.route('/') @app.route('/index') def index(): user = return '''    
Hello, ''' + user['username'] + '''!
  '''

Если Вы не знакомы с HTML, я рекомендую, чтобы Вы прочитали Markup HTML в Википедии для краткого введения.

Обновите функцию представления как показано выше и смотрите в Вашем браузере.

Я надеюсь, Вы согласитесь со мной, что решение, используемое выше, не достаточно хорошо. Подумайте, насколько сложным будет код в этом представлении, когда у меня появятся сообщения в блоге от пользователей, которые будут постоянно меняться. Приложение также будет иметь больше функций просмотра, которые будут связаны с другими URL-адресами, поэтому представьте, если в один прекрасный день я решу изменить макет этого приложения и придется обновлять HTML в каждом представлении. Это явно не вариант, который будет масштабироваться по мере роста приложения.

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

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

(venv) $ mkdir app/templates

(venv) C:\microblog>mkdir app\templates

Ниже вы можете увидеть свой первый шаблон, который похож по функциональности на страницу HTML, возвращаемую функцией просмотра index() выше. Запишите этот файл в app/templates/index.html :

    
Hello, >!
  

Это стандартная, очень простая HTML-страница. Единственная интересная вещь на этой странице состоит в том, что для динамического контента есть несколько заполнителей, заключенных в > разделы. Эти заполнители представляют части страницы, которые являются переменными и будут определены только во время выполнения.

Теперь, когда презентация страницы была выгружена в шаблон HTML, функция просмотра может быть упрощена (файл \app\routes.py):

# -*- coding: utf-8 -*- from flask import render_template from app import app @app.route('/') @app.route('/index') def index(): user = return render_template('index.html', title='Home', user=user)

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

Операция, которая преобразует шаблон в полную HTML-страницу, называется рендерингом. Чтобы отобразить шаблон, мне пришлось импортировать функцию, которая поставляется с флаговой инфраструктурой под названием render_template() . Эта функция принимает имя файла шаблона и переменную список аргументов шаблона и возвращает один и тот же шаблон, но при этом все заполнители в нем заменяются фактическими значениями.

Функция render_template() вызывает механизм шаблонов Jinja2 , который поставляется в комплекте с Flask. Jinja2 заменяет блоки > соответствующими значениями, заданными аргументами, указанными в вызове render_template() .

Условные операторы

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

     
Hello, >!
  

Теперь шаблон немного умнее. Если функция просмотра забывает передать значение переменной заполнитель заголовка, вместо того, чтобы показывать пустой заголовок, шаблон предоставит значение по умолчанию. Вы можете попробовать, как это условие работает, удалив аргумент title в вызове render_template() функции view (файл \app\routes.py).

Циклы

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

Еще раз, использую трюк с поддельным объектом, чтобы создать некоторых пользователей и некоторые сообщения, для демонстрации:

# -*- coding: utf-8 -*- from flask import render_template from app import app @app.route('/') @app.route('/index') def index(): user = posts = [ < 'author': , 'body': 'Beautiful day in Portland!' >, < 'author': , 'body': 'The Avengers movie was so cool!' >, < 'author': , 'body': 'Какая гадость эта ваша заливная рыба!!' > ] return render_template('index.html', title='Home', user=user, posts=posts)

Для представления пользовательских сообщений я использую список, где каждый элемент является словарем, имеющим поля Author и Body . Когда я доберусь до реализации пользователей и сообщений в блоге по-настоящему, я постараюсь сохранить эти имена полей, чтобы вся работа, которую сделал для проектирования и тестирования шаблона домашней страницы, используя эти временные объекты, продолжала действовать и на момент когда я представляю реальных пользователей и сообщения из базы данных.

На стороне шаблона я должен решить новую проблему. Список сообщений может иметь любое количество элементов. Сколько сообщений будут представлены на странице? Шаблон не может делать какие-либо предположения о том, сколько записей существует, поэтому он должен быть готов к отображению стольких сообщений, сколько отправляет представление общим способом.

Для этого типа проблемы, Jinja2 предлагает for структуры управления (файл app/templates/index.html):

     
Hi, >!
 
> says: >
 

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

Прим.переводчика: Все не так просто с кодировками. Я попробовал заменить приветствие на Превед и получил ошибку. Следите за кодировкой файла index.html. Он должен быть сохранен в utf-8.

Наследование шаблонов

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

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

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

     
Microblog: Home
 

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

С базовым шаблоном я теперь могу упростить index.html , наследуя его от base.html :

Hi, >!

Поскольку шаблон base.html теперь будет заботиться об общей структуре страницы, я удалил все эти элементы из index.html и оставил только часть содержимого. Оператор extends устанавливает ссылку наследования между двумя шаблонами, так что Jinja2 знает, что когда ему предлагается визуализировать index.html , он должен встроить его в base.html . Два шаблона имеют согласованные операторы block с именами content , и именно так Jinja2 знает, как объединить два шаблона в один. Теперь, если мне нужно создать дополнительные страницы для приложения, я могу создать их как производные шаблоны из одного и того же шаблона base.html , и именно так я могу иметь все страницы приложения, которые будут одинаково выглядеть и выглядеть без дублирования.