Пустая страница при запуске проекта с использованием Spring Boot + Thymeleaf

Вопрос или проблема

У меня есть проект 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">
                        &COPY [[#{plantilla.derechos}]]
                    </p>
                </div>
            </div>
        </footer>
    </body>

Ответ или решение

Пустая страница при запуске проекта на Spring Boot + Thymeleaf

Введение

Использование Spring Boot и Thymeleaf для создания веб-приложений превращается в популярный выбор среди разработчиков. Однако, нередко можно столкнуться с проблемами, такими как пустая страница при запуске проекта. В этом ответе мы рассмотрим основные причины, которые могут привести к подобной ситуации, и предложим рекомендации по их устранению.

Анализ проблемы

Как средство для создания приложений, ваш проект может быть подвержен ряду проблем, даже если отсутствуют ошибки в консоли. Давайте наметим шаги и возможные источники ваших трудностей:

  1. Проблемы с зависимостями в pom.xml:

    • Убедитесь, что все зависимости указаны корректно. Например, проверьте соединение с базой данных (MySQL) и других библиотек, используемых в проекте. Возможно, стоит обновить зависимости до последних стабильных версий, чтобы избежать конфликта версий.
  2. Настройки Thymeleaf:

    • Вам необходимо провести диагностику ваших шаблонов. Убедитесь, что структура файлов в ресурсах соответствует требованиям Thymeleaf. Стандартный путь для шаблонов — это src/main/resources/templates. Путь к "layout/plantilla" должен быть недоступен из-за неправильной конфигурации.
  3. Проблемы с кешированием:

    • Используйте spring-boot-devtools для сброса кеша при разработке. При каждом обновлении страницы или изменении кода необходимо очищать кеш.
  4. Структура 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>
  5. Проверка маршрутов и контроллеров:

    • Убедитесь, что ваши контроллеры настроены таким образом, чтобы возвращать нужные вам представления, и что URL-адреса совпадают с теми, которые указаны в th:href.

    Пример контроллера:

    @Controller
    public class HomeController {
       @GetMapping("/")
       public String home(Model model) {
           return "index"; // Возвращаемый файл index.html
       }
    }

Рекомендации по устранению неполадок

  1. Проверка работы портов:

    • Вы уже попробовали сменить порт. Убедитесь, что приложение действительно запускается на новом порту. Попробуйте использовать такие команды, как netstat, чтобы проверить активные подключения.
  2. Логи выполнения:

    • Добавьте больше логирования в ваше приложение. Используйте зависимости spring-boot-starter-logging, чтобы отслеживать жизненные циклы вашего приложения, и убедитесь, что ваше приложение корректно инициируется.
  3. Инструменты отладки:

    • Вы можете воспользоваться инструментами разработчика (DevTools) в браузере для анализа запросов к серверу и поиска 404 ошибок.
  4. Обновление до стабильной версии JDK:

    • Хотя вы пробовали разные версии JDK, рекомендуется работать с первой стабильной версией (например, JDK 17 или 21), которая совместима с Spring Boot 3.3.4.
  5. Создание минимального приложения:

    • Если проблема сохраняется, создайте минимальный проект и последовательно добавляйте функционал, чтобы определить, что именно вызывает проблему.

Заключение

Проблема с пустой страницей в приложении на Spring Boot и Thymeleaf часто связана с неправильной конфигурацией, ошибками в проектной структуре, зависимостями или кодом контроллеров. Применив описанные выше рекомендации, вы сможете диагностировать и устранить возникшую проблему. Если пустая страница продолжает появляться, рассмотрите возможность обращения к более опытным коллегам или сообществу для обмена опытом.

Оцените материал
Добавить комментарий

Капча загружается...