spring CSS未在Sping Boot 中加载

k0pti3hp 于 2023-04-28 发布在 Spring

关注(0)|答案(8)|浏览(134)

我是新的Spring框架工作和Spring Boot 。我试图添加静态的HTML文件与CSS，JavaScript，JS。文件结构是

我的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 Not Found错误。css、.js文件
有人帮我解决了这个问题。先谢了。

spring

来源：https://stackoverflow.com/questions/21203402/css-not-loading-in-spring-boot

8条答案

按热度按时间

r8xiu3jd1#

你需要把你的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;
  }
}

为了以防万一，这是我的索引。联系我们

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

赞(0）回复(0）举报 2023-04-28

gj3fmq9x2#

将 css 文件放入 webapp resources文件夹：

src/main/webapp/resources/css/

配置资源处理程序

public class WebConfig extends WebMvcConfigurerAdapter {

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

示例项目：

来源：

赞(0）回复(0）举报 2023-04-28

mwngjboj3#

这就是我在多次尝试后所做的：

css位置：/resources/static/css/stylesheet.css
html中的链接路径：th:href="@{/css/stylesheet.css}"
WebSecurityConfig：

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("/css/**");
}

赞(0）回复(0）举报 2023-04-28

mpbci0fu4#

Sping Boot 将尝试在某些默认位置查找视图。看看下面的链接。
www.example. com
如果你正在构建一个可执行的jar，你的资源应该放在src/main/resources下，而不是src/main/webapp下，这样它们就可以在构建时复制到你的jar中。
你的index.html应该放在src/main/resources/templates下，就像你已经得到的一样，但是静态资源不应该这样。默认情况下，Sping Boot 将在那里查找您的Thymeleaf视图。你实际上不需要为Thymeleaf定义自己的视图解析器，如果你的项目中有spring-boot-starter-thymeleaf依赖项，Sping Boot 会为你设置这个。

# 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应该可以。

赞(0）回复(0）举报 2023-04-28

relj7zay5#

我也遇到了同样的问题，并通过以下方式解决了这个问题：
1.确保您要导出的文件夹可用于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);
    }
}

此外，您必须将css或styles文件夹放入 src/main/resources/（static|* 公开 | 资源 *|META-INF/resources）文件夹
1.确保您的安全策略不会阻止它们

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

应该够了

赞(0）回复(0）举报 2023-04-28

nmpmafwu6#

然而，在Sping Boot 的情况下，值得一提的是Spring Boot如何处理静态内容。当Sping Boot 的Web自动配置为Spring MVC自动配置bean时，这些bean包含一个将/**Map到多个资源位置的资源处理程序。这些资源位置包括（相对于类路径的根）以下内容：
1./META-INF/resources/
1./资源/
1./静态/
1./public/
在传统的Maven/Gradle构建的应用程序中，您通常会将静态内容放在src/main/webapp中，以便将其放置在构建生成的WAR文件的根目录中。当使用Sping Boot 构建WAR文件时，这仍然是一个选项。但是您也可以选择将静态内容放置在Map到资源处理程序的四个位置之一。

赞(0）回复(0）举报 2023-04-28

jgwigjjp7#

我也是新 Boot ，我也有同样的问题。我已经手动将正确的路径放入浏览器，并看到了Tomcat的404。然后我在这里找到了一个解决方案：Spring-Boot ResourceLocations not adding the css file resulting in 404
现在可以通过代码访问css文件了。
你必须将css文件夹移动到src/main/resources/static/css，然后内容才是可读的（在我的本地配置下）。

赞(0）回复(0）举报 2023-04-28

zyfwsgd68#

<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）回复(0）举报 2023-04-28

我来回答

spring CSS未在Sping Boot 中加载

8条答案

相关问题

热门标签

最新问答