Spring Boot предоставляет автоматическую конфигурацию для отдачи статических ресурсов — например, JS, CSS или картинок. По умолчанию они автоматически отдаются по запросу из директории src/main/resources/static. Содержимое этой директории может выглядеть так:
- src/main/resources/static/images/logo.png
- src/main/resources/static/css/style.css
- src/main/resources/static/js/app.js
Если предположить, что сервер стартует на 8080 порту, то получить доступ к этим файлам можно по следующим ссылкам:
- http://localhost:8080/images/logo.png
- http://localhost:8080/css/style.css
- http://localhost:8080/js/app.js
Или то же самое внутри HTML-файлов:
<img src="/images/logo.png" alt="Logo" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/js/app.js"></script>
Если ресурс не найден, то Spring Boot автоматически возвращает ошибку 404. Страницу с ошибкой можно кастомизировать, для этого необходимо создать файл 404.html в директории src/main/resources/public/error.
index.html
Входную страницу сайта или сервиса на Spring Boot можно получить двумя способами:
- С помощью обработчика маршрута главной страницы http://localhost:8080
- С помощью статического файла index.html добавленного в директорию src/main/resources/public. Spring Boot отдает этот файл автоматически при запросе на http://localhost:8080. Это самый распространенный способ при наличии фронтенд-части, создаваемой отдельно от Spring Boot
Рассмотрим пример файла:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<h1>Welcome to Hexlet!</h1>
<img src="/images/logo.png" alt="Logo" />
<script src="/js/app.js"></script>
</body>
</html>
Самостоятельная работа
В этом упражнении вы научитесь правильно хранить и отдавать статические файлы (HTML, CSS, JS, картинки) через Spring Boot. В итоге по адресу GET /about
будет доступна ваша веб-страница.
Действия:
Структура проекта
Разместите ваши статические файлы в папке
src/main/resources/static/
. Пример структуры:Нажмите, чтобы увидеть структуру папок
src/main/resources/static/ ├─ about.html <- страница /about ├─ css/ │ └─ style.css <- ваш собственный CSS ├─ js/ │ └─ script.js <- ваш собственный JS └─ img/ └─ logo.png <- картинка
Доступ к странице
Нажмите, чтобы увидеть инструкцию проверки
- Запустите Spring Boot (
mvn spring-boot:run
или через IDE). - Откройте в браузере: http://localhost:8080/about.html.
- Страница должна корректно отображаться с вашими стилями, картинкой и интерактивным элементом.
Итог
- Создали папку
static
для HTML, CSS, JS и картинок. - Написали простую страницу
/about.html
с кастомным стилем и интерактивным элементом на JS. - Подключили свои CSS и JS, а также добавили картинку.
- Проверили работу страницы в браузере: все стили и скрипты корректно подгружаются.
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.