Wo können statische Dateien wie CSS in ein Spring-Boot-Projekt eingefügt werden?

69

In meinem aktuellen Spring-Boot-Projekt haben meine Ansichten folgende Zeile:

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

um auf eine statische CSS-Datei zu verweisen. Wenn ich das Projekt ausführe und auf eine der Ansichten zugreife, die auf diese Datei verweisen, wird der Fehler 404 nicht gefunden oder 403 nicht autorisiert angezeigt, je nachdem, wo ich die Datei im Projekt abgelegt habe.

Ich versuche das bisher:

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)

Was ist der richtige Ort, um diese Art von Dateien zu speichern?

spring spring-boot Kleber Mota
quelle

Antworten:

95

Überall darunter src/main/resources/staticbefindet sich ein geeigneter Ort für statische Inhalte wie CSS, JavaScript und Bilder. Das statische Verzeichnis wird von bereitgestellt /. Zum Beispiel src/main/resources/static/signin.csswird von serviert, /signin.csswährend von src/main/resources/static/css/signin.cssserviert wird /css/signin.css.

Der src/main/resources/templatesOrdner ist für Ansichtsvorlagen vorgesehen, die von einer Vorlagen-Engine wie Thymeleaf, Freemarker oder Velocity usw. in HTML umgewandelt werden. Sie sollten keinen statischen Inhalt in dieses Verzeichnis einfügen.

Stellen Sie außerdem sicher, dass Sie nicht @EnableWebMvcin Ihrer Anwendung verwendet haben, da dadurch die automatische Konfiguration von Spring MVC durch Spring Boot deaktiviert wird.

Andy Wilkinson
quelle
2
Pech für mich, keine der hier auf SO veröffentlichten Lösungen hat für mich funktioniert: /
mfaisalhyder
1
Gibt es eine Konfiguration, die vorgenommen werden muss, damit Spring Boot src / main / resources / static als Standardspeicherort verwendet? Es holt mein CSS nur ab, wenn ich es von einem CDN mit einer vollständigen URL lade.
Mojave
7
Nein, das ist der Standardspeicherort. Stellen Sie einfach sicher, dass Sie nicht @EnableWebMvcin Ihrer Anwendung verwendet haben, da dadurch die automatische Konfiguration von Spring MVC durch Spring Boot deaktiviert wird.
Andy Wilkinson
Hallo @AndyWilkinson, darf ich wissen, wie ich mit dem Fall umgehen soll, wenn ich EnableWebMvc in meiner Spring Boot App verwenden muss.
Akash Goswami
Warum müssten Sie @EnableWebMvceher als ein verwenden WebMvcConfigurerAdapter?
Andy Wilkinson
11

Abgesehen davon, dass Sie es irgendwo darunter platzieren src/main/resources/staticund nicht verwenden @EnableWebMvc, müssen Sie den Zugriff auf Ihren Ordner jsoder Ihren cssOrdner autorisieren, insbesondere wenn Sie spring-boot-securityin Ihrem Klassenpfad sind. Sie werden so etwas hinzufügen:

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

Dann in Ihrem HTML:

<link rel="stylesheet"  href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>
jpllosa
quelle
Das hat bei mir funktioniert. Aber ist das nicht unsicher für einen Sicherheits-POV?
Swapnil Ingle
@SwapnilIngle Ändern Sie Ihre antMatchers, wenn bestimmte Ressourcen sicher sein sollen.
Jpllosa
OK danke! Aber ist es üblich / bewährte Methode, Ihre JS- und / oder CSS-Ressourcen verfügbar zu machen?
Swapnil Ingle
9

Sie können Thymeleaf http://www.thymeleaf.org/ verwenden.

Beispiel

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

Denken Sie daran, xmlns und xmlns: th in Ihr HTML-Tag einzufügen.

Überprüfen Sie Ihre application.properties:

spring.resources.add-mappings=true

Wenn dieser Schlüssel auf false gesetzt ist, lädt die Spring Boot-App keine Ressourcen.

Skorpion
quelle
Das funktioniert nicht so wie es ist. du musst es in diesen Ordner legen. <Ihr Projektordner> /src/main/resources/static/css/signing.css
Philip Rego
1
Die beste Antwort
Denees
6

Durch Deaktivieren konnte @EnableWebMvcich das Problem beheben.

user2069692
quelle
4

Ich benutze Spring-Boot 2.0.2

Ich behalte weiterhin @EnableWebMvcAnmerkungen in meiner webConfig.javaund überschreibe addResourceHandlers()Methode, um dem Browser zu helfen, CSS- und Javascript-Dateien über eine http-Anfrage zu erreichen.

Dies ist die Struktur des Webanwendungsverzeichnisses

Verzeichnisaufbau.

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

index.jsp head tag:

<head>
    <title>Title</title>

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

hoffe es hilft dir

ldt
quelle
Es könnte jetzt nicht helfen. Die Frage wurde 2014 gestellt. Versuchen Sie, die letzte Frage zu beantworten. Wird Ihnen und mir beiden helfen ...
MyTwoCents
@ Ashish451 Entschuldigung, wenn es nicht der Fall ist, aber wenn die Antwort gut ist und dazu beiträgt, ist es nicht falsch, alte Fragen zu beantworten :). meta.stackexchange.com/questions/23996/…
tk3
Funktioniert nicht. versuchen Sie diesregistry.addResourceHandler("/WEB-INF/**").addResourceLocations("classpath:/WEB-INF/");
Hamza Säbel
2

Ich habe festgestellt, dass ich mit /css/signin.css darauf zugreifen kann, wenn ich meine signin.css unter src / main / resources / META-INF / resources / static / css / signin.css ablege

Ich weiß nicht warum.

rrudland
quelle
2

In meinem Fall, um Dateien in CSS- und JS-Ordnern wie folgt zu referenzieren:

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

Ich musste die Ordner in den Webapp-Ordner legen. Ich habe die folgende Ordnerstruktur:

Meine App

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

Ich meine, wenn ich die Ordner css und js im Ressourcenordner (unter main) abgelegt hätte, wäre es gewesen:

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

Wenn ich sie in einen statischen Ordner (unter Ressourcen) lege, funktioniert es nicht.

Kike Lebowski
quelle
Arbeitet das wirklich? Ich kann nicht zulassen, dass es mit Namen wie bootstrap.min.css oder bootstrap.min.js funktioniert, während es perfekt mit Namen ohne Punkte im Basisnamen wie somestyle.css oder somescript.js funktioniert. Siehe stackoverflow.com/questions/47722325/…
Marcoc1712
2

Ich benutze Spring-Boot mit Thymeleaf http://www.thymeleaf.org/

Dies ist die Verzeichnisstruktur wie @ Andy Wilkinson Response

Geben Sie hier die Bildbeschreibung ein

Beispiel

<link rel="stylesheet" href="../static/css/w3.css" th:href="@{/css/w3.css}">
Joao Ferreira
quelle
1
Entfernen Sie einfach wie in diesem Beispiel das statische Schlüsselwort in der Thymleaf-Deklaration, wenn Sie es vergessen haben. Dieses Beispiel läuft perfekt.
Vifier Lockla
0

Als ich benutzte:

src/main/resources/static/css.

Meine Ansichten haben diese Zeile:

<link rel="stylesheet" href="/css/signin.css" />
Максим Хитров
quelle
0
  • src / resource / static / css
  • src / resource / static / js
  • src / resource / static / images

Verwenden Sie @EnableWebMvc nicht, wenn Sie Spring Boot verwenden und die Federsicherheit überprüfen.

Võ Văn Tâm
quelle