image_pdf

В этом уроке:

Давай пройдемся по закоулкам своей памяти и покажем как веб‑приложение по шаблону Model‑View‑Controller (или MVC), работает на практике…

Lego!

Тебе десять лет и ты сидишь на полу в семейном кругу с большой коробкой Lego. Lego есть самых разнообразных форм и размеров. Голубые, высокие и длинные. Есть тракторный прицеп. Некоторые красные и почти кубики. А некоторые желтые — большие широкие пластины, похожие на листы стекла. Со всеми этими различными Lego невозможно предсказать, что можно соорудить.

О, чудо! Уже есть запрос. Старший брат подбегает и требует: «Сделай мне космическую ракету!»

«Хорошо, — думаешь ты — космическая ракета это будет круто!».

Итак, ты приступил к работе. Ты начинаешь выискивать Lego, который нужен. Большие и маленькие. Разных цветов для космической ракеты, разных цветов для двигателей. Ух ты, это разноцветные бластеры. (Тебя обязательно нужен бластер!)

Теперь, когда у тебя есть всё, что нужно, пришло время собрать ракету. И после нескольких часов кропотливой работы перед тобой — космическая ракета!

Ты бежишь к своему брату и гордо показываешь ему свой шедевр. «Ничего себе, хорошая работа!» говорит он. «Ага, — думает он, — я просто попросил его об этом пару часов назад, а не нужно было ничего делать, но вот оно. Вот бы всё было так просто».


О чём вы подумаете, если я скажу, что создавать веб‑приложения точно так же просто, как собирать игрушки из Lego?

Все начинается с запроса

В случае с Lego ваш брат попросил вас что-то сделать. Аналогично с веб‑приложением пользователь, вводящий URL‑адрес, запрашивает просмотр определенной страницы.

Так что твой брат — это пользователь веба.

Запрос приходит в controler (контроллер)

С Lego ты главный, controler (контроллер).

Контролер отвечает за сбор всех необходимых строительных блоков и по мере необходимости их организацию.

Строительные блоки есть model (модель)

Различные наборы Lego есть model (модель). У тебя есть все разные размеры и формы, и ты берешь те, которые нужны для строительства космической ракеты. В веб‑приложении модели помогают контроллеру получать всю необходимую ему информацию из базы данных.

Итак, запрос пришёл…

Контролер, то есть ты, получает запрос.

Идет к моделям (Lego), чтобы получить необходимые предметы.

И теперь всё готово для производства конечного продукта.

Конечный продукт известен как view (представление)

Космическая ракета это представление. Это продукт, который в конечном итоге будет показан человеку, который сделал запрос (твоему брату).

В веб‑приложении представление — это последняя страница, которую пользователь видит в своем браузере.

Подводим итоги…

При строительстве с Lego:

  1. Твой брат просит тебя построить космический корабль.
  2. Ты принимаешь запрос.
  3. Ты находишь и организуете все Lego, которые нужны для постройки космической ракеты.
  4. Ты используешь Lego для создания космической ракеты и презентации её своему брату.
Построение web-приложения по шаблону MVC, как Лего
Построение web-приложения по шаблону MVC, как Лего

И в web‑приложении:

  1. Пользователь запрашивает просмотр страницы, вводя URL.
  2. Controller получает этот запрос.
  3. Он использует Models для извлечения всех необходимых данных, организует их и отправляет в…
  4. View, который затем использует эти данные для отображения окончательной веб‑страницы, презентуемой пользователю в его браузере.
Маршрутизация в MVC
Маршрутизация в MVC

Ближе к технике

Обобщая функциональность MVC, давайте немного углубимся и посмотрим, как все работает на техническом уровне.

Когда вы вводите URL в своем браузере для доступа к веб‑приложению, вы делаете запрос на просмотр определенной страницы в приложении. Но как приложение узнает, какую страницу показывать/отображать?

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

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

Маршруты

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

Давайте рассмотрим базовый маршрут для Flask в качестве примера:

@app route('/')
def main_page():
    pass

Здесь мы устанавливаем маршрут /, связанный с функцией представления main_page().

Модели и контроллеры

Внутри контроллера обычно происходят две основные вещи: 1) модели используются для извлечения всех необходимых данных из базы данных; и 2) эти данные передаются в представление, которое отображает запрашиваемую страницу. Данные, полученные с помощью моделей, обычно добавляются в структуру данных (например, список или словарь) и именно эта структура отправляется в представление.

Вернемся к нашему примеру с Flask:

@app.route('/')
def main_page():
    """Searches the database for entries, then displays them."""
    db = get_db()
    cur = db.execute('select * from entries order by id desc')
    entries = cur.fetchall()
    return render_template('index.html', entries=entries)

Теперь в функции представления мы берем информацию из базы данных и следуем некоторой базовой логике, что возвращает нам список, который мы назначаем переменной records, доступный в шаблоне index.html.

Views

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

Опять же, возвращаясь к нашему приложению Flask, мы можем перебирать записи, отображая каждую из них с использованием синтаксиса Jinja:

{% for entry in entries %}
  
  • {{ entry.title }}

    {{ entry.text|safe }}
  • {% else %}
  • No entries yet. Add some!
  • {% endfor %}

    Итоги

    Итак, более подробное техническое описание процесса запроса MVC выглядит следующим образом:

    1. Пользователь запрашивает просмотр страницы, вводя URL.
    2. Приложение сопоставляет URL‑адрес с предварительно определенным маршрутом.
    3. Вызывается действие контроллера, связанное с маршрутом.
    4. Действие контроллера использует модели для извлечения всех необходимых данных из базы данных, размещения данных в массиве и загрузки представления, передавая структуру данных.
    5. view осуществляет доступ к структуре данных и использует ее для отображения запрошенной страницы, которая затем представляется пользователю в их браузере..

    По мотивам: Model-View-Controller (MVC) Explained – With Lego

    Опубликовано Вадим В. Костерин

    Ст.преп. кафедры ИТЭ. Автор более 130 научных и учебно-методических работ. Лауреат ВДНХ (серебряная медаль).

    Оставьте комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *