Как связать бэкэнд и фронтенд
Я новичок в программировании через интерфейс, так что, пожалуйста, оставайтесь со мной. В школе мы изучали такие языки программирования, как Java, C #, Python, C и немного C ++. В качестве хобби я сам пытался изучить интерфейс, поэтому начал с Vue, JavaScript, HTML и CSS. В школе мы обычно запускаем наш код в терминале (для внутреннего программирования), например, мы выполнили алгоритм пузырьковой сортировки, а затем мы предоставляем некоторый пользовательский ввод (через терминал), а затем вызываем пузырьковую сортировку для сортировки ввода. Дело в том, что когда я пишу программу в бэкэнде и хочу сделать для нее веб-сайт, как я могу подключить свой бэкэнд к своему интерфейсу? Давайте возьмем простой веб-сайт в качестве примера, где я пишу программу, которая сортирует мои числа с помощью пузырьковой сортировки, а затем я хочу иметь возможность заставить пользователя писать массив на веб-сайте, а затем нажимать кнопку «сортировка». Когда он / она нажимает на нее, должна вызываться моя бэкэнд-функция пузырьковой сортировки и так далее. Я искал в Google, но все, что я могу найти, — это другие веб-сайты, предоставляющие услуги по созданию веб-сайтов. Я хочу запрограммировать с нуля как бэкэнд, так и интерфейс, и соединить их вместе. Есть способ? Если да, то у каждого языка свой путь или есть общий путь? Я имею в виду, что, возможно, я пишу бэкэнд на Java для одного веб-сайта, а для другого веб-сайта я пишу его на Python. Есть ли разница в том, как тогда подключать обратно и фронтенд? Заранее спасибо.
3 ответа
Вопрос довольно расплывчатый
Теперь у внешнего интерфейса есть несколько способов подключения к серверной части. Посмотрим. Но сначала подведем итоги.
Внешний интерфейс : относится к стороне клиента. Пользовательский интерфейс, с которым взаимодействуют пользователи.
Примеры фреймворков : ReactJS (JS / TS), VueJS, Angular и т. д.
Back End: относится к работе на стороне сервера, такой как аутентификация, выборка данных и т. д.
Примеры фреймворков : NodeJs (JS / TS), Django, ASP.NET и т. д.
HTML, CSS и JS — это строительные блоки веб-сайтов. Со временем у нас появились такие фреймворки, как Sprint (Java), asp.net (c #), django (python) и т. Д. Они могут отличаться языком, на котором они построены. Но все они следуют одним и тем же образцам. Вот некоторые из распространенных архитектур дизайна:
- Модель – Представление – Модель представления (MVVM)
- Модель-представление-контроллер (MVC)
- 3-х уровневая архитектура
Чтобы узнать о различиях в MVC и MVVM, ознакомьтесь с ответом
Теперь разработчик в зависимости от проекта выбирает любой из этих шаблонов. Но это просто архитектуры, которые могут быть реализованы с любыми фреймворками.
Другое дело, как взаимодействуют фронтенд и бэкэнд. Предположим, вам и мне поручено создать систему управления школой.
Вы выбрали Angular (передняя часть) и asp.net (бэкэнд). С другой стороны, я выбрал ReactJS (фронтенд) и Nodejs (бэкэнд). Мы оба можем достичь одной и той же цели. Но с разными языками.
API против шаблонов . Это два разных способа, с помощью которых наше приложение может установить связь между интерфейсом и сервером.
- Templating :
Механизм шаблонов позволяет использовать файлы статических шаблонов в вашем приложении. Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями и преобразует шаблон в файл HTML, отправляемый клиенту. Такой подход упрощает создание HTML-страницы.
- API: API — это интерфейс прикладного программирования, который представляет собой программный посредник, позволяющий двум приложениям взаимодействовать друг с другом. Допустим, пользователь на портале вашего учебного заведения вводит свое имя и пароль и нажимает кнопку «Войти». Это отправит почтовый запрос на бэкэнд, и бэкэнд, который вы написали, проверит, настоящий пользователь или нет. Если аутентификация прошла успешно, серверная часть отправит сообщение, и пользователь перейдет на панель управления портала.
Чтобы лучше понять, когда выбирать шаблоны или API, обратитесь к этому опубликовать
Теперь о приведенном вами примере, то есть пузырьковой сортировке. На самом деле вам не нужен бэкэнд и разработка API для отображения отсортированных данных. И обычно серверная часть требуется для веб-сайтов, которые обрабатывают аутентификацию, авторизацию, защищенные данные и т. Д., Такие как электронная коммерция.
Тем не менее, у вас может быть бэкэнд для такого проекта. Вам нужно будет отправить данные на сервер, который отсортирует массив и отправит отсортированный результат обратно.
Обратитесь к разделу API / Шаблоны, чтобы выбрать предпочтительный метод. Надеюсь, вы хорошо разбираетесь в том, как работать с вашим приложением.
Наиболее часто используемый подход к тому, что вы пытаетесь достичь, — это использование методов HTTP. Я предлагаю вам попробовать создать архитектуру REST, ваша серверная часть будет одной веб-службой, которая отвечает на HTTP-запросы, сделанные из вашего внешнего интерфейса.
Например: ваш внешний интерфейс отправляет запрос POST, ваш серверный модуль обработает функцию пузырьковой сортировки и отправит ответ на ваш интерфейс.
Попробуйте поискать в Google документацию об архитектуре REST, вы найдете много информации, а также, если вы используете java или python, вы можете легко реализовать REST API с помощью Spring Boot framework с Java или Flask с Python.
Следуя этому руководству, вы можете создать простой REST API на java, а затем из внешнего интерфейса. вам просто нужно сделать HTTP-запросы к этому API, который вы создали.
Попробуйте MVC или ASP.NET, у меня была такая же проблема, когда я знал и то, и другое и не знал, где их объединить. Пока я не наткнулся на MVC.
Он объединяет в себе идеальную синхронизацию, где у вас есть часть внешнего интерфейса (View) и контроллеры для него, которые являются вашим сервером. Найдите и попробуйте в Visual Studio.
Взаимодействие backend и frontend
Понятия фронтенд (frontend, front-end) и бэкенд (backend, back-end) известны каждому. В этой статье поговорим о нюансах взаимодействия фронтенда с бэкендом.
Мы уже рассказывали о том, что frontend- и backend-разработкой часто занимаются разные специалисты. Тем не менее каждому из них желательно знать принципы, по которым работают их коллеги. Здесь нельзя не упомянуть и про Full-stack developer’а (фулстек-разработчика), который знает весь стек технологий, используемых в проекте как в части backend, так и в части frontend. Как говорится, эксперт и мастер на все руки. Впрочем, никто не мешает и вам стать таким)). Но не будем отвлекаться и перейдём к основной теме нашей статьи — взаимодействию между front-end и back-end.
Как взаимодействуют backend и frontend?
Если говорить простым языком, то взаимодействие между backend и frontend происходит по кругу: 1) фронтенд отправляет пользовательскую информацию в бэкенд; 2) там информация обрабатывается; 3) информация возвращается обратно, принимая понятную для пользователя форму.
Варианты взаимодействия backend и frontend:
• HTTP-запрос. Напрямую отправляется на сервер, сервер ищет данные, встраивает их в шаблон, а потом возвращает в виде HTML-страницы. Между получением запроса и ответом на него сервер обычно ищет по сформированному запросу информацию в БД. С помощью HTML определяется, что будет показано, а CSS — как всё будет выглядеть. JS необходим для особых взаимодействий; • использование инструментария AJAX (Asynchronous JavaScript and XML). Запрос отправляется посредством JavaScript, загруженным в браузер. Ответ приходит в формате JSON или XML; • одностраничные приложения. Они загружают данные без обновления веб-страницы. Это также осуществляется посредством AJAX либо с помощью фреймворков Ember и Angular; • Ember либо библиотека React. Они помогают использовать приложение и в клиенте, и на сервере. Backend и frontend взаимодействуют с помощью AJAX и HTML-кода, обрабатываемого на сервере.
Что такое бэкенд и фронтенд, а также в чем между ними разница
Что же такое фронтенд (frontend) и бэкенд (backend)-разработка? Скорее всего, вы уже могли слышать данные термины от знакомых программистов, но до сих не знаете, что они означают. Предлагаем вам совместно разобраться что должен знать frontend-разработчик, какими компетенциями должен обладать backend и чем они отличаются друг от друга.
- Frontend-разработчик — кто это
- Backend-разработчик — кто это
- Структура взаимодействия фронтенд и бэкенд
- Серверное приложение
- AJAX и аналогичные решения
Frontend-разработчик — кто это
Хотелось бы начать с того, что frontend и backend-разработчики необходимы в одинаковой мере для создания интернет-магазина, корпоративного сайта и прочих web-ресурсов, когда речь идет о разработке многофункционального продукта.
Frontend — что же это означает? Простыми словами, фронтенд (frontend) — это, та самая составляющая программирования, которую считывает система браузера, а также демонстрирует (запускает) на странице для просмотра пользователя. Другими словами, это CSS, HTML и JavaScript.
CSS (Cascading Style Sheets) дает команду браузеру, каким образом отражать все элементы, к примеру: диаметр отступов между блоками, цвет и размер шрифта или опять же блоков.
HTML (HyperText Markup Language) сигнализирует системе браузера о том, каким должно быть содержимое страницы в целом, то есть, в HTML вы создаете заголовки, параграфы, списки, элементы списков или пишите текст.
JavaScript информирует систему браузера о том, каким образом реагировать на определенные команды, при этом применяя простой язык программирования. На самом деле, на сегодняшний день довольно большое количество ресурсов использует JavaScript.
Следовательно, frontend-разработчик — это программист, который отвечает за создание пользовательского интерфейса, другими словами, наружной и доступной к обозрению пользователями, составляющей ресурса в браузере. Основная цель frontend-разработчика заключается в создании предельно удобного механизма для коммуникации посетителя с ресурсом.
Теперь вы знаете, что такое фронтенд, давайте разберемся с тем, что такое бэкенд.
Backend-разработчик — кто это
Бэкенд (backend) — это, та часть работ, которая происходит за пределами досягаемости браузера, то есть на сервере.
Сервер — это специальный компьютер, обычно, с наиболее большими ресурсами в отношении производительности, для реализации соответствующих задач. Он выполняет функции по хранению сведений, DNS (преобразование «буквенных» адресов в сети в IP), DHCP (динамическое распределение адресов), и так далее. В общем, в соответствии с архитектурой «клиент-сервер», сервер по запросу клиента предоставляет ему свои ресурсы.
Для бэкенда программисты могут пользоваться всеми средствами, которые доступны на сервере. Например, любой многофункциональный язык программирования:
- Java;
- JavaScript;
- Python;
- Visual Basic;
- Swift;
- и так далее.
Тоже самое относится и к системам управления базами данных:
- Cassandra;
- Redis;
- PostgreSQL;
- MongoDB;
- и так далее.
Backend-разработчик — кто же это простыми словами? Бэкенд-разработчик — это программист, занимающийся внутренней, вычислительной разработкой ресурсов, к тому же прочего программного обеспечения или баз данных. Иными словами, помимо web-решений, backend необходим для десктопных версий и разработки мобильных приложений, поскольку backend — это, работы, имеющие непосредственное отношение к программно-адаптивной составляющей сервиса.
Мы кратко разобрали что это такое frontend и backend. Теперь вы знаете, в чем между ними разница, давайте рассмотрим, как же связаны сферы фронтенд и бэкенд.
Структура взаимодействия фронтенд и бэкенд
На сегодняшний день есть ряд основополагающих ресурсов, которые формируют взаимодействие между frontend и backend.
Взаимодействие между frontend и backend
Серверное приложение
Здесь HTTP-запросы передаются сразу-же на сервер самого приложения, а сервер, в свою очередь, выдает ответ в виде HTML-страницы. В процессе получения запроса и выдачи ответа, сервер производит поиск сведений по полученному запросу в базе данных и генерирует ее в шаблон (ERB, Blade, EJS, Handlebars).
После того, как страница загружена в браузер:
- С помощью HTML вы даете команду, что именно должно быть отображено на этой странице.
- Через CSS вы информируете браузер каким образом это будет отображено.
- JavaScript является неким языком сценариев в интернете, с помощью которого вы сможете настраивать структуру взаимодействия между браузером, HTML и CSS.
AJAX и аналогичные решения
Иной вид архитектуры применяет для коммуникации AJAX (Asynchronous JavaScript and XML). То есть JavaScript, загруженный в браузер, передает HTTP-запрос (XHR, XML HTTP Request) внутри страницы и в результате получает XML-ответ. Помимо этого, для ответов можно применять формат JSON. Более подробно про систему безопасности передачи сведений вы можете прочитать в статье о том, что такое HTTPS-протокол.
Другими словами, ваш сервер обязан иметь некую финальную ступень, которая будет отвечать на получаемые запросы через JSON или с помощью XML-кода. Существует 2 основополагающих протокола, которые используют для данной задачи:
- REST.
- SOAP.
Также AJAX дает вам возможность производить загрузку сведений при этом не обновляя страницу. Чаще всего, это требуется в таких программных платформах, как Angular и Ember. В последствии разработки, подобные приложения загружаются в браузер и все дальнейшие рендеринги реализуются на стороне пользователя, то есть в браузере. В этом случае, frontend-разработчик комуницируют с backend-разработчиком через HTTP, применяя JSON или XML-код.
Также существуют библиотеки и фреймворки, такие как: React и Ember, которые дают возможность реализовывать приложения как на сервере, так и «в клиенте». В данном случае для коммуникации frontend с backend, в приложении используется AJAX, обрабатываемый на сервере HTML.
Мы рассмотрели, что такое фротенд и бэкекд разработка и в чем между ними разница. Также хочется отметить, что на сегодняшний день крайне тяжело найти высококлассных специалистов в данных областях, в связи с тем, что большинство так называемых специалистов имеют поверхностные знания и не планируют развиваться дальше, поскольку подвержены воздействию эффекта Даннинга-Крюгера. Если у вас остались вопросы по данной статье — пишите нам в комментарии, и мы обязательно ответим.