Search code examples
javaspringspring-bootspring-mvcthymeleaf

Thymeleaf doesn't see page html in templates


I am new to Spring boot application development. I use eclipse IDE, spring boot v.3.1.1, maven project.

The problem is that my .html pages are in templates (src/main/resources/templates), which need to be displayed by their link (like a localhost:8080/page), controllers were created for them. I also tried to display the page in case of an error (/error), which is located in the same folder - and it is displayed.

In addition, I will give the code of the main method, controllers, and a small code of the html pages (they are quite large ...)

.java file with void main:

@SpringBootApplication
public class ChatSbAppApplication {

    public static void main(String[] args) {
        SpringApplication.run(ChatSbAppApplication.class, args);
    }

}

Error controller (works fine):

@Controller
public class ErrorController implements org.springframework.boot.web.servlet.error.ErrorController {

    @RequestMapping("/error")
    public String handleError() {
        return "error";
    }

    @Override
    public String getErrorPath() {
        return "/error";
    }
}

Standard controllers:

@Controller
public class UserAccountController {

    private final UserAccountService userAccountService;

    @Autowired
    public UserAccountController(UserAccountService userAccountService) {
        this.userAccountService = userAccountService;
    }
    
    ///registration
    
    @GetMapping("/register")
    public String showRegistrationForm() {
        return "register";
    }

    @PostMapping("/register")
    public String registerUser(@RequestBody UserAccount userAccount) {
        userAccountService.saveUserAccount(userAccount);
        return "redirect:/login";
    }
    
    ///authorisation
    
    @GetMapping("/login")
    public String loginUser() {
        return "login";
    }

    @PostMapping("/login")
    public String processLoginForm() {
        return "redirect:/chats";
    }
}

application.properties:

spring.datasource.url=jdbc:postgresql://localhost:5432/ChatDB
spring.datasource.username=postgres
spring.datasource.password=1234
spring.datasource.driver-class-name=org.postgresql.Driver
server.error.whitelabel.enabled = false
spring.jpa.open-in-view=false

I also tried changing the config, but it didn't work either.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public ViewResolver viewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine());
        resolver.setCharacterEncoding("UTF-8");
        return resolver;
    }

    @Bean
    public TemplateEngine templateEngine() {
        SpringTemplateEngine engine = new SpringTemplateEngine();
        engine.setEnableSpringELCompiler(true);
        engine.setTemplateResolver(templateResolver());
        return engine;
    }

    @Bean
    public ITemplateResolver templateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setPrefix("classpath:/templates/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode(TemplateMode.HTML);
        resolver.setCharacterEncoding("UTF-8");
        return resolver;
    }
    
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoggingInterceptor());
    }
}

HTML example below: error.html works, but same login.html does not see. Also thymeleaf saw fine .css/.js in /static...

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Error Page</title>
  <link rel="stylesheet" type="text/css" th:href="@{index.css}">
</head>
<body>
  <div class="navbar">
    <div class="navbar-logo">
        <button onclick="changeColor()" class="color-button">
        </button>
    </div>
    <div style="display:flex; margin-right: 40px;">
      <button class="auth-button" onclick="window.location.href='login.html'">Login</button>
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

I can also show the logs, but there is nothing surprising in them - not 1 error or warning, but not 1 mention of the created mapping (I read, in my opinion there should be a message, like "mapping was created along the path [x.html]" or something like that, I didn't have such a message). The thymeleaf dependency is also in pom.xml ;)

As I described above, I tried to change the thymeleaf config, but it didn't work. Also I read some other people's problems and tried to "Project->Update Maven Project" (Alt+F5) but it didn't help too


Solution

  • Opening link using window.location will require you to set complete path.

    Try to replace

    <button class="auth-button" onclick="window.location.href='login.html'">Login</button>
    

    With

    <button class="auth-button" onclick="window.location.href='http://localhost:8080/login'">Login</button>
    

    Also note you should not include .html extension since controller takes care of this when parsing templates