Блог

Главная - Вопросы по программированию - Сайт Thymeleaf не считывает содержимое файла css

Сайт Thymeleaf не считывает содержимое файла css

html #css #spring #tomcat #thymeleaf

#HTML #css #весна #tomcat #thymeleaf

Вопрос:

Я пытаюсь написать свой веб-сайт с spring framework в back- и thymeleaf во внешнем интерфейсе на локальном сервере tomcat. Я пытаюсь добавить css в свой html-файл. Кажется, что файл Css связан на сервере, но devtools показывает, что он пуст. Знаете, что я мог пропустить?

EDIST: извините за публикацию фотографий, в следующий раз я буду знать лучше. Я оставил минимум, который хотел показать.

index.css

 h1{
color: red;
}

index.html

 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleag.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="../css/index.css" th:href="@{../css/index.css}"/>
</head>
<body>
    <h1>Hello</h1>
    <a href="greeting">Greeting</a>
    <a href="registration">Registration</a>
</body>
</html>

HomePageController.java

 package com.krs.GreatBookOfDiet.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@Controller
public class HomePageController {

    @GetMapping("")
    public String index(Map<String, Object> model){
        return "index";
    }

}

GreatBookOfDietConfiguration.java

 package com.krs.GreatBookOfDiet;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.web.WebProperties;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring5.view.ThymeleafViewResolver;

import java.util.Locale;

@Configuration
public class GreatBookOfDietConfiguration implements WebMvcConfigurer {

    @Autowired
    private ApplicationContext applicationContext;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/files/**").addResourceLocations("/WEB-INF/pdf/");
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(localeChangeInterceptor());
    }

    @Bean
    public LocaleResolver localeResolver(){
        SessionLocaleResolver slr = new SessionLocaleResolver();
        slr.setDefaultLocale(Locale.US);
        return slr;
    }

    @Bean
    public LocaleChangeInterceptor localeChangeInterceptor(){
        LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
        lci.setParamName("lang");
        return lci;
    }

    @Bean
    public ViewResolver thymeleafResolver(){
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        viewResolver.setOrder(0);
        return viewResolver;
    }

    @Bean
    public SpringResourceTemplateResolver templateResolver(){
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        return templateResolver;
    }

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

}

структура файла

devtools на сервере, просмотр index.css

Комментарии:

1. прежде всего, попробуйте поставить правильную ссылку на thymeleaf: xmlns:th =» thymeleaf.org »

2. Хорошо, извините за это, я не часто использую stack :/. Я попытался использовать ссылку в html-документе. Ничего не произошло. Тем не менее, я получаю файл на сервере, но он пуст. : c Если вам нужно что-то еще, я могу поделиться проектом.

3. Вам нужно добавить к вашему вопросу свою конфигурацию Spring MVC ( @Configuration класс или XML-файл). По умолчанию Spring DispatcherServlet не обслуживает никаких статических ресурсов (см. documentation ), а сервлет Tomcat по умолчанию не обслуживает содержимое /WEB-INF .

Ответ №1:

Ваши статические ресурсы в /WEB-INF/css папке не обслуживаются Spring, поэтому запрос на http://example.com/app/css/index.css возвращает ошибку 404.

Вам необходимо изменить свой addResourceHandlers метод:

    @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/files/**")
              .addResourceLocations("/WEB-INF/pdf/");
      registry.addResourceHandler("/css/**")
              .addResourceLocations("/WEB-INF/css/");
   }

Примечание: учитывая популярность Spring Boot, вы можете рассмотреть возможность использования тех же местоположений для статических ресурсов (см. Документацию), что приводит к следующей конфигурации:

    @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/**")
              .addResourceLocations("classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/", "/");
   }

Комментарии:

1. Хм, я попытался настроить свой обработчик ресурсов на то, что вы сказали, и он все еще не работает (ошибка 404 при попытке доступа к файлу). Я считаю, что это может быть одной из причин, но все равно не работает. Я не понимаю вторую часть ответа об одних и тех же местах, вы имеете в виду, должен ли я помещать все, например, файлы .pdf и .css, в один каталог?

Метки: