it-swarm.dev

CSS nie ładuje się w Spring Boot

Jestem nowy w pracy z wiosennymi ramkami i wiosennym bootem. Próbuję dodać statyczny plik HTML z CSS, javascript, js. struktura plików jest

PROJECT STRUCTURE

a moja głowa pliku HTML wygląda tak 

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>HeavyIndustry by HTML5Templates.com</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link rel="stylesheet" type="text/css" media="all" href="css/5grid/core.css" th:href="@{css/5grid/core}" />
    <link rel="stylesheet" type="text/css" href="css/5grid/core-desktop.css" />
    <link rel="stylesheet" type="text/css" href="css/5grid/core-1200px.css" />
    <link rel="stylesheet" type="text/css" href="css/5grid/core-noscript.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/style-desktop.css" />

    <script src="css/5grid/jquery.js" type="text/javascript"></script>
    <script src="css/5grid/init.js?use=mobile,desktop,1000px&amp;mobileUI=1&amp;mobileUI.theme=none" type="text/javascript"></script>
    <!--[if IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]-->
</head>

kiedy uruchamiam projekt wiosenny, wyświetlana jest tylko zawartość, a CSS nie jest stosowany. Następnie przeglądarka wyświetla następujący błąd w konsoli Błąd 404 Not Found dla plików .css, .js  

jakieś ciało pomoże mi rozwiązać ten problem. Dzięki z góry.

25
senthil prabhu

Musisz umieścić swoje css w /resources/static/css. Ta zmiana rozwiązała problem. Oto moja obecna struktura katalogów.

src
  main
    Java
      controller
        WebAppMain.Java
    resources
      views
        index.html
      static
        css
          index.css
          bootstrap.min.css

Oto mój przelicznik szablonów:

public class WebAppMain {

  public static void main(String[] args) {
    SpringApplication app = new SpringApplication(WebAppMain.class);
    System.out.print("Starting app with System Args: [" );
    for (String s : args) {
      System.out.print(s + " ");
    }
    System.out.println("]");
    app.run(args);
  }


  @Bean
  public ViewResolver viewResolver() {
    ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
    templateResolver.setTemplateMode("XHTML");
    templateResolver.setPrefix("views/");
    templateResolver.setSuffix(".html");

    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(engine);
    return viewResolver;
  }
}

I na wszelki wypadek, oto mój index.html:

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Subscribe</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap -->
    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="css/index.css" rel="stylesheet" />
</head>
<body>
<h1> Hello</h1>
<p> Hello World!</p>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
32
Nick Humrich

Umieść pliki css w folderze zasobów webapp:

src/main/webapp/resources/css/ 

Skonfiguruj obsługę zasobów

public class WebConfig extends WebMvcConfigurerAdapter {

        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
                registry.addResourceHandler("/resources/**")
                        .addResourceLocations("/resources/");
        }

Przykładowe projekty: 

Źródło:

10
MariuszS

Spring Boot spróbuje sprawdzić niektóre domyślne lokalizacje. Spójrz na poniższy link.

http://docs.spring.io/spring-boot/docs/1.1.4.RELEASE/reference/htmlsingle/#common-application-properties

Jeśli budujesz wykonywalny jar, twoje zasoby powinny być umieszczone w src/main/resources, a nie src/main/webapp, aby były kopiowane do słoika w czasie kompilacji.

Twój plik index.html powinien znajdować się w src/main/resources/templates, tak jak go masz, ale twoje statyczne zasoby nie powinny. Spring Boot domyślnie szuka tam widoków Thymeleaf. I właściwie nie musisz definiować własnego resolvera dla Thymeleaf, Spring Boot ustawi to dla ciebie, jeśli masz w projekcie zależność spring-boot-starter-thymeleaf.

# THYMELEAF (ThymeleafAutoConfiguration)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html # ;charset=<encoding> is added
spring.thymeleaf.cache=true # set to false for hot refresh

Jak wspominali inni, jeśli umieścisz css w src/main/resources/static/css lub src/main/resources/public/css, to odwołanie do nich z href = "css/5grid ..." w kodzie HTML powinno działać .

4
Patrick Grimard

Stawiałem czoła tym samym problemom i rozwiązałem je w następujący sposób:

  1. Upewnij się, że eksportowany folder jest dostępny w Internecie

    public class WebMvcConfig extends WebMvcConfigurerAdapter {
    
        private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
                "classpath:/META-INF/resources/", "classpath:/resources/",
                "classpath:/static/", "classpath:/public/"
        };
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/**")
                    .addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
        }
    }
    

    Dodatkowo musisz umieścić folder css lub styles w swoich src/main/resources/ (static | public | resources | META-INF/resources)

  2. Upewnij się, że zasady bezpieczeństwa nie blokują ich

    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    
        @Override
        public void configure(WebSecurity web) throws Exception {
            //Web resources
            web.ignoring().antMatchers("/css/**");
            web.ignoring().antMatchers("/scripts/**");
            web.ignoring().antMatchers("/images/**");
        }
    }
    

To powinno wystarczyć

4
EliuX

Jestem też nowy w wiosennych butach i mam ten sam problem. Umieściłem poprawną ścieżkę ręcznie w przeglądarce i widziałem 404 od Tomcat. Następnie znalazłem rozwiązanie w: Spring-Boot ResourceLocations nie dodając pliku css powodującego 404

Teraz plik css jest dostępny za pomocą kodu.

Musisz przenieść folder css do src/main/resources/static/css, aby zawartość była czytelna (w mojej lokalnej konfiguracji).

Mam nadzieję, że działa również w twojej konfiguracji.

1
FunThomas424242

W przypadku Spring Boot warto jednak wspomnieć, jak Wiosna Boot zajmuje się treścią statyczną. Kiedy sieć Spring Boot autokonfiguracja automatycznie konfiguruje bean na Spring MVC, te fasole zawierają obsługę zasobów, która mapuje/** na kilka lokalizacje zasobów. Te lokalizacje zasobów obejmują (w stosunku do Root ścieżki klasy) następujące:

  1. / META-INF/resources / 
  2. /zasoby/ 
  3. /statyczny/ 
  4. /publiczny/

W tradycyjnej aplikacji Maven/Gradle zazwyczaj umieszczasz statyczna zawartość w src/main/webapp, aby była umieszczona w root pliku WAR, który tworzy kompilacja. Podczas budowania pliku WAR z Spring Boot, to wciąż opcja. Ale masz także opcję umieszczania zawartości statycznej w jednej z czterech lokalizacji odwzorowanych na obsługa zasobów.

1
rajeev pani..

 <link href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="<%=request.getContextPath()%>/resources/css/common.css" rel="stylesheet" media="screen">
[this is the image for my project structure. i added the webapp directory to support .jsp files.this method request.getContextPath() worked for me. Hope i help someone with this... it gets the path so long as it exists. 
Nb. You should have a resolver bean in your webconfig
`enter code here`@Bean
public InternalResourceViewResolver viewResolver() {
    InternalResourceViewResolver resolver = new   `enter code here`InternalResourceViewResolver();
    resolver.setPrefix("/WEB-INF/jsp/");
    resolver.setSuffix(".jsp");
    return resolver;
}` 
for the added directory][1]

0
Fred Kibuchi