Зарегистрируйтесь, чтобы продолжить обучение

Работа со статическими ресурсами Spring Boot

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 будет доступна ваша веб-страница.

Действия:

  1. Структура проекта

    Разместите ваши статические файлы в папке src/main/resources/static/. Пример структуры:

    Нажмите, чтобы увидеть структуру папок
    src/main/resources/static/
    ├─ about.html        <- страница /about
    ├─ css/
    │   └─ style.css     <- ваш собственный CSS
    ├─ js/
    │   └─ script.js     <- ваш собственный JS
    └─ img/
    └─ logo.png      <- картинка
    
  2. Доступ к странице

Нажмите, чтобы увидеть инструкцию проверки
  • Запустите Spring Boot (mvn spring-boot:run или через IDE).
  • Откройте в браузере: http://localhost:8080/about.html.
  • Страница должна корректно отображаться с вашими стилями, картинкой и интерактивным элементом.

Итог

  • Создали папку static для HTML, CSS, JS и картинок.
  • Написали простую страницу /about.html с кастомным стилем и интерактивным элементом на JS.
  • Подключили свои CSS и JS, а также добавили картинку.
  • Проверили работу страницы в браузере: все стили и скрипты корректно подгружаются.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff