Static Files¶
The authentication views and templates work, but they look very plain right now. Some CSS can be added to add style to the HTML layout you constructed. The style won’t change, so it’s a static file rather than a template.
Flask automatically adds a static view that takes a path relative to the flaskr/static directory and serves it. The base.html template already has a link to the style.css file:
url_for('static', filename='style.css') >> Besides CSS, other types of static files might be files with JavaScript functions, or a logo image. They are all placed under the flaskr/static directory and referenced with url_for(‘static’, filename=’. ‘) .
This tutorial isn’t focused on how to write CSS, so you can just copy the following into the flaskr/static/style.css file:
html font-family: sans-serif; background: #eee; padding: 1rem; > body max-width: 960px; margin: 0 auto; background: white; > h1 font-family: serif; color: #377ba8; margin: 1rem 0; > a color: #377ba8; > hr border: none; border-top: 1px solid lightgray; > nav background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; > nav h1 flex: auto; margin: 0; > nav h1 a text-decoration: none; padding: 0.25rem 0.5rem; > nav ul display: flex; list-style: none; margin: 0; padding: 0; > nav ul li a, nav ul li span, header .action display: block; padding: 0.5rem; > .content padding: 0 1rem 1rem; > .content > header border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; > .content > header h1 flex: auto; margin: 1rem 0 0.25rem 0; > .flash margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; > .post > header display: flex; align-items: flex-end; font-size: 0.85em; > .post > header > div:first-of-type flex: auto; > .post > header h1 font-size: 1.5em; margin-bottom: 0; > .post .about color: slategray; font-style: italic; > .post .body white-space: pre-line; > .content:last-child margin-bottom: 0; > .content form margin: 1em 0; display: flex; flex-direction: column; > .content label font-weight: bold; margin-bottom: 0.5em; > .content input, .content textarea margin-bottom: 1em; > .content textarea min-height: 12em; resize: vertical; > input.danger color: #cc2f2e; > input[type=submit] align-self: start; min-width: 10em; >
You can find a less compact version of style.css in the example code.
Go to http://127.0.0.1:5000/auth/login and the page should look like the screenshot below.
You can read more about CSS from Mozilla’s documentation. If you change a static file, refresh the browser page. If the change doesn’t show up, try clearing your browser’s cache.
#9 Работа со статическими файлами во Flask
Статические файлы — это файлы, которые не изменяются часто. Это, например, файлы CSS, JavaScript, шрифты и так далее. По умолчанию Flask ищет статические файлы в папке static , которая хранится в папке приложения. Это поведение можно поменять, передав аргументу-ключевому слову static_folder название новой папки при создании экземпляра приложения:
app = Flask(__name__, static_folder="static_dir") Это изменит расположение статических файлов по умолчанию на папку static_dir внутри папки приложения.
Пока что можно остановиться на папке по умолчанию, statiс . Сперва нужно создать папку static в папке flask_app . В static создаем CSS-файл style.css со следующим содержимым.
Стоит вспомнить, что в уроке «Основы Flask» речь шла о том, что Flask автоматически добавляет путь в формате /static/ для обработки статических файлов. Поэтому все, что остается — создать URL с помощью функции url_for() :
script src token property">url_for('static', filename='jquery.js') >>">script> script src="/static/jquery.js">script> Дальше необходимо открыть шаблон index.html и добавить тег :
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> link rel="stylesheet" href token property">url_for('static', filename='style.css') >>"> head> . Если сервер не запущен, его нужно запустить и открыть https://localhost:5000/ . Там будет страница с красным текстом:
Этот метод работы со статическими файлов подходит только для разработки. При создании реальных приложений используются реальные веб-сервера, такие как Nginx или Apache.
Подключение внешних ресурсов и работа с формами
Это занятие начнем с рассмотрения способа подключения внешних ресурсов к шаблону HTML-документа. Наверное, многие из вас знают, что полноценные страницы сайта представляются не только файлом HTML с набором тегов, но и, например, каскадными таблицами стилей (CSS), JavaScript-программами, которые исполняются в браузере клиента и другими дополнительными внешними ресурсами.
И здесь возникает вопрос: где расположить эти вспомогательные файлы, которые, как правило, являются общими для всех страниц сайта, и как прописать к ним путь в шаблоне HTML-страницы. Для этого, как раз хорошо подходит функция
о которой мы говорили на предыдущем занятии. Ее также можно вызывать непосредственно в шаблоне и она будет связана с текущим контекстом запроса, по которому берется шаблон. То есть, функция url_for корректно отработает и корректно возвратит запрашиваемый URL-адрес. Но что следует прописать первым аргументом у этой функции. Как мы говорили, там должно фигурировать имя функции-обработчика. Но здесь же нам нужен не обработчик а путь к внешнему файлу. Для этого во Flask для url_for зарезервировано специальный параметр
который означает, что нужно обратиться к подкаталогу ‘static’ и там взять файл, указанный в именованном параметре
Давайте подключим оформление к страницам сайта в шаблоне base.html, используя эту функцию:
link type="text/css" href=">" rel="stylesheet" /> В данном случае функция url_for возвратит путь:
и в шаблон будет подключен этот файл оформления страницы. Содержимое этого файла следующее (см. видео). Я не буду здесь подробно объяснять как работают эти стили, если вы не знакомы с CSS, то посмотрите это занятие.
Обновим страницу, увидим следующий результат:
Чтобы таблицы стилей были применены к соответствующим элементам HTML-документа, добавим следующие строчки (в base.html):
ul class="mainmenu"> … /ul> div class="clear">/div> div class="content"> … /div> Теперь, при обновлении увидим такую страницу:
Далее, добавим ссылки нашим пунктам меню:
А само меню в программе представим в виде списка словарей:
menu = [{"name": "Установка", "url": "install-flask"}, {"name": "Первое приложение", "url": "first-app"}, {"name": "Обратная связь", "url": "contact"}]
Теперь при обновлении страницы мы увидим полноценное меню.
Аналогичным образом можно подключать и другие внешние файлы.
Работа с формой (form)
Теперь, когда мы с вами разобрались как конструировать шаблоны страниц, пришло время познакомиться с обработкой form, которые есть практически в любом сайте. Что такое формы, я думаю, вы прекрасно знаете, например, очень часто можно встретить формы авторизации и регистрации:
- GET – в виде строки запроса: «/handler?name=Alex&old=18&profit=1000»;
- POST – в виде бинарных данных (используется для передачи больших объемов данных: изображений, звуков, документов и т.п., а также закрытых сведений: паролей, логинов и т.п.).
{% extends 'base.html' %} {% block content %} {{ super() }} form action="/contact" method="post" class="form-contact"> p>label>Имя: /label> input type="text" name="username" value="" requied /> p>label>Email: /label> input type="text" name="email" value="" requied /> p>label>Сообщение:/label> p>textarea name="message" rows=7 cols=40>/textarea> p>input type="submit" value="Отправить" /> /form> {% endblock %}
Мы здесь указали способ отправки данных в виде POST-запроса и обработчик «/contact», которому будут переданы данные из формы. Далее, пропишем следующее оформление формы (в файле styles.css):
.form-contact label { display: inline-block; min-width: 80px; } .form-contact p {margin: 10px 0 10px 0;} .form-contact input[type=submit], textarea { font-size: 16px; }
Запустим программу, откроем в браузере страницу http://127.0.0.1:5000/contact и увидим следующий результат: Если сейчас ввести в форму какие-либо данные и нажать на кнопку отправить, то сервер возвратит ошибку: 405 – запрет на прием данных (Method Not Allowed) Дело в том, что в обработчике мы должны явно указать: может ли он принимать данные методом POST. Для этого нужно прописать параметр methods со значением POST как элемент списка:
@app.route("/contact", methods=["POST"])
@app.route("/contact", methods=["POST", "GET"])
Далее в обработчике проверим: пришел ли именно POST-запрос, а не какой-либо другой и выведем данные в консоль:
if request.method == 'POST': print(request.form)
from flask import Flask, render_template, request
Мы здесь используем объект request, который связан с данными текущего запроса и существует в пределах контекста запроса, как мы это отмечали на предыдущих занятиях. Далее, все данные формы доступны по свойству form, которое представляет своеобразный словарь, то есть, для доступа к конкретному полю можно использовать следующую запись:
Мы пока не будем нигде сохранять принятые данные, т.к. для этого следует использовать БД, о которой еще ничего не говорили. Главное, на этом этапе понимать, как происходит прием данных от формы и их представление в объекте request. На этом завершим это занятие. На следующем продолжим изучать функционал работы с формами.