このチュートリアルでは、
JavaScript
や
CSS
のような静的リソースをJSPページに組み込む方法を説明します。
要約手順:
-
cs、js、または画像などの静的リソースをこのフォルダに入れる
webapp \ resources
。 Springの `mvc:resources`マッピングを作成します
-
JSTLタグ
c:url`またはSpringタグ
spring:url`を介してJSPページにインクルードする
P.SこのプロジェクトはSpring 4.1.6.RELEASE.
でテストされています。
1.プロジェクトディレクトリ
標準のMavenフォルダ構造は、jsやcssファイルのような静的リソースを `webapp \ resources`フォルダに置きます。
2. Springリソースマッピング
`mvc:resources`を宣言して、” url path “を物理的なファイルパスの場所にマップします。
spring-web-config.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.mkyong.web"/>
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/pages/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<mvc:resources mapping="/resources/** ** " location="/resources/theme1/"
cache-period="31556926"/>
<mvc:annotation-driven/>
</beans>
上記の例では、このURLパターン `/resources/
`からのリクエストは、Springは `/resources/mytheme1/`からリソースを探します。
将来、 `mvc:resources`を更新することで簡単に新しいテーマに変更することができます。
<mvc:resources mapping="/resources/** ** " location="/resources/theme-new/"/>
3. JSPページにインクルードする
JSPページにCSSまたはJSを含めるには、JSTLタグ
c:url`またはSpringタグ
spring:url`を使用できます。
3.1 JSTLタグ `c:url`の例です。
hello.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="<c:url value="/resources/css/main.css"/>" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery.1.10.2.min.js"/>"></script>
<script src="<c:url value="/resources/js/main.js"/>"></script>
</head>
<body>
<h1>1. Test CSS</h1>
<h2>2. Test JS</h2>
<div id="msg"></div>
</body>
</html>
3.2 Springタグ `spring:url`の例です。
hello.jsp
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<spring:url value="/resources/css/main.css" var="mainCss"/>
<spring:url value="/resources/js/jquery.1.10.2.min.js" var="jqueryJs"/>
<spring:url value="/resources/js/main.js" var="mainJs"/>
<link href="${mainCss}" rel="stylesheet"/>
<script src="${jqueryJs}"></script>
<script src="${mainJs}"></script>
</head>
<body>
<h1>1. Test CSS</h1>
<h2>2. Test JS</h2>
<div id="msg"></div>
</body>
</html>
3.3 Javascriptファイル。
/webapp/resources/mytheme/js/main.js
jQuery(document).ready(function($) {
$('#msg').html("This is updated by jQuery")
});
3.4 CSSファイル。
/webapp/resources/mytheme/css/main.css
h1{
color:red;
}
<link href="${pageContext.request.contextPath}/resources/css/main.css" rel="stylesheet" >
5. WEB-INFの静的リソース？
Q:静的リソースをWEB-INFフォルダに入れることはできますか？ A:はい、できますが、Springマッピングは引き続き機能します。たとえば、
<mvc:resources mapping="/resources/** ** " location="/WEB-INF/resources/theme1/"/>
しかし、これは良い習慣ではありません。ルールを無視することはできますが、多くの開発者やプラグインは
WEB-INF`ではなく、
WEB-INF`と同じレベルの静的リソースを探します。
ソースコードをダウンロードする
ダウンロードする –
spring-mvc-css-example.zip
（57 KB）
リファレンス
静的リソースを提供するMVC]
