Flask не видит css файл подключенные к html шаблону, что делать?
ОТВЕТ:
Во всем интернете не было информации по этому поводу, что достаточно странно, или я просто не умею гуглить
Следует добавить во фласк строку
static_path = os.path.join(project_root, ‘../client/static’)
А app перезаписать как
app = Flask(__name__, template_folder=template_path, static_folder=static_path)
Все заработало
При попытке подключить css файл к html, используя Flask, он просто не находится.
404
Подключаю не просто так
+
Мб дело в том, что для того чтобы подключить html к Flask я так же прописывал
import os
import sys
project_root = os.path.dirname(__file__)
template_path = os.path.join(project_root, ‘../client’)
app = Flask(__name__, template_folder=template_path)
- Вопрос задан более трёх лет назад
- 6662 просмотра
Неправильно подключается статический CSS файл к Flask
У меня возникла странная ситуация. Я создал простое приложение на Flask и решил попробовать подключить к нему CSS файл. Создал папку static добавил туда css файл. Вот содержимое файла:
body
Все работало, весь текст приобрел красный цвет. Затем я изменил содержимое этого файла
body
Я сохранил файл, перезапустил сервер, обновил сайт, но он остался таким каким был. После этого я вообще удалил все из CSS файла, сохранил его, перезапустил сервер, обновил сайт, но там все так-же был красный цвет! Кто знает почему при изменении CSS файла он как-будто не меняется?
Подключение внешних ресурсов и работа с формами
Это занятие начнем с рассмотрения способа подключения внешних ресурсов к шаблону 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>
Теперь, при обновлении увидим такую страницу:
Далее, добавим ссылки нашим пунктам меню:
li>a href=">">{{m.name}}/a>/li>
А само меню в программе представим в виде списка словарей:
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"])
Или так, если хотим обрабатывать и POST и GET запросы:
@app.route("/contact", methods=["POST", "GET"])
Далее в обработчике проверим: пришел ли именно POST-запрос, а не какой-либо другой и выведем данные в консоль:
if request.method == 'POST': print(request.form)
А вначале импортируем этот объект:
from flask import Flask, render_template, request
Мы здесь используем объект request, который связан с данными текущего запроса и существует в пределах контекста запроса, как мы это отмечали на предыдущих занятиях. Далее, все данные формы доступны по свойству form, которое представляет своеобразный словарь, то есть, для доступа к конкретному полю можно использовать следующую запись:
print(request.form['username'])
Мы пока не будем нигде сохранять принятые данные, т.к. для этого следует использовать БД, о которой еще ничего не говорили. Главное, на этом этапе понимать, как происходит прием данных от формы и их представление в объекте request. На этом завершим это занятие. На следующем продолжим изучать функционал работы с формами.
#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 со следующим содержимым.
body color: red > Стоит вспомнить, что в уроке «Основы 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.
- ТЕГИ
- Flask
- Уроки по Flask на русском