wake-up-neo.com

CSS wird nicht in Spring Boot geladen

Ich bin neu in Frühlingsrahmenarbeit und Frühlingsboot. Ich versuche, die statische HTML-Datei mit CSS, Javascript, js hinzuzufügen. Die Dateistruktur lautet

PROJECT STRUCTURE

und mein HTML-Dateikopf sieht so aus 

<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>

wenn ich das Frühlingsprojekt starte, wird nur der Inhalt angezeigt und das CSS nicht angewendet. Wenn der Browser den folgenden Fehler in der Konsole anzeigt, __. 404 Fehler nicht gefunden für die .css, .js-Dateien  

einige Gremien helfen mir, dieses Problem zu klären. Danke im Voraus.

25
senthil prabhu

Sie müssen Ihre CSS in /resources/static/css setzen. Diese Änderung hat das Problem für mich behoben. Hier ist meine aktuelle Verzeichnisstruktur.

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

Hier ist mein Vorlagen-Resolver:

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;
  }
}

Und nur für den Fall, hier ist meine 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

Legen Sie css -Dateien im Ressourcenordner webapp ab:

src/main/webapp/resources/css/ 

Konfigurieren Sie den Ressourcenhandler

public class WebConfig extends WebMvcConfigurerAdapter {

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

Beispielprojekte: 

Quelle:

10
MariuszS

Spring Boot versucht, Ihre Ansichten an einigen Standardspeicherorten zu suchen. Schauen Sie sich den folgenden Link an.

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

Wenn Sie eine ausführbare jar erstellen, sollten Ihre Ressourcen unter src/main/resources und nicht unter src/main/webapp abgelegt werden, damit sie zur Erstellungszeit in Ihre jar kopiert werden.

Ihre index.html sollte unter src/main/resources/templates gehen, so wie Sie es haben, aber Ihre statischen Ressourcen sollten nicht. Spring Boot sucht dort standardmäßig nach Ihren Thymeleaf-Ansichten. Und Sie müssen keinen eigenen Ansichtsauflöser für Thymeleaf definieren. Spring Boot wird dies für Sie einrichten, wenn Sie die spring-boot-starter-thymeleaf-Abhängigkeit in Ihrem Projekt haben.

# 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

Wie bereits von anderen erwähnt, sollten Sie, wenn Sie Ihre css in src/main/resources/static/css oder src/main/resources/public/css ablegen, darauf verweisen, dass sie von href = "css/5grid ..." in Ihrem HTML-Code funktionieren .

4
Patrick Grimard

Ich war mit den gleichen Problemen konfrontiert und habe sie folgendermaßen gelöst:

  1. Stellen Sie sicher, dass der Ordner, den Sie exportieren, für das Web verfügbar ist

    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);
        }
    }
    

    Außerdem müssen Sie den Ordner css oder styles in Ihre src/main/resources/ (static | public | resources | META-INF/resources) Ordner

  2. Stellen Sie sicher, dass Ihre Sicherheitsrichtlinien diese nicht blockieren

    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/**");
        }
    }
    

Das sollte genug sein

4
EliuX

Ich bin auch neu im Springboot und habe das gleiche Problem. Ich habe den korrekten Pfad manuell in den Browser eingegeben und die 404 von Tomcat gesehen. Dann habe ich eine Lösung gefunden unter: Spring-Boot ResourceLocations fügt nicht die CSS-Datei hinzu, die 404 ergibt

Jetzt ist die CSS-Datei per Code zugänglich.

Sie müssen den Ordner "css" in "src/main/resources/static/css" verschieben, damit der Inhalt (in meiner lokalen Konfiguration) lesbar ist.

Ich hoffe es funktioniert auch bei deiner Konfiguration.

1
FunThomas424242

Im Fall von Spring Boot ist es jedoch erwähnenswert, wie Spring Boot befasst sich mit statischem Inhalt. Beim Webstart von Spring Boot Bei der automatischen Konfiguration werden Beans für Spring MVC, .__, automatisch konfiguriert. Diese Beans enthalten einen Ressourcen-Handler, der/** auf mehrere .__ abbildet. Ressourcenstandorte. Diese Ressourcenpositionen enthalten (relativ zur -Wurzel des Klassenpfads) die folgenden:

  1. / META-INF/Ressourcen / 
  2. /Ressourcen/ 
  3. /statisch/ 
  4. /Öffentlichkeit/

In einer herkömmlichen, von Maven/Gradle erstellten Anwendung würden Sie normalerweise Folgendes eingeben: statischer Inhalt unter src/main/webapp, damit er an der .__ platziert wird. root der WAR-Datei, die der Build erzeugt. Beim Erstellen einer WAR-Datei mit Spring Boot ist dies immer noch eine Option. Sie haben aber auch die Option Platzieren statischer Inhalte an einem der vier Orte, die dem .__ zugeordnet sind. Ressourcenhandler.

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