TOC

Spring MVC - So fügen Sie JS- oder CSS-Dateien in eine JSP-Seite ein

Spring MVC - Einfügen von JS- oder CSS-Dateien in eine JSP-Seite

In diesem Tutorial zeigen wir Ihnen, wie Sie statische Ressourcen wieJavaScript oderCSS in eine JSP-Seite aufnehmen.

Zusammenfassende Schritte:

  1. Legen Sie statische Ressourcen wie cs, js oder images in diesen Ordnerwebapp esources

  2. Erstellen Sie eine Zuordnung von Springmvc:resources

  3. In JSP-Seite über JSTL-Tagc:url oder Spring-Tagspring:url aufnehmen

P.S This project is tested with Spring 4.1.6.RELEASE.

1. Projektverzeichnis

Eine Standard-Maven-Ordnerstruktur legt die statischen Ressourcen wie js- und css-Dateien im Ordnerwebapp esourcesab.

spring-mvc-include-css-

2. Spring Resource Mapping

Deklariertmvc:resources, um den URL-Pfad einem physischen Dateipfad zuzuordnen.

spring-web-config.xml



    

    
    
        /WEB-INF/pages/
    
    
        .jsp

Im obigen Beispiel sucht Spring bei allen Anforderungen aus diesem URL-Muster/resources/** stattdessen nach den Ressourcen aus/resources/mytheme1/.

In Zukunft können Sie einfach zu einem neuen Thema wechseln, indem Sie diemvc:resources aktualisieren

3. In JSP-Seite aufnehmen

Um CSS oder JS in eine JSP-Seite aufzunehmen, können Sie das JSTL-Tagc:url oder das Spring-Tagspring:url verwenden.

3.1 JSTL tag c:url example.

hello.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>



    " rel="stylesheet">
    
    



1. Test CSS



2. Test JS

3.2 Spring tag spring:url example.

hello.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>



    
    
    

    
    
    



1. Test CSS



2. Test JS

3.3 Javascript file.

/webapp/resources/mytheme/js/main.js

jQuery(document).ready(function($) {

    $('#msg').html("This is updated by jQuery")

});

3.4 CSS file.

/webapp/resources/mytheme/css/main.css

h1{
    color:red;
}

Alternatively
Für diejenigen, die JSTL hassen, können Sie die Variable "Seitenkontext" verwenden, um die Ressourcen wie folgt abzurufen:

4. Demo

Führen Sie das Projekt mit dem Befehl Maven aus:$ mvn jetty:run

URL:http://localhost:8080/spring-css/

spring-mvc-include-css-demo

5. Statische Ressourcen in WEB-INF?

F: Kann ich die statischen Ressourcen in den Ordner WEB-INF legen?
A: Ja, Sie können, das Spring-Mapping funktioniert weiterhin.

Dies ist jedoch keine gute Praxis. Sie können die Regel ignorieren, aber viele Entwickler und Plugins suchen nach statischen Ressourcen in derselben Ebene vonWEB-INF, nicht inWEB-INF.

Quellcode herunterladen

Laden Sie es herunter -spring-mvc-css-example.zip (57 KB)

Referenz

  1. Spring MVC für statische Ressourcen

Related