TOC

Spring MVC - JSまたはCSSファイルをJSPページに含める方法

Spring MVC – JSPページにJSまたはCSSファイルを含める方法

このチュートリアルでは、JavaScriptやCSSなどの静的リソースをJSPページに含める方法を示します。

要約手順：

  1. cs、js、画像などの静的リソースをこのフォルダーに入れますwebapp esources

  2. Springmvc:resourcesマッピングを作成する

  3. JSTLタグc:urlまたはSpringタグspring:urlを介してJSPページに含める

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

1. プロジェクトディレクトリ

標準のMavenフォルダー構造では、jsファイルやcssファイルなどの静的リソースをwebapp esourcesフォルダーに配置します。

spring-mvc-include-css-

2. Springリソースマッピング

「urlパス」を物理ファイルパスの場所にマップするために、mvc:resourcesを宣言します。

spring-web-config.xml



    

    
    
        /WEB-INF/pages/
    
    
        .jsp

上記の例では、このURLパターン/resources/**からのリクエストはすべて、Springは代わりに/resources/mytheme1/からリソースを検索します。

将来的には、mvc:resourcesを更新することで、新しいテーマに簡単に変更できます。

3. JSPページに含める

CSSまたはJSをJSPページに含めるには、JSTLタグc:urlまたはSpringタグspring: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
JSTLが嫌いな人は、「ページコンテキスト」変数を使用して次のようなリソースを取得できます。

4. Demo

Mavenコマンドでプロジェクトを実行します：$ mvn jetty:run

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

spring-mvc-include-css-demo

5. WEB-INFの静的リソース？

Q：静的リソースをWEB-INFフォルダーに配置できますか？
A：はい、できます。Springマッピングは引き続き機能します。たとえば、

しかし、これは良い習慣ではありません。 ルールは無視できますが、多くの開発者やプラグインは、WEB-INF内ではなく、同じレベルのWEB-INF内で静的リソースを探します。

ソースコードをダウンロード

ダウンロード–spring-mvc-css-example.zip（57 KB）

参照

  1. 静的リソースを提供するSpringMVC

Related