Ставим Miniconda

Идем на сайт https://conda.io/miniconda.html и качаем

запускаем установочный файл, обязательно оставляем галочку Just Me

папку можно выбрать любую, можно хоть на флешку

далее галочки не ставим и просто тыкаем install

и ждем

Настраиваем Visual Studio Code

создаем папку под проект и открываем ее в visual studio code

идем в расширения и ставим плагин python

теперь нажмите Ctrl+Shift+P, откроется управление задачами visual studio code, наберите вот так

кликнете и выберете Command Prompt

теперь создайте файлик server.py

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

Ставим Flask

теперь нам надо поставить пакет который позволит нам развернуть микросервер на python.

Пакет называется Flask. Чтобы его установить надо ввести команду в консоль. Для этого надо создать консоль привязанную к нашей версии питона.

Поэтому тыкаем Ctrl+Shift+P и находим там Python: Создать терминал

снизу откроется консолька:

теперь пишем команду для установки Flask

conda install -c conda-forge flask

если вы в политехе запускаете, то там надо дополнительно указать proxy

set http_proxy=http://172.27.100.5:4444
set https_proxy=http://172.27.100.5:4444
conda install -c conda-forge flask

он там подумает-подумает, чет напишет страшное:

и ждете пока завершится установка:

Пишем наш первый микросервер

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

откройте ранее созданный файлик и впишите в него

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<b>Всем привет!</b>"

глянем что мы вообще написали

теперь надо запустить сервер. Пишем в консольке:

flask --app server --debug run

тут в принципе ничего не меняется кроме слова server. Это на самом деле имя файла, в котором находится код сервера (в нашем случае server.py) но без расширения. Если бы файл назывался main, то надо было написать flask --app main --debug run

увидим что-то такое

давайте откроем ее http://127.0.0.1:5000

поздравляю, вы создали самый настоящий сервер! =)

Для начала уже неплохо, можете поэкспериментировать с ответом, можете даже попробовать что-нибудь посчитать)))

Сейчас мы отдаем текст страницы сайта просто как результат функции. Что конечно здорово, но если представить, что у нас будет даже просто болванка под страницу со всеми этими html/head/body и прочими штуками писать очень быстро станет не интересно.

Специально для таких целей во flask реализовал механизм шаблонов. Как же это работает? Давайте создадим папку templates

теперь добавим в эту папку файлик index.html и загоним в него стандартную болванку текста с каким-нибудь текстом

если запустить сервер flask --app server --debug run и открыть ссылку http://127.0.0.1:5000 то увидим все тот же текст что и в прошлой подсказке

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

обновим теперь страницу в браузере. И проверим что появится:

о, теперь другое дело! =)

Создаем дополнительные страницы

Теперь можно попробовать сделать несколько страниц. Создадим файлики about.html и best_page.html

как же нам подключить их к серверу?

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

теперь если попробовать открывать ссылки http://127.0.0.1:5000/about и http://127.0.0.1:5000/best_page то откроется содержимое наших файлов. Собственно, то что мы и хотели.

Мы можем даже сделать подобие навигации. Добавив в каждый ссылки на другие страницы:

ну и все, красота, можно теперь переходить между страничками! =О

и тут вероятно возникает вопрос, а нафига мы все делали если все тоже самое можно реализовать без всяких python с его фласками, бери liveserver и пили?)

А вот сейчас и разберемся

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

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

Давайте воспользуемся его возможностями!)

Выносим навигацию в подшаблон

Вот у нас сейчас навигация на всех страницах одинаковая. Давайте вынесем ее в отдельный файлик и подключим этот файлик. Я создам подпапку components в папке templates и добавлю в нее файлик _navigation.html

а в файлике index.html пишем так

то же самое делаем с остальными файлами, получится так

теперь если попробовать пооткрывать ссылки все будет работать также

но вы только гляньте сколько строк мы сэкономили! =)

Создаем болванку страницы

Далее глянем на наши страницы еще раз и увидим, что выглядят они не особо по разному.

В принципе можно было вынести, например, head в отдельный файл и тоже подключать его через include. Мы б так сэкономили бы еще кучу места.

Но у jinja есть кое-что получше.

Так называемый механизм наследования шаблонов.

Работает он следующим образом. Вы создаете новый html файлик и описываете шаблон, а в тех местах где должен быть уникальный контент вставляете специальную конструкцию block Пробуем. Создаем файлик __layout.html (у меня два нижних подчеркивания, будьте внимательны!), который выглядит как все остальные файлы, только на месте где у страниц потенциально может находится разный контент мы вставляем

{% block content %}{% endblock %}

вот так получается

Наследуем базовый шаблон

а теперь возьмем все наши файлики страниц и наследуем их от этого базового файла. А уникальный контент пропишем в block. Выглядит это так:

то есть теперь у наших файликов страниц в начале есть строчка

{% extends "__layout.html" %}

которая говорит, что данная страница будет иметь такую же размтеку как и __layout.html.

А вторая конструкция

{% block content %}
    тут у всех страниц свой текст
{% endblock %}

указывает что надо подставить на место {% block content %}{% endblock %} исходного шаблон __layout.html, таким образом мы получаем новый шаблон с уникальным содержимым! =)

Опять же если теперь проверить как оно работает, то работает все так же как и раньше

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

Подключение бутстрапа

Мы можем даже подключить bootstrap в __layout.html. Просто добавив соответствующие стили и скрипты:

и он автоматически станет доступен на всех страницах.

Гляньте, как теперь выглядит внутри отрендеренный шаблон главной страницы

а вот ее исходный код

Сборку файлика из частей собственно и осуществляет компилятор jinja шаблонов.

Но вы только прикиньте насколько меньше надо писать кода! : )

Такие дела =)

В принципе у нас все здорово, странички выводятся, повторяющийся код почти не пишем. Но вот только страницы называются одинаково. Если попереключать ссылки мы увидим, что название вкладки всегда Document

возникает вопрос почему так происходит?

Происходит потому что в файле __layout.html в теге title прописано Document:

так как все страницы наследуют этот шаблон, то у них всех тоже в title прописано одно и то же.

Возникает вопрос, а можно ли сделать так чтобы там выводилось что-то другое.

И таки да, такая возможность есть.

Для этого есть возможность выводить значение переменной в jinja, а саму переменную передавать из python кода.

Передаем переменную в шаблон

Вот как это делается

то есть мы добавили именованный параметр в функцию render_template и присвоили ей соответствующее значение.

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

теперь глянем как это работает:

самое классное, что мы теперь можем эту переменную вставлять где угодно, например, чтобы показывать пользователю где он находится:

получится так:

Добавляем картинку

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

Вот хочу я добавить такую картинку

для этого мне надо создать папку static, положить картинку в нее и прописать путь к этой папке на той странице, где я хочу показать картинку. От так от:

получится, как и ожидалось главная страница с картинкой

ну а вы чего ожидали, никакой магии, все банально до безумия…

По аналогии вы можете располагать в папке static любые статические ресурсы, в том числе и обыкновенные файлы.

Чтобы сделать активное меню, надо сначала оценить какие страницы в навигации у вас есть

Делаем динамическую навигацию

Например, у меня в _navigation.html

<a href="/">Главная</a>
<a href="/about">Обо мне</a>
<a href="/best_page">Самая лучшая страница</a>
<hr>

то есть у нас получается 3 ссылки, которые можно выписать в табличку, вот так:

в python это можно представить в виде списка словариков. То есть мы считаем одну строку как словарик вида

{
   "title": "Главная", "URL": "/"
}

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

[
    { "title": "Главная", "URL": "/" },
    { "title": "Обо мне", "URL": "/about" },
    { "title": "Самая лучшая страница", "URL": "/best_page" },
]

теперь пойдем в файлик сервера server.py, который у меня выглядит так

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def hello_world():
    return render_template("index.html", name="Главная")

@app.route("/about")
def about_view():
    return render_template("about.html", name="Обо мне")

@app.route("/best_page")
def best_page_view():
    return render_template("best_page.html", name="Самая лучшая страница")    

и добавим в самый верх переменную под навигацию

from flask import Flask, render_template

app = Flask(__name__)

nav = [
    { "title": "Главная", "URL": "/" },
    { "title": "Обо мне", "URL": "/about" },
    { "title": "Самая лучшая страница", "URL": "/best_page" },
]

# ... ОСТАЛЬНОЕ НЕ ТРОГАЕМ

теперь когда у нас есть такая переменная, ее можно передать в рендеринг шаблонов

после того как переменная попала в шаблон мы можем там ее попробовать вывести, добавим в _navigation.html

<!-- ДОБАВИЛ -->
<pre>
{{nav}}
</pre>
<!-- конец ДОБАВИЛ -->

<a href="/">Главная</a>
<a href="/about">Обо мне</a>
<a href="/best_page">Самая лучшая страница</a>
<hr>

получится так:

на же понятное хочется генерировать разметку. Так что давайте создадим цикл:

то есть я вывожу каждый пункт меню и ставлю после него тег br, чтобы оно выводилось в столбик

сгенерированная разметка выглядит вот так

синий – это то, что было {{ item }} а красное – это собстенно тег <br>

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

Например, можно вывести только имена:

или добавить к ним ссылки:

ну а вообще логичнее всего сделать прям тег <a> с значениями из item

вот так получится

то есть в принципе можно теперь убрать менюшку, которую вы вручную писали

получится как в самом начале, только теперь меню динамическое

Подсвечиваем активный элемент меню

Чтобы было понятно на какой странице хорошей практикой считается подсвечивать активный элемент меню.

Давайте добавим класс для активного элемента

добавим его в цикле в тег a

получится вот так

то есть все стали активными. Если глянуть сгенерированный код (Ctrl+U) то увидим

Для того чтобы актвиным был только один элемент надо добавить условие. В шаблонизаторе тоже можно использовать if выглядит это так

работает по принципу, когда item.title совпадет с name текущей страницы и если они совпадают, то выводим class="active"

проверим как работает:

красота! =)

Оптимизируем передачу данных

Если так глянуть у нас навигация присутствует на каждой странице. И вот получается, что передавать вот этот nav=nav в каждый вызов render_template немного лениво, да и в принципе идет в разрез с DRY (dont repeat yourself) подходом.

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

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

проверяем:

Работает так же =О

Делаем навигацию на bootstrap

Идем на сайт bootstrap в компоненту навигации

https://getbootstrap.com/docs/5.2/components/navbar/#nav

и копипастим оттуда:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

вставляем в навигацию

получится так

если присмотреться, то заметим, что за ссылки отвечают вот эти штуковины

по сути один пункт имеет вид

<li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>

то есть давайте вместо четырех ссылок сделаем цикл, который генерит такую конструкцию вот так

получится

подставим значения item.URL и item.title

проверим:

у нас кнопки все активны потому что всегда стоит класс active

давайте тоже будем его генерить динамически

тестируем:

Отлично! =)

ну и можно убрать теперь старую навигацию

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          {% for item in nav %}
            <li class="nav-item">
              <a class="nav-link {% if item.title == name %}active{% endif %}" aria-current="page" href="{{ item.URL }}">{{ item.title }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </nav>
<hr>

<style>
    .active {
        background-color: yellow;
    }
</style>

о как получится

Вынести стили очень просто. Допустим вот у меня есть стиль навигации active, вот тут

и например стиль для карусели

чтобы вынести все стили в отдельный файл, надо создать файлик main.css в папке static

теперь загоняем в main.css содержимое тегов <style>...</style>

теперь убираем сами теги <style>...</style> с содержимым из __layout.html и _navigation.html

теперь подключаем сам файлик через тег link в __layout.html

Ну и собственно все, теперь стили будут браться из файлика main.css =)