在弹簧启动项目中将 CSS 等静态文件放在哪里?

在我目前的弹簧启动项目中,我的观点是这样的:

<link href="signin.css" rel="stylesheet"/>

引用静态 css 文件。当我运行该项目,并访问引用该文件的视图之一时,我会得到一个404未找到错误或403未经授权的错误,这取决于我将该文件放在项目中的哪个位置。

到目前为止,我试着这样做:

src/main/resources/static/css (with this, I use css/signin.css instead of signin.css)


src/main/resources/templates/static/css (with this, I use css/signin.css instead of signin.css)


src/src/main/resources/templates/acesso (same folder of the html file)

存储这类文件的正确位置是什么?

112582 次浏览

src/main/resources/static之下的任何地方都适合放置静态内容,如 CSS、 JavaScript 和图像。静态目录由 /提供。例如,src/main/resources/static/signin.css将从 /signin.css服务,而 src/main/resources/static/css/signin.css将从 /css/signin.css服务。

src/main/resources/templates文件夹用于视图模板,这些模板将通过模板引擎(如 Thymeleaf、 Freemarker 或 Velocity 等)转换为 HTML。您不应该在此目录中放置静态内容。

还要确保您没有在应用程序中使用 @EnableWebMvc,因为它将禁用 Spring Boot 的 Spring MVC 自动配置。

我发现,如果我将 signin.css 放在 src/main/resources/META-INF/resources/static/css/signin.css 下,那么就可以使用/css/signin.css 访问它

不知道为什么。

在我的例子中,引用 css 和 js 文件夹中的文件如下:

<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">

我必须把文件夹放在 webapp 文件夹中。 我的文件夹结构如下:

Myapp

-src
-main
-java
-resources
-static
-templates
-webapp
-resources
-WEB-INF

我的意思是,如果我把 css 和 js 文件夹放在 resources 文件夹(在 main 下面) ,它会是:

<link href="../resources/css/carousel.css" rel="stylesheet">
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<script src="../resources/js/bootstrap.min.js"></script>

如果我把他们在静态文件夹(资源)它不工作。

禁用 @EnableWebMvc帮助我解决了问题。

可以使用 Thymeleaf http://www.thymeleaf.org/

例子

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="@{/css/signin.css}"/>
</head>
<body>
</body>
</html>

记住在 html 标记中添加 xmlns 和 xmlns: th。

查看您的应用程序。属性:

spring.resources.add-mappings=true

如果该键被设置为 false,那么 Spring 启动应用程序将不会加载任何资源。

除了将其放置在 src/main/resources/static下面的任何位置并且不使用 @EnableWebMvc之外,您还需要授权访问 jscss文件夹,特别是如果您的类路径中有 spring-boot-security的话。你可以加上这样的内容:

@Configuration
@EnableWebSecurity
public class MainSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/home", "/js/**", "/css/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.permitAll();
}
}

然后在你的 HTML 中:

<link rel="stylesheet"  href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>

我使用 Spring-Boot2.0.2

我仍然保留 @EnableWebMvc注释在我的 webConfig.java和覆盖 addResourceHandlers()方法,以帮助浏览器达到 css 和 javascript 文件通过 http 请求。

这是 webapp 目录的结构

directory structure.

Java

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "example.com")
public class WebConfig implements WebMvcConfigurer {


// =======================================
// =             Bean Config             =
// =======================================


@Bean
public InternalResourceViewResolver getInternalResourceViewResolver(){
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/WEB-INF/jsp/");
resolver.setSuffix(".jsp");


return resolver;
}




// =======================================
// =          Override Methods           =
// =======================================


@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfs/**")
.addResourceLocations("/WEB-INF/pdfs/");


registry.addResourceHandler("/css/**")
.addResourceLocations("/WEB-INF/css/");


registry.addResourceHandler("/js/**")
.addResourceLocations("/WEB-INF/js/");
}
}

Jsp head 标签:

<head>
<title>Title</title>


<!-- Custom styles for this template -->
<link href="css/cover.css" rel="stylesheet">
</head>

希望能帮到你。

当我使用:

src/main/resources/static/css.

我的观点是这样的:

<link rel="stylesheet" href="/css/signin.css" />

我使用 Spring-Boot 和 Thymeleaf abc 0

这是目录的结构,如@Andy Wilkinson Response

enter image description here

例子

<link rel="stylesheet" href="../static/css/w3.css" th:href="@{/css/w3.css}">
  • Src/resource/static/css
  • Src/resource/static/js
  • Src/resource/static/images

不要使用 @EnableWebMvc,如果你使用弹簧启动和检查弹簧安全。

在弹簧启动时将所需的文件放入静态文件夹中。然后您可以直接访问 jsp 中所需的文件。

希望对我有帮助。