Issue:
I attempted to implement Thymeleaf to show 20 PTE questions’ CRUD operations (Create/Read/Update/Delete). However, it encountered difficulties in loading all CSS and JS files.
Resolution:
Upon investigation, I discovered that removing the ‘@EnableMVCConfig’ annotation resolved the issue. This annotation disabled certain auto-configurations, preventing the loading of essential resources.
Troubleshooting Steps:
Suspected Reason: Version Incompatibility
I created a new SpringBoot project, copied the relevant dependencies, and index.html. Upon running the application, the page displayed successfully. This experiment confirmed that there were no problems with either the dependency versions or the HTML structure.”
<!-- Thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId
<artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
<!-- Thymeleaf(SpringSecurity) -->
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
<version>3.1.1.RELEASE</version>
</dependency>
<!-- Webpage -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.3.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency><!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APP - PTE</title>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
<link th:href="@{/assets/css/index.css}" rel="stylesheet" />
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<div class="container">
</div>
<div th:replace="~{fragments/footer :: footer}"></div>
<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
</body>
</html>