Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Содержание</h2>

3 <ul><li><a>Что такое модель MVC: теория</a></li>

4 <li><a>Разбираем MVC на примере магазина сэндвичей</a></li>

5 <li><a>Паттерн MVC в реальной веб-разработке: как работает контроллер</a></li>

6 <li><a>Модель</a></li>

7 <li><a>Представление</a></li>

8 <li><a>Заключение</a></li>

9 </ul><h2>Что такое модель MVC: теория</h2>

10 <p>Статическая страница на HTML не умеет реагировать на действия пользователя. Для двухстороннего взаимодействия нужны динамические веб-страницы. MVC - ключ к пониманию разработки динамических веб-приложений, поэтому разработчику нужно знать эту модель.</p>

11 <p>MVC расшифровывается как "модель-представление-контроллер" (от англ. model-view-controller). Это способ организации кода, который предполагает выделение блоков, отвечающих за решение разных задач. Один блок отвечает за данные приложения, другой отвечает за внешний вид, а третий контролирует работу приложения.</p>

12 <p>Компоненты MVC:</p>

13 <ul><li>Модель - этот компонент отвечает за данные, а также определяет структуру приложения. Например, если вы создаете To-Do приложение, код компонента model будет определять список задач и отдельные задачи.</li>

14 <li>Представление - этот компонент отвечает за взаимодействие с пользователем. То есть код компонента view определяет внешний вид приложения и способы его использования.</li>

15 <li>Контроллер - этот компонент отвечает за связь между model и view. Код компонента controller определяет, как сайт реагирует на действия пользователя. По сути, это мозг MVC-приложения.</li>

16 </ul><h2>Разбираем MVC на примере магазина сэндвичей</h2>

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

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

19 <p>У поваров под рукой есть разные продукты: тунец, индейка, ветчина, сыр, листья салата и другие ингредиенты, которые добавляют в бутерброды. Они выбирают только то, что нужно для вашего сэндвича с индейкой. Вы получаете свой заказ.</p>

20 <p>Покупку бутерброда можно описать через MVC:</p>

21 <ul><li>Модель: кухня, на которой повар делает сэндвич</li>

22 <li>Представление: готовый бутерброд, который вы с удовольствием едите</li>

23 <li>Контроллер: продавец или бармен, который принимает заказ и передаёт его на кухню.</li>

24 </ul><p>Вы уже представляли готовый сэндвич с индейкой, когда заказывали его бармену. Это представление или view.</p>

25 <p>Точно так же можно представить взаимодействие с сайтом. Когда вы заходите на сайт Хекслета и переходите по ссылке "<a>Истории успеха</a>", то заранее представляете результат перехода по ссылке. Это список текстов с историями ребят, которые учились на Хекслете, а потом стали разработчиками.</p>

26 <p>Когда вы нажимаете на ссылку "Истории успеха", на наш сервер уходит запрос. В нём содержится просьба показать вам список текстов. Это очень похоже на просьбу продать вам бутерброд с индейкой. Это контроллер.</p>

27 <p>На сервере Хекслета ваш запрос обрабатывается. Программа достаёт из базы данных все последние тексты из рубрики "Истории успеха", чтобы показать список. Это можно сравнить с кухней и поварами из примера с сэндвичем. Это модель.</p>

28 <p>Сервер Хекслета берёт нужные ингредиенты из базы данных и готовит ваш заказ: список текстов. Тем же занимались повара на кухне магазина сэндвичей. Это снова представление или view.</p>

29 <h2>Паттерн MVC в реальной веб-разработке: как работает контроллер</h2>

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

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

32 <h2>Модель</h2>

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

34 <p>User: { userName: { firstName, lastName }, friends }</p>

35 <h2>Представление</h2>

36 <p>Это HTML-шаблон, который возвращает сервер после обработки запроса. Если запрос корректно обрабатывается, вы получаете веб-страницу со списком друзей. Если запрос некорректный, вы попадаете на страницу ошибки 404.</p>

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

38 <h2>Заключение</h2>

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

40 <p><em>Это адаптированный перевод статьи<a>What is MVC, and how is it like a sandwich shop?</a></em></p>