web-dev-qa-db-fra.com

CSS ne se charge pas dans Spring Boot

Je suis nouveau au travail de cadre de printemps et au démarrage de printemps. J'essaie d'ajouter le fichier HTML statique avec CSS, javascript, js. la structure du fichier est

PROJECT STRUCTURE

et ma tête de fichier html ressemble à ceci 

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

quand j'exécute le projet Spring, seul le contenu est affiché et le CSS n'est pas appliqué. Ensuite, le navigateur affiche l'erreur suivante dans la console Erreur 404 Not Found pour les fichiers .css, .js  

un organisme m'aide à résoudre ce problème.Merci d'avance.

springspring-mvcspring-boot
25
senthil prabhu

Vous devez mettre votre css dans /resources/static/css. Ce changement a résolu le problème pour moi. Voici ma structure de répertoire actuelle.

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

Voici mon résolveur de modèles:

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

Et juste au cas où, voici mon 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

Placez les fichiers css dans le dossier de ressources webapp:

src/main/webapp/resources/css/

Configurer le gestionnaire de ressources

public class WebConfig extends WebMvcConfigurerAdapter {

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

Exemples de projets: 

La source:

10
MariuszS

Spring Boot tentera de rechercher vos vues dans certains emplacements par défaut. Regardez le lien suivant.

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

Si vous construisez un fichier jar exécutable, vos ressources doivent être placées sous src/main/resources, et non pas src/main/webapp, de manière à être copiées dans votre fichier jar au moment de la construction.

Votre index.html devrait aller sous src/main/resources/templates comme vous l'avez, mais pas vos ressources statiques. Spring Boot va y rechercher vos vues Thymeleaf par défaut. Et vous n'avez pas réellement besoin de définir votre propre résolveur de vues pour Thymeleaf, Spring Boot le configurera pour vous si vous avez la dépendance spring-boot-starter-thymeleaf dans votre projet.

# 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

Comme mentionné par d'autres, si vous mettez vos css dans src/main/resources/static/css ou src/main/resources/public/css, leur référence à partir de href = "css/5grid ..." dans votre code HTML devrait fonctionner .

4
Patrick Grimard

Je faisais face aux mêmes problèmes et je l'ai résolu de la manière suivante:

  1. Assurez-vous que le dossier que vous exportez est disponible sur le Web.

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

    De plus, vous devez placer votre dossier css ou styles dans votre src/main/resources / (statique | public | _ Dossierressources | META-INF/ressources)

  2. Assurez-vous que vos politiques de sécurité ne les bloquent pas

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

Cela devrait suffire

4
EliuX

Je suis nouveau à Spring Boot aussi et j'ai le même problème. J'ai mis le bon chemin manuellement dans le navigateur et j'ai vu le 404 de Tomcat. Ensuite, j’ai trouvé une solution sur: Spring-Boot ResourceLocations n’ajoutant pas le fichier css, le résultat est 404

Maintenant, le fichier css est accessible par code.

Vous devez déplacer le dossier css vers src/main/resources/static/css pour que le contenu soit lisible (selon ma configuration locale).

J'espère que cela fonctionne aussi avec votre configuration.

1
FunThomas424242

Dans le cas de Spring Boot, il convient toutefois de mentionner comment Spring Boot traite du contenu statique. Lorsque le site Web de Spring Boot autoconfiguration configure automatiquement les beans pour Spring MVC, ces beans incluent un gestionnaire de ressources qui mappe/** en plusieurs emplacements de ressources. Ces emplacements de ressources incluent (par rapport à la racine Du classpath) les éléments suivants:

  1. / META-INF/ressources / 
  2. /Ressources/ 
  3. /statique/ 
  4. /Publique/

Dans une application classique construite avec Maven/Gradle, vous devez généralement mettre contenu statique sur src/main/webapp afin qu'il soit placé sur le racine du fichier WAR produit par la construction. Lors de la construction d'un fichier WAR avec Spring Boot, cela reste une option. Mais vous avez aussi l'option de placer du contenu statique à l’un des quatre emplacements associés au fichier gestionnaire de ressources.

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