2014-10-09 17 views
15

Chcę dołączyć pliki js i css do mojego jsp, ale nie jestem w stanie tego zrobić. Jestem nowy w koncepcji Spring MVC. Przez długi czas pracowałem nad tym samym tematem. Moja strona jest jak wskaźnik tenJak dołączyć js i CSS do JSP ze sprężyną 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> 

I moim wiosna-dyspozytora-servlet.xml jest w takim stanie.

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

Mój kontroler jest taki.

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; 
     } 
    } 

Czy ktoś może mi w tym pomóc? Ciężko walczę, ale nie mam żadnego rozwiązania. Zachowałem mój plik js i css w folderze WEB-INF.

Odpowiedz

17

Najpierw trzeba zadeklarować swoje zasoby w pliku dyspozytor-servlet tak:

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

Każdy wniosek z mapowaniem URL/zasobów/** będzie bezpośrednio szukać/resources/folderu /.

Teraz w pliku jsp trzeba podać swój plik css tak:

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

Podobnie można dołączyć pliki js.

Mam nadzieję, że to rozwiąże problem.

+0

Czy mógłbyś wyjaśnić korzyści płynące z zastosowania tego podejścia, takie jak itd. Dlaczego Spring wybrał tę metodę zamiast tradycyjnego dostępu w folderze webapps. Zapewnienie połączenia również mile widziane. –

2

Nie można uzyskać bezpośredniego dostępu do niczego pod folderem WEB-INF. Gdy przeglądarki zażądają pliku CSS, nie będą widoczne w folderze WEB-INF.

Spróbuj umieścić pliki w folderze css/css pod numerem WebContent.

i dodaj następujący w dyspozytora serwletu udzielenia dostępu,

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

podobnie do plików js. Nice example here na tej

+0

To nie działa. Próbowałem http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-cs-css-files-in-a-jsp-page/ także, ale wciąż ten sam wynik. – user2409128

+0

Czy ktoś może mi pomóc rozwiązać ten problem. – user2409128

+0

Możesz sprawdzić ścieżkę przechwyconą w konsoli przeglądarki –

18

można umieścić bezpośrednio webapp style.css folderu/CSS nie w WEB-INF

następnie dodaj następujący kod do wiosny dyspozytora-servlet.xml

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

a następnie użyć następujący kod na stronie jSP

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

mam nadzieję będzie pracować

0

trzeba deklarować zasobów dyspozytora servelet file.below to dwie deklaracje

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

W sytuacji, gdy używasz tylko wiosna i nie MVC wiosny, należy stosować następujące podejście.

miejsce następujące w serwletu dyspozytora

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

Jak można zauważyć/css na miejscu arkusza stylów, nie musi być w/zasobów folderu, jeśli nie mają struktury folderów wymagane do wiosny MVC jak to ma miejsce w przypadku application.Same wiosennej dotyczy plików javaScript, czcionki, jeśli chcesz je itd

następnie można uzyskać dostęp do zasobów, jak trzeba je jak tak

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

Jestem pewien, że ktoś może się przydać, ponieważ większość przykładów jest z wiosny mvc

2

Umieść swoje pliki css/js w folderze src/main/webapp/resources. Nie umieszczaj ich w WEB-INF ani src/main/resources.

Następnie dodać tę linię do wiosny-dyspozytor-servlet.xml

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

Dołącz css/js pliki JSP stron

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

Nie zapomnij zadeklarować TagLib w JSP

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>