CSS не загружается в Spring Загрузка

Я новичок в работе фрейма spring и spring boot.Я пытаюсь добавить статический html файл с помощью CSS, javascript, js. файловая структура

PROJECT STRUCTURE

и мой заголовок файла html выглядит следующим образом

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

когда я запускаю проект spring, отображается только контент, а CSS не применяется. Затем браузер показывает следующую ошибку в консоли     404 Не найдена ошибка для файлов .css,.js

какой-то орган помогает мне разобраться в этой проблеме. Спасибо в Advance.

Ответы

Ответ 1

Вам нужно поставить свой css в /resources/static/css. Это изменение изменило проблему для меня. Вот моя текущая структура каталогов.

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

Вот мой шаблонный резольвер:

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

И на всякий случай, вот мой 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 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>

Ответ 2

Поместите файлы css в папку ресурсов webapp:

src/main/webapp/resources/css/

Настроить обработчик ресурсов

public class WebConfig extends WebMvcConfigurerAdapter {

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

Примеры проектов:

Источник:

Ответ 3

Spring Загрузка будет пытаться просмотреть некоторые местоположения по умолчанию для ваших просмотров. Посмотрите на следующую ссылку.

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

Если вы создаете исполняемую банку, ваши ресурсы должны быть помещены в src/main/resources, а не src/main/webapp, чтобы они были скопированы в вашу банку во время сборки.

Ваш index.html должен находиться под шаблонами src/main/resources/templates, как вы его получили, но ваши статические ресурсы не должны. Spring Boot будет искать ваши Thymeleaf представления по умолчанию. И на самом деле вам не нужно определять свой собственный разрешающий механизм для Thymeleaf, Spring Boot установит это для вас, если у вас есть зависимость 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

Как упоминалось другими, если вы поместите свой css в src/main/resources/static/css или src/main/resources/public/css, то ссылайтесь на них с href= "css/5grid..." в своем HTML должен работать.

Ответ 4

У меня были одни и те же проблемы, и основные меры для его решения были.

  • Убедитесь, что папка, в которой вы экспортируете ее, доступна в Интернете

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

    Поэтому вы должны поместить свою папку css или стилей в папку src/main/resources/(static | public | resources | META-INF/resources)

  • Убедитесь, что ваши политики безопасности не блокируют их

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

Этого может быть достаточно

Ответ 5

Я новичок в загрузке spring, и у меня такая же проблема. Я поместил правильный путь вручную в браузер и увидел 404 от tomcat. Затем я нашел решение по адресу: Spring -Boot ResourceLocations, не добавляющий файл css, приводящий к 404

Теперь файл css доступен по коду.

Вы должны переместить папку css в src/main/resources/static/css, тогда содержимое будет доступно для чтения (в моей локальной конфигурации).

Я надеюсь, что он тоже будет работать в вашей конфигурации.

Ответ 6

В случае Spring Boot, однако, стоит упомянуть, как SpringЗагрузка относится к статическому контенту. Когда Spring Boots web autoconfiguration автоматически настраивает beans для Spring MVC, эти beans включают обработчик ресурсов, который отображает /** на несколько местоположения ресурсов. Эти местоположения ресурсов включают (относительно root из пути к классам):

  • /META-INF/resources/
  • /resources/
  • /static/
  • /государственный/

В обычном приложении Maven/ Gradle, которое обычно ставится статического содержимого в src/main/webapp, чтобы он был помещен в root из файла WAR, который создает сборка. При создании файла WAR с Spring Boot, это еще один вариант. Но у вас также есть возможность размещения статического содержимого в одном из четырех местоположений, отображаемых на обработчик ресурсов.