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

このチュートリアルでは、 JavaScript CSS のような静的リソースをJSPページに組み込む方法を説明します。

要約手順:

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

webapp \ resources 。 Springの `mvc:resources`マッピングを作成します

  1. JSTLタグ c:url`またはSpringタグ spring:url`を介してJSPページにインクルードする

P.SこのプロジェクトはSpring 4.1.6.RELEASE. でテストされています。

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

標準のMavenフォルダ構造は、jsやcssファイルのような静的リソースを `webapp \ resources`フォルダに置きます。

spring-mvc-include-css-、width = 456、height = 525

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

4.デモ

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

spring-mvc-include-css-demo、width = 569、height = 345

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)