web-dev-qa-db-ja.com

Spring MVCでJSPにjsとCSSを含める方法

Jspにjsファイルとcssファイルを含めたいのですが、できません。 Spring MVCの概念は初めてです。長い間、私はこの同じトピックに取り組んできました。私のインデックスページはこんな感じ

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/LoginPageScrip.js">

</script>

<style type="text/css">
body {
    background-image: url("LoginPageBackgroundImage.jpg");
}
</style>
</head>
<body >
    <h6>Please login in google Chrome</h6>
    <h1 align="center">Welcome to my Twitter Clone</h1>
    <div class="m" style="margin-left: 401px;   margin-top: 70px;">
        <form method="post" action="LoginForExistingUser" onsubmit="return Validate(this);">
        <fieldset>
                <legend align="center">Login</legend>
                    <div class="a">
                        <div class="l">User Name</div>
                        <div class="r">
                            <INPUT type="text" name="userName">
                        </div>
                    </div>

                    <div class="a">
                        <div class="l">Password</div>
                        <div class="r">
                            <INPUT type="password" name="password">
                        </div>
                    </div>
                    <div class="a">
                        <div class="r">
                            <INPUT class="button" type="submit" name="submit"
                                value="Login">
                        </div>
                    </div>
                    <i align="center" style="margin-left: 183px;">New User?  <a href="signup.html"><u>Signup</u></a></i>
            </fieldset>
    </form>
    </div>
</body> 
</html>

そして、私のspring-dispatcher-servlet.xmlはこのようなものです。

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

        <context:component-scan base-package="com.csc.student" />
        <mvc:annotation-driven/>
        <!--<bean id="HandlerMapping" class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping" />-->   
        <!-- <bean name="/welcome.html" class ="csc.csc.helloController.HelloController" /> -->
    <bean id="viewResolver" class = "org.springframework.web.servlet.view.InternalResourceViewResolver" >
        <property name="prefix">
            <value>/WEB-INF/</value>
        </property>
        <property name ="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

私のコントローラーはこんな感じです。

package com.csc.student;

    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;

    @Controller
    public class StudentInfoController {

        @RequestMapping(value = "/indexPage.html", method = RequestMethod.GET)
        public ModelAndView getAdmissionFrom() {
            ModelAndView model = new ModelAndView("indexPage");
            return model;
        }
    }

誰かがこれで私を助けることができますか？私は非常に苦労していますが、解決策はありません。 jsおよびcssファイルをWEB-INFフォルダーに保存しました。

javaspringjspspring-mvc
20
user2409128

まず、次のようにdispatcher-servletファイルでリソースを宣言する必要があります。

<mvc:resources mapping="/resources/**" location="/resources/folder/" />

URLマッピング/ resources/**を含むリクエストは、/ resources/folder /を直接検索します。

Jspファイルに、次のようにcssファイルを含める必要があります。

<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">

同様に、jsファイルを含めることができます。

これで問題が解決することを願っています。

21
Atul Sharma

style.cssフォルダーではなく、webapp/cssフォルダーにWEB-INFフォルダーを直接配置します。

次に、次のコードをspring-dispatcher-servlet.xmlに追加します

<mvc:resources mapping="/css/**" location="/css/" />

その後、次のコードをjspページに追加します

<link rel="stylesheet" type="text/css" href="css/style.css"/>

うまくいくことを願っています。

19
Saurabh Gaur

Spring mvcではなくspringのみを使用している状況では、次のアプローチを取ります。

サーブレットディスパッチャに以下を配置します

<mvc:annotation-driven />               
<mvc:resources mapping="/css/**" location="/WEB-INF/assets/css/"/>
<mvc:resources mapping="/js/**" location="/WEB-INF/assets/js/"/>

スタイルシートの場所に/ cssがあることに気付くように、springアプリケーションの場合のようにspring mvcに必要なフォルダー構造がない場合、/ resourcesフォルダーにある必要はありません。javascriptファイル、フォント、あなたはそれらなどが必要です.

その後、必要に応じてリソースにアクセスできます

<link rel="stylesheet" href="css/vendor/swiper.min.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />

ほとんどの例はSpring MVCであるため、誰かがこれを便利だと思うでしょう

4
Francis Benyah

Css/jsファイルをフォルダーsrc/main/webapp/resourcesに配置します。 WEB-INFやsrc/main/resourcesに入れないでください。

次に、この行をspring-dispatcher-servlet.xmlに追加します

<mvc:resources mapping="/resources/**" location="/resources/" />

Jspページにcss/jsファイルを含める

<link href="<c:url value="/resources/style.css" />" rel="stylesheet">

Jspでtaglibを宣言することを忘れないでください

<%@ taglib uri="http://Java.Sun.com/jsp/jstl/core" prefix="c" %>
2
pipi

WEB-INFフォルダの下にあるものには直接アクセスできません。ブラウザーがCSSファイルを要求すると、WEB-INFフォルダー内を見ることができません。

ファイルcss/cssフォルダーをWebContentの下に置いてみてください。

また、ディスパッチャサーブレットに次を追加して、アクセスを許可します。

<mvc:resources mapping="/css/**" location="/css/" />

jsファイルについても同様です。 A ここの例 これ

2
San Krish

ディスパッチャサーブレットファイルでリソースを宣言する必要があります。belowは2つの宣言です。

<mvc:annotation-driven />
<mvc:resources location="/resources/" mapping="/resources/**" />
0
rajeesh