Вопрос или проблема
У меня есть проект SpringBoot Initializr, который представляет собой технопарк с использованием HTML и Bootstrap. Однако, когда я его запускаю, получается пустая страница. Я попытался изменить порт, изменить версию JDK (раньше был JDK 17, теперь у меня JDK 23), а также использовать другую версию Spring Boot (использовал 3.1.0, использую 3.3.4), а также обновил другие зависимости, но проблема остается прежней. В консоли сервера или в консоли браузера нет ошибок, когда на пустой странице, и эта проблема также возникает, если я запускаю проект на другом компьютере или если я создаю проект, используя ту же разметку и индекс HTML, поэтому я подозреваю, что это может быть связано с путями, но не уверен в коренной причине. Я добавлю несколько фрагментов кода ниже
pom.xml
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.4</version>
<relativePath/>
</parent>
<groupId>Tienda</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Tienda</name>
<description>Демо проект для Spring Boot</description>
<url/>
<licenses>
<license/>
</licenses>
<developers>
<developer/>
</developers>
<scm>
<connection/>
<developerConnection/>
<tag/>
<url/>
</scm>
<properties>
<java.version>21</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.3.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>6.4.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.7.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>popper.js</artifactId>
<version>2.11.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.47</version>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
index html
<html xmlns:th="http://www.thymeleaf.org"
xmlns="http://www.w3.org/1999/xhtml">
<head th:replace="~{layout/plantilla :: head}">
<title>TechShop</title>
</head>
<body>
<header th:replace="~{layout/plantilla :: header}"/>
<footer th:replace="~{layout/plantilla :: footer}"/>
</body>
</html>
layout html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<title>TechShop</title>
<meta charset="UTF-8"/>
<link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/webjars/font-awesome/css/all.css}" rel="stylesheet"/>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<header th:fragment="header" class="header">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark p-0">
<div class="container">
<a th:href="@{/}" class="navbar-brand">[[#{aplicacion.titulo}]]</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item px-2"><a class="nav-menu-link nav-link" th:href="@{/categoria/listado}">[[#{plantilla.categorias}]]</a></li>
<li class="nav-item px-2"><a class="nav-menu-link nav-link" th:href="@{/producto/listado}">[[#{plantilla.productos}]]</a></li>
<li class="nav-item px-2"><a class="nav-menu-link nav-link" th:href="@{/usuario/listado}">[[#{plantilla.usuarios}]]</a></li>
</ul>
<div class="col-md-3">
<ul class="navbar-nav">
<li class="nav-item px-2"><a class="nav-link" th:href="@{/(lang=es)}">ES</a></li>
<li class="nav-item px-2"><a class="nav-link" th:href="@{/(lang=en)}">EN</a></li>
</ul>
</div>
</div>
</div>
</nav>
<section id="main-header" class="py-2 bg-success text-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><i class="fas fa-cog"></i> [[#{plantilla.suTienda}]]</h1>
</div>
</div>
</div>
</section>
</header>
<footer th:fragment="footer" class="bg-info text-white mt-5 p-2">
<div class="container">
<div class="col">
<p class="lead text-center">
© [[#{plantilla.derechos}]]
</p>
</div>
</div>
</footer>
</body>
Ответ или решение
Пустая страница при запуске проекта на Spring Boot + Thymeleaf
Введение
Использование Spring Boot и Thymeleaf для создания веб-приложений превращается в популярный выбор среди разработчиков. Однако, нередко можно столкнуться с проблемами, такими как пустая страница при запуске проекта. В этом ответе мы рассмотрим основные причины, которые могут привести к подобной ситуации, и предложим рекомендации по их устранению.
Анализ проблемы
Как средство для создания приложений, ваш проект может быть подвержен ряду проблем, даже если отсутствуют ошибки в консоли. Давайте наметим шаги и возможные источники ваших трудностей:
-
Проблемы с зависимостями в
pom.xml
:- Убедитесь, что все зависимости указаны корректно. Например, проверьте соединение с базой данных (MySQL) и других библиотек, используемых в проекте. Возможно, стоит обновить зависимости до последних стабильных версий, чтобы избежать конфликта версий.
-
Настройки Thymeleaf:
- Вам необходимо провести диагностику ваших шаблонов. Убедитесь, что структура файлов в ресурсах соответствует требованиям Thymeleaf. Стандартный путь для шаблонов — это
src/main/resources/templates
. Путь к "layout/plantilla" должен быть недоступен из-за неправильной конфигурации.
- Вам необходимо провести диагностику ваших шаблонов. Убедитесь, что структура файлов в ресурсах соответствует требованиям Thymeleaf. Стандартный путь для шаблонов — это
-
Проблемы с кешированием:
- Используйте
spring-boot-devtools
для сброса кеша при разработке. При каждом обновлении страницы или изменении кода необходимо очищать кеш.
- Используйте
-
Структура HTML и использование фрагментов:
- Убедитесь, что ваши фрагменты корректно установлены. Проверьте правильность ссылок, используемых в
th:replace
, и убедитесь, что каждый файл имеет правильный синтаксис HTML и Thymeleaf. Ошибки в HTML могут привести к пустым страницам.
Пример структуры шаблона:
<html xmlns:th="http://www.thymeleaf.org"> <head th:replace="~{layout/plantilla :: head}"></head> <body> <header th:replace="~{layout/plantilla :: header}"></header> <footer th:replace="~{layout/plantilla :: footer}"></footer> </body> </html>
- Убедитесь, что ваши фрагменты корректно установлены. Проверьте правильность ссылок, используемых в
-
Проверка маршрутов и контроллеров:
- Убедитесь, что ваши контроллеры настроены таким образом, чтобы возвращать нужные вам представления, и что URL-адреса совпадают с теми, которые указаны в
th:href
.
Пример контроллера:
@Controller public class HomeController { @GetMapping("/") public String home(Model model) { return "index"; // Возвращаемый файл index.html } }
- Убедитесь, что ваши контроллеры настроены таким образом, чтобы возвращать нужные вам представления, и что URL-адреса совпадают с теми, которые указаны в
Рекомендации по устранению неполадок
-
Проверка работы портов:
- Вы уже попробовали сменить порт. Убедитесь, что приложение действительно запускается на новом порту. Попробуйте использовать такие команды, как
netstat
, чтобы проверить активные подключения.
- Вы уже попробовали сменить порт. Убедитесь, что приложение действительно запускается на новом порту. Попробуйте использовать такие команды, как
-
Логи выполнения:
- Добавьте больше логирования в ваше приложение. Используйте зависимости
spring-boot-starter-logging
, чтобы отслеживать жизненные циклы вашего приложения, и убедитесь, что ваше приложение корректно инициируется.
- Добавьте больше логирования в ваше приложение. Используйте зависимости
-
Инструменты отладки:
- Вы можете воспользоваться инструментами разработчика (DevTools) в браузере для анализа запросов к серверу и поиска 404 ошибок.
-
Обновление до стабильной версии JDK:
- Хотя вы пробовали разные версии JDK, рекомендуется работать с первой стабильной версией (например, JDK 17 или 21), которая совместима с Spring Boot 3.3.4.
-
Создание минимального приложения:
- Если проблема сохраняется, создайте минимальный проект и последовательно добавляйте функционал, чтобы определить, что именно вызывает проблему.
Заключение
Проблема с пустой страницей в приложении на Spring Boot и Thymeleaf часто связана с неправильной конфигурацией, ошибками в проектной структуре, зависимостями или кодом контроллеров. Применив описанные выше рекомендации, вы сможете диагностировать и устранить возникшую проблему. Если пустая страница продолжает появляться, рассмотрите возможность обращения к более опытным коллегам или сообществу для обмена опытом.