Вы находитесь на странице: 1из 13

 Все статьи | Код

Что такое MVC몭 рассказываем простыми


словами

Современные сайты интерактивные и динамичные — они реагируют


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

Что такое модель MVC몭 теория


Разбираем MVC на примере магазина сэндвичей
Паттерн MVC в реальной веб-разработке: как работает контроллер
Модель
Представление
Заключение
Что такое модель MVC몭 теория
Статическая страница на HTML не умеет реагировать на действия
пользователя. Для двухстороннего взаимодействия нужны
динамические веб-страницы. MVC — ключ к пониманию разработки
динамических веб-приложений, поэтому разработчику нужно знать
эту модель.

MVC расшифровывается как «модель-представление-контроллер» (от


англ. model-view-controller). Это способ организации кода, который
предполагает выделение блоков, отвечающих за решение разных
задач. Один блок отвечает за данные приложения, другой отвечает за
внешний вид, а третий контролирует работу приложения.

Компоненты MVC몭

Модель — этот компонент отвечает за данные, а также определяет


структуру приложения. Например, если вы создаете To-Do
приложение, код компонента model будет определять список задач
и отдельные задачи.
Представление — этот компонент отвечает за взаимодействие с
пользователем. То есть код компонента view определяет внешний
вид приложения и способы его использования.
Контроллер — этот компонент отвечает за связь между model и view.
Код компонента controller определяет, как сайт реагирует на
действия пользователя. По сути, это мозг MVC몭приложения.

Разбираем MVC на примере магазина сэндвичей


Мы уже рассматривали работу с вложенными коллбэками на примере
приготовления гамбургеров. Продолжаем традицию: разберем
паттерн MVC на примере магазина сэндвичей.

Представьте, что вы пришли в магазин или кафе, где можно заказать


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

У поваров под рукой есть разные продукты: тунец, индейка, ветчина,


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

Покупку бутерброда можно описать через MVC몭

Модель: кухня, на которой повар делает сэндвич


Представление: готовый бутерброд, который вы с удовольствием
едите
Контроллер: продавец или бармен, который принимает заказ и
передаёт его на кухню.

Вы уже представляли готовый сэндвич с индейкой, когда заказывали


его бармену. Это представление или view.

Что такое паттерны программирования [Хекслет]


Watch later Share
Точно так же можно представить взаимодействие с сайтом. Когда вы
заходите на сайт Хекслета и переходите по ссылке «Истории успеха»,
то заранее представляете результат перехода по ссылке. Это список
текстов с историями ребят, которые учились на Хекслете, а потом
стали разработчиками.

Когда вы нажимаете на ссылку «Истории успеха», на наш сервер


уходит запрос. В нём содержится просьба показать вам список
текстов. Это очень похоже на просьбу продать вам бутерброд с
индейкой. Это контроллер.

На сервере Хекслета ваш запрос обрабатывается. Программа достаёт


из базы данных все последние тексты из рубрики «Истории успеха»,
чтобы показать список. Это можно сравнить с кухней и поварами из
примера с сэндвичем. Это модель.

Сервер Хекслета берёт нужные ингредиенты из базы данных и готовит


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

Изучайте фронтенд- и бэкенд-разработку на


JavaScript
На Хекслете есть профессии «Фронтенд-программист» и
«Node.js-программист». В процессе обучения на этих профессиях
вы научитесь программировать на JavaScript, изучите
современные инструменты для разработки фронтенд- и бэкенд-
приложений, включая React, Redux, Express.js, Koa, Pos몭greSQL.
приложений, включая React, Redux, Express.js, Koa, Pos몭greSQL.
Первые курсы в профессиях доступны бесплатно.

Паттерн MVC в реальной веб-разработке: как


работает контроллер
Контроллер обрабатывает входящие запросы. Во фреймворке это
может заключаться в определении конкретных URL, на которые
попадает пользователь при переходе по ссылке или при нажатии
кнопки. Рассмотрим это на примере сайта, который отдает
пользователю список его друзей:

Переход по ссылке website(.)com/profile/ ‐>  
возвращает profilewebsite(.)com/friends/ ‐>  
возвращает friendswebsite(.)com/friend={userName}/ ‐>  
возвращает профиль конкретного друга 

Модель
Модель отвечает за данные, которые хранятся и обрабатываются на
сервере.

User: { userName: { firstName, lastName }, friends } 

Представление
Это HTML몭шаблон, который возвращает сервер после обработки
запроса. Если запрос корректно обрабатывается, вы получаете веб-
страницу со списком друзей. Если запрос некорректный, вы попадаете
на страницу ошибки 404.

<ul>   
<ul>   
  <li>Friend 1: {friendList[0].userName}</li>   
  <li>Friend 2: {friendList[1].userName}</li>   
  <li>Friend 3: {friendList[2].userName}</li>   
  ... 
</ul> 

Заключение
MVC — подход к проектированию приложения, который предполагает
выделение кода в блоки типов модель, представление и контроллер.
Контроллер обрабатывает входящие запросы. Модель достаёт из базы
данных информацию, нужную для выполнения конкретных запросов.
Представление определяет результат запроса, который получает
пользователь.

Это адаптированный перевод статьи What is MVC, and how is it like a


sandwich shop?

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

Дмитрий Дементий
02 ноября 2022

Рекомендуемые программы
С нуля до разработчика. Возвращаем деньги, если не удалось найти
работу.

Профессия с нуля

Фронтенд-разработчик
Разработка фронтенд-компонентов для веб-
приложений

 19 января ὕ 10 месяцев

Профессия Новый с нуля

Онлайн-буткемп. Фронтенд-
разработчик
Интенсивное обучение профессии в режиме полного
дня

 9 февраля ὕ 4 месяца

Профессия с нуля

Python-разработчик
Разработка веб-приложений на Django

 19 января ὕ 10 месяцев

Профессия с нуля

Java-разработчик
Разработка приложений на языке Java

 19 января ὕ 10 месяцев

Профессия с нуля

PHP몭разработчик
Разработка веб-приложений на Laravel

 19 января ὕ 10 месяцев

Профессия с нуля

Инженер по тестированию
Ручное тестирование веб-приложений

 19 января ὕ 4 месяца

Профессия с нуля

Node.js-разработчик
Разработка бэкенд-компонентов для веб-приложений

 19 января ὕ 10 месяцев

Профессия с нуля

Fulls몭ack-разработчик
Разработка фронтенд- и бэкенд-компонентов для веб-
приложений

 19 января ὕ 16 месяцев

Профессия c опытом

Разработчик на Ruby on Rails


Создание веб-приложений со скоростью света

 19 января ὕ 5 месяцев

Профессия с нуля

Верстальщик
Верстка с использованием последних стандартов CSS

 в любое время ὕ 5 месяцев

Профессия В разработке с нуля

Аналитик данных
Сбор, анализ и интерпретация данных

 дата определяется ὕ 8 месяцев

ALSO ON RU.HEXLET.IO/BLOG

Как устроена система GitLab для


Google Expert из … К чему готовиться … типов в TypeScript начинающих

2 месяца назад • 2 коммента… 20 дней назад • 3 комментар… месяц назад • 5 комментари… месяц назад
Василика Климова — Мы узнали у экспертов по Перевели большую Рассказываем
преподаватель, современным языкам статью ex-разработчика GitLab: для чег
разработчик с программирования, что Amazon Web Services Хэ как им пользо
собственной веб-студией будет с их любимыми Чжэнхао и узнали, что какие команд

11 Комментариев 
1
Войти

G Присоединиться к обсуждению...

ВОЙТИ С ПОМОЩЬЮ ИЛИ ЧЕРЕЗ DISQUS ?

Имя

5 Share Лучшие Новые Старые

Evans Kaminski − ⚑
EK ⏲ 2 года назад
EK ⏲ 2 года назад
Мне кажется, что немного не в той последовательности образована аббревиатура.
Наверное, было бы логичнее назвать подход CMV - контроллер - модель -
представление, ведь первым в работу вступает контроллер обрабатывая запрос, затем
работает модель, предоставляя нужные данные, а уж потом эти данные попадают в
представление.
4 0 • Ответить • Поделиться ›

feycot
⏲ 4 года назад
− ⚑

Мозг-контроллер по-моему эно немного неверное представление. Скорее это нерв,


нервный импульс который обращается к мозгу. А мозг - модель, там происходит
логика, обработка данных, пришедших извне.
Моделью можно понимать нашу предметную область, которой неважно каким
образом мы с ней общаемся. Бухгалтерский учет живет независимо от того, какой у
него интерфейс, консольный, веб или мобильный. Аналогично с другими вещами,
поэтому Модель это не просто место, где мы подключаемся к базе данных и храним
инфу
8 2 • Ответить • Поделиться ›

Dmitriy Dementiy > feycot


⏲ 4 года назад
− ⚑
Спасибо, вы пишете логично. Даже не знаю, как быть. В оригинале автор
называет мозгом как раз контроллер. А если так рассуждать: в модели уже
есть все варианты поведения, и модель ничего не знает о запросах
пользователей. Их знает как раз контроллер. Он обрабатывает входящую
информацию. Это в порядке обсуждения.
3 0 • Ответить • Поделиться ›

Полина ⏲ 3 года назад


− ⚑
П Спасибо большое за объяснение. Мне понравилось, так как всё описано понятно,
ничего не было пропущено, что часто не даёт мне полностью разобраться. Тут я всё
сразу поняла. Примеры очень удачные. Мне нужно было разобраться в лекции и я
рада, что нашла эту статью.
3 0 • Ответить • Поделиться ›

Dmitriy Dementiy > Полина


⏲ 3 года назад
− ⚑
Спасибо за отклик!
2 0 • Ответить • Поделиться ›

Mikhail Alferov ⏲ 3 года назад


− ⚑
Вот так всё и должно быть представлено читателю: на понятных образах.
Пользователь ждет результат и не знает, кто и как выполнит его «заказ». Зато об этом
знает Контроллер и говорит Модели, где, что и как сделать, чтобы подготовить
результат. А Представление показывает пользователю результат.
2 0 • Ответить • Поделиться ›
Dmitriy Dementiy > Mikhail Alferov
⏲ 3 года назад
− ⚑
спасибо за отклик!
0 0 • Ответить • Поделиться ›

alex ⏲ 2 года назад ⚑−


Прямо отличная статья! По делу, четко и ясно. С реальными примерами и с примерами
для, так сказать, визуализации в голове =) С первого раза понял суть темы, осталось
на практике закрепить))
0 0 • Ответить • Поделиться ›

Полина ⏲ 2 года назад


− ⚑
П Здравствуйте!
Такой вопрос:
"Что может выступать хранилищем данных для модели помимо БД"?
0 0 • Ответить • Поделиться ›

Alirex.Prime > Полина


⏲ 2 года назад
− ⚑
A Есть разные базы данных. Со своими системами управления (СУБД).
В каком-то смысле, даже простой файлик можно использовать как базу
данных. Но далеко не всегда это хороший вариант.

А так, нужно смотреть по ситуации, по ТЗ :)


0 0 • Ответить • Поделиться ›

Полина ⏲ 2 года назад


− ⚑
П Здравствуйте!
Такой вопрос:
"Что может выступать хранилищем данных для модели помимо БД?"
0 0 • Ответить • Поделиться ›

Подписаться Privacy Не продавайте мои данные

О нас Учиться

Карьера в Хекслете Профессии с нуля

Магазин мерча Все курсы

Индивидуальное обучение
Документы
Корпоративное обучение
Условия использования

Соглашение об обработке Читать


ПД Истории успеха
Публичная оферта Отзывы студентов
Акции Блог

Вопросы по урокам
8 800 100 22 47 бесплатно
по РФ Рекомендуемые книги

+7 495 085 28 38 Подписаться


бесплатно по Москве
    
ООО «Хекслет Рус»
432071, г. Ульяновск,
пр-т Нариманова, дом 1Г, оф.
23
ОГРН 1217300010476

Помощь

Справка

Вопросы и ответы

support@hexlet.io

Улучшить Хекслет

Наши проекты

Хекслет Колледж

Code Basics

Codeba몭tle

Hexlet Guides

Хекслет-резюме

Хекслет Runit

Язык
ἱ Язык

Вам также может понравиться