2014-10-09 12 views
15

के साथ जेएसपी में जेएस और सीएसएस को कैसे शामिल करें मैं अपने जेएसपी में जेएस और सीएसएस फाइलों को शामिल करना चाहता हूं, लेकिन मैं ऐसा करने में सक्षम नहीं हूं। मैं वसंत एमवीसी की अवधारणा के लिए नया हूँ। लंबे समय तक, मैं इस विषय पर काम कर रहा हूं। मेरे सूचकांक पृष्ठ इसवसंत एमवीसी

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

और मेरे वसंत-डिस्पैचर-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; 
     } 
    } 

क्या कोई इस में मेरी सहायता कर सकता है? मैं बहुत मेहनत कर रहा हूं लेकिन मुझे कोई समाधान नहीं मिल रहा है। मैंने वेब-आईएनएफ फ़ोल्डर में अपनी जेएस और सीएसएस फ़ाइल रखी है।

उत्तर

17

सबसे पहले आप इस तरह डिस्पैचर-सर्वलेट फ़ाइल में अपने संसाधनों की घोषणा करने की जरूरत है:

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

यूआरएल मानचित्रण/संसाधनों के साथ किसी भी अनुरोध/** सीधे के लिए/संसाधन/फ़ोल्डर/दिखेगा।

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

इसी तरह आप js फ़ाइलों को शामिल कर सकते हैं:

अब jsp फ़ाइल में आप इस तरह अपने सीएसएस फ़ाइल को शामिल करने की जरूरत है।

आशा है कि यह आपकी समस्या हल करे।

+0

में अवरुद्ध पथ को देख सकते हैं। क्या आप इस दृष्टिकोण का उपयोग करने के लाभ की व्याख्या कर सकते हैं जैसे आदि क्यों वसंत वेबपैस फ़ोल्डर के तहत पारंपरिक पहुंच के बजाय इस तरह से चुना गया। एक लिंक प्रदान करना भी आपका स्वागत है। –

2

आप WEB-INF फ़ोल्डर के नीचे सीधे कुछ भी एक्सेस नहीं कर सकते हैं। जब ब्राउज़र आपकी सीएसएस फ़ाइल का अनुरोध करते हैं, तो वे वेब-आईएनएफ फ़ोल्डर के अंदर नहीं देख सकते हैं।

WebContent के तहत अपनी फ़ाइलों को css/css फ़ोल्डर डालने का प्रयास करें।

और डिस्पैचर सर्वलेट में निम्नलिखित पहुंच देने के लिए जोड़ने के लिए,

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

इसी तरह अपने js फ़ाइलों के लिए। इस

+0

यह काम नहीं कर रहा है। मैंने कोशिश की है http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/ लेकिन फिर भी एक ही आउटपुट। – user2409128

+0

क्या कोई इस समस्या को हल करने में मेरी सहायता कर सकता है। – user2409128

+0

आप ब्राउज़र कंसोल –

18

पर एक Nice example here में नहीं आप style.css सीधे webapp/सीएसएस फ़ोल्डर रखो वेब-INF

फिर अपने वसंत-डिस्पैचर-servlet.xml में निम्न कोड जोड़ने

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

और उसके बाद का उपयोग अपने jsp पेज

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

मुझे आशा है कि में कोड निम्नलिखित यह काम करेंगे

0

आप डिस्पैचर servelet file.below में संसाधनों की घोषणा की जरूरत है दो घोषणाओं

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

एक स्थिति है जहाँ आप सिर्फ वसंत और नहीं MVC वसंत का उपयोग कर रहे, निम्नलिखित दृष्टिकोण ले रहा है।

प्लेस सर्वलेट डिस्पैचर में निम्नलिखित

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

आप देखेंगे के रूप में/स्टाइलशीट स्थान के लिए सीएसएस, होने की जरूरत नहीं है इन/संसाधन फ़ोल्डर आप फ़ोल्डर संरचना वसंत MVC के लिए आवश्यक नहीं है, तो के रूप में है एक वसंत application.Same के मामले में, जावास्क्रिप्ट फ़ाइलों पर लागू होता फोंट आप उन्हें आदि की जरूरत है

फिर आप संसाधनों के रूप में आप उन्हें इतना

<link rel="stylesheet" href="css/vendor/swiper.min.css" type="text/css" /> 
<link rel="stylesheet" href="css/styles.css" type="text/css" /> 
की तरह उपयोग कर सकते हैं की जरूरत है

मुझे यकीन है कि किसी को यह उपयोगी लगेगा क्योंकि अधिकांश उदाहरण वसंत एमवीसी

2

अपने सीएसएस/जेएस फ़ाइलों को फ़ोल्डर src/main/webapp/resources में रखें। उन्हें WEB-INF या src/main/resources में न रखें।

फिर डिस्पैचर-servlet.xml वसंत-

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

JSP पृष्ठों

में सीएसएस/जे एस फ़ाइलें शामिल
<link href="<c:url value="/resources/style.css" />" rel="stylesheet"> 

मत भूलना अपने jsp में taglib घोषित करने के लिए में यह पंक्ति जोड़

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
संबंधित मुद्दे