TOC

Spring MVC - Comment inclure des fichiers JS ou CSS dans une page JSP

Spring MVC - Comment inclure des fichiers JS ou CSS dans une page JSP

Dans ce didacticiel, nous allons vous montrer comment inclure des ressources statiques telles queJavaScript ouCSS dans une page JSP.

Étapes récapitulatives:

  1. Mettez des ressources statiques comme cs, js ou images dans ce dossierwebapp esources

  2. Créer un mappage Springmvc:resources

  3. Inclure dans la page JSP via la balise JSTLc:url ou la balise Springspring:url

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

1. Répertoire des projets

Une structure de dossiers Maven standard place les ressources statiques telles que les fichiers js et css dans le dossierwebapp esources.

spring-mvc-include-css-

2. Cartographie des ressources de printemps

Déclaremvc:resources, pour mapper le «chemin d'url» à un emplacement de chemin de fichier physique.

spring-web-config.xml



    

    
    
        /WEB-INF/pages/
    
    
        .jsp

Dans l'exemple ci-dessus, toutes les requêtes provenant de ce modèle d'url/resources/**, Spring recherchera les ressources des/resources/mytheme1/ à la place.

À l'avenir, vous pouvez facilement passer à un nouveau thème en mettant à jour lesmvc:resources

3. Inclure dans la page JSP

Pour inclure CSS ou JS dans une page JSP, vous pouvez utiliser la balise JSTLc:url ou la balise Springspring:url.

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
Pour ceux qui détestent JSTL, vous pouvez utiliser la variable «contexte de page» pour obtenir les ressources comme ceci:

4. Demo

Exécutez le projet avec la commande Maven:$ mvn jetty:run

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

spring-mvc-include-css-demo

5. Ressources statiques dans WEB-INF?

Q: Puis-je mettre les ressources statiques dans le dossier WEB-INF?
R: Oui, vous pouvez, le mappage Spring fonctionnera toujours, par exemple,

Mais ce n'est pas une bonne pratique. Vous pouvez ignorer la règle, mais de nombreux développeurs et plugins rechercheront les ressources statiques au même niveau deWEB-INF, pas à l'intérieur desWEB-INF.

Télécharger le code source

Téléchargez-le -spring-mvc-css-example.zip (57 Ko)

Référence

  1. Spring MVC servant des ressources statiques

Related