Сайт на Golang. Часть 3. Используем внешние файлы

В прошлый раз мы научились работать с HTML страницами, но чтобы добавить им интерактивности или задать определенный внешний вид нам потребуется использовать внешние файлы: JS-скрипты, CSS-стили, различные изображения и т.д. Казалось бы, с вопросом подключения внешних файлов не должно возникнуть сложностей. Однако недостаточно просто указать полный путь к директории сервера с файлами (как это делается в PHP) .

После компиляции нашего проекта в исполняющий файл с бинарным кодом, все внешние файлы, которые мы захотим использовать, будут лежать отдельно. Поэтому наша задача при создании приложения объяснить ему куда следует смотреть, чтобы найти тот или иной файл. Делается это при помощи метода ServeFiles() структуры Router. Он принимает два параметра: первый представляет собой строковый шаблон пути, который мы будем использовать в HTML, JS или CSS файлах; второй говорит нашему приложению в какой папке эти файлы реально находятся. Прописываем метод и размещаем первой строкой перед маршрутами.

func routes(r *httprouter.Router) {
	//путь к папке со внешними файлами: html, js, css, изображения и т.д.
	r.ServeFiles("/public/*filepath", http.Dir("public"))
	//что следует выполнять при входящих запросах указанного типа и по указанному адресу
	r.GET("/", controller.StartPage)
	r.GET("/users", controller.GetUsers)
}

Теперь давайте попробуем вывести на стартовой странице какое-нибудь изображение. Для этого в папке «public» создаем новую папку «img» и размещаем там наше изображение (у меня это фото кота «сat.jpg»). Затем в файле «startStaticPage.html» мы добавляем элемент img, указывая необходимый путь.

<h1>Приветствую тебя на стартовой странице этого сайта!</h1>
<img src="/public/img/cat.jpg" alt="это кот">

Проверяем результат:

Если мы удалим/закомментируем строчку «r.ServeFiles(«/public/*filepath», http.Dir(«public»))» или укажем там неверные пути, то работа с внешними файлами, расположенными локально, станет просто невозможной.

Теперь на примере Bootstrap попробуем подключить внешние стили и скрипты. Для этого в папке «public» создаем две новые: «js» и «css», затем скачаем и закинем туда все, что нужно для использования Bootstrap.

В файле «common.html» модифицируем именованные шаблоны, созданные в прошлой статье:

{{define "meta"}}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{end}}

{{define "styles"}}
    <link rel="stylesheet" href="/public/css/bootstrap.min.css">
{{end}}

{{define "scripts"}}
    <script src="/public/js/jquery.min.js"></script>
    <script src="/public/js/popper.min.js"></script>
    <script src="/public/js/bootstrap.min.js" ></script>
{{end}}

Проверяем результат:

Теперь мы умеем работать с внешними файлами. В следующей статье мы разберем основные моменты подключения к СУБД и расширим наш роутинг, добавив команды на добавление, удаление и обновление данных.

Структура нашего проекта на текущий момент: