Использование Go в качестве бэкэнда
SPA - это короткий термин для одностраничного приложения. Это означает, что весь веб-сайт загружается только один раз, и его содержимое динамически изменяется по мере взаимодействия пользователя со страницей.
Результатом этого является гораздо лучший пользовательский интерфейс. В случае Javascript вы можете использовать Angular, React, Vue и множество других фреймворков Javascript, чтобы ваше приложение работало как SPA. Но вы также можете использовать простой и простой Javascript, чтобы заставить его работать.
Эта статья покажет вам, как сделать простой SPA, используя как можно меньше кода Javascript. Вы поймете, как это работает, а затем сможете расширить этот код до более широкого приложения.
Вы можете использовать серверный язык по своему выбору, в этом руководстве Go и Goland используются в качестве IDE. Репозиторий Github находится внизу статьи.
Вот ссылка, если вы хотите лучше понять, как сделать сервис Go, действующий как веб-сервер.
Подготовка проекта
Создайте новый проект, назовите его medium_spa и используйте модули Go. В корневом каталоге создайте три дополнительных каталога: html, css и js.
Создайте три файла в корневом каталоге: main.go, homepage.go и content.go. Этот файл будет обрабатывать нашу внутреннюю логику
Создайте три файла в каталоге html: homepage.html, first_tab.html и second_tab.html.
Создайте один файл в каталоге css: homepage.css.
Создайте один файл в каталоге js: homepage.js. Этот файл будет обрабатывать нашу логику внешнего интерфейса.
Обновление бэкэнда
Переключитесь на файл main.go и обновите его, используя приведенный ниже код. Если вы хотите лучше понять этот код, проверьте ссылку в начале этой статьи.
Этот код выполняет три основные функции:
- Программа Go будет работать как служба
- Программа Go будет выступать в роли веб-сервера, обслуживающего все необходимые файлы.
- Программа Go будет выступать в роли внутреннего поставщика динамического контента: это строка
router.POST(“/get_content”, getContent)
Теперь переключитесь на homepage.go и обновите его, используя приведенный ниже код. Это простая функция, поэтому, когда вы открываете браузер на http: // localhost, он будет обслуживать этот файл homepage.html.
Обслуживание динамического контента
Перейдите на content.go и вставьте код ниже. В начале кода вы видите, что нам нужно сделать две структуры.
Первый, ContentDataInput, будет содержать входящие данные: какой контент запрашивается со страницы.
Второй, ContentDataOutput, будет содержать исходящие данные, какой ответ будет отправлен обратно на страницу.
Основное назначение этого файла - функция getContent(). Это функция, которая отправляет обратно этот динамически запрошенный контент. В этой функции вы увидите несколько распечаток консоли. Они здесь, чтобы показать нам, что происходит в фоновом режиме, пока кто-то щелкает по странице.
В основном эта функция декодирует, какой контент - какой файл html - запрашивается у приложения. Затем функция считывает файл с диска и отправляет его обратно.
И это все, что нам нужно для серверной части приложения.
Обновление внешнего интерфейса: HTML и CSS
Перейдите на свой homepage.html и обновите файл, используя приведенный ниже код.
Здесь ничего особенного: файл html загрузит css и js при запуске, а затем отобразит простое меню навигации <navbar>.
Интересным здесь является элемент <div id=”content”></div>, так как это элемент, который будет содержать наши динамические данные в будущем.
Перейдите к homepage.css и обновите файл приведенным ниже кодом, чтобы наше приложение выглядело немного лучше.
Теперь обновите first_tab.html приведенным ниже кодом. Как видите, здесь всего два элемента: кнопка и абзац. Оба будут вставлены в этот <div id=”content”></div> из нашего homepage.html по запросу.
Аналогичным образом обновите файл second.tab.html.
Обновление интерфейса: Javascript
Наконец мы подошли к концу. Обновите homepage.js приведенным ниже кодом.
Там меньше 20 строк кода, на самом деле всего 17.
Эти строки будут ждать щелчка navbar, а затем будут запрашивать содержимое. Как только контент поступает, он вставляется в наш элемент <div id=”content”></div>.
Мы даже обрабатываем случай, когда пользователь нажимает на панель навигации за пределами наших двух вкладок с помощью (event.target.id !== “navbar”).
И это все, что вам нужно. Теперь у вас работает SPA, и содержимое загружается динамически, когда вы щелкаете нужную вкладку. Запустите все это (не забудьте установить проект Goland в пакетный режим), и вы увидите, как именно загружается контент, щелкнув вкладку. Без перезагрузки всей страницы.
Добавление некоторого взаимодействия
Поскольку мы добавили кнопки к этим двум html-файлам, было бы неплохо добавить функциональность, чтобы мы знали, что можем обрабатывать элементы, которые были загружены после homepage.html.
Обновите homepage.js одной строкой кода, функцией addInteraction(). Эта функция будет вызываться только после загрузки содержимого.
Затем создайте эту функцию и вставьте логику принятия решения. Вы можете использовать переключатель, если у вас больше контента - больше вкладок, больше меню. Эти несколько строк загрузят правильное взаимодействие для соответствующей вкладки.
Заключительная часть - создать эти две функции. Первая функция будет увеличивать элемент <p>, другая - уменьшать его. Первая функция будет загружена на первой вкладке, вторая - на второй.
Это конечный результат с правильной функциональностью для обеих вкладок.
Резюме
Как видите, создание веб-страницы, которая действует как SPA, не составляет большого труда, и основная его часть может быть выполнена менее чем за час. Используя этот подход, вам не нужно использовать какой-либо специальный фреймворк, и ваш код будет чистым и простым.
