Мы научились писать простой сервер на flask с двумя страницами. Давайте сделаем это же, но уже с html файлами.
Наши цели:
1. Вывести HTML страницу с CSS стилем.
2. Сделать то же самое с ещё двумя страницами
3. Сделать трёхстраничный сайт, но с одним роутером (роутер это тот самый @app.route())
Подружить Flask и HTML
Начнем пожалуй с вывода html страницы. Что нам надо сделать? Всё просто: для начала импортируем еще один модуль. Это render_template. А в return вместо какой-то строки нам надо написать render_template() эта функция принимает как аргумент путь к файлу HTML, который надо рендерить. Напишем 'home.html'.
у нас получилось так:
Мы сделали функцию отображения страницы и такие радостные кидаем файл home.html рядом с этим пайтон скриптом и получаем следующее:
Что же мы сделали не так? Мы не создали папку для HTML страниц. Да, для страниц нужна отдельная папка, и наш проект должен выглядеть не так:
А так:
Надо создать директорию templates, и поместить home.html в неё.
Проверяем:
Всё работает. Мы молодцы. Теперь подключим стили. Пусть стиль делает надпись "Домашняя страница" зелёной.
Делаем стиль home.css:
Кидаем этот стиль как обычно к HTML Файлу и Подключаем к home.html:
Смотрим:
Но ничего не меняется. Какого хрена спросите вы. Вроде бы всё правильно сделали. Но не тут то было. CSS, JS и прочее надо ложить в папку static.
Делаем так:
И меняем путь к стилю в HTML странице чтобы было так:
Смотрим на результат:
Наш заголовок позеленел, и это значит, что всё сделано правильно. Мы подключили и HTML страницу, и CSS стиль к нашему Flask серверу.
Даёшь больше страниц!
Теперь сделаем ещё страницы. Аналогично создадим ещё два файла в папке templates. Пусть это будут hello.html и info.html и добавим ещё два роутера. По роутеру для каждой из Этих страниц. Также я добавил на домашнюю страницу ссылки на дополнительные страницы и на каждую из них по ссылке на домашнюю.
Вот как выглядит наш проект сейчас:
Давайте запустим и посмотрим что вышло:
Мы сегодня такие молодцы! Сделали Flask сервер с тремя страницами. НО! Нам ещё есть куда расти.
Давайте напишем сервер с одним роутером, но который так же имеет три страницы.
Три в одном
Начнём с того, что удалим два последних роутера в файле main.py и немного изменим первый. Вот готовый вариант:
Вот компактная конструкция. Роутер принимает название файла, который надо открыть и затем эта переменная передаётся функции page, запускающей файл с таким именем.
Теперь меняем ссылки в HTML файлах:
Красота
Смотрим:
Всё работает. Переделка этого сайта на вариант с одним роутером заняла не больше пяти минут. Хотя для меня всё таки больше, потому что я параллельно печатал эту статью:)
Мы сделали всё что планировали в начале, и я показал ошибки, на которые попадался сам в начале знакомства с Flask. Хотя в начале пути я точно не мог сделать так же как в последнем примере. я понял что так можно сделать не так уж и давно.
На этой ноте я с вами прощаюсь. До встречи в следующей статье.