2014-10-09 95 views
15

我想在jsp中包含js和css文件,但我無法這樣做。我對Spring MVC的概念很陌生。很長一段時間,我一直在研究這個話題。 我的索引頁是這樣如何使用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> 

我的春天 - 調度 - 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文件夾中。

回答

17

首先,你需要在調度員的servlet文件中聲明你的資源是這樣的:

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

與URL映射/資源的任何請求/ **會直接去找/資源/文件夾/。

現在,在JSP文件中,你需要包括你的CSS文件,像這樣:

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

同樣可以包含js文件。

希望這可以解決您的問題。

+0

您能否介紹一下使用這種方法的好處,比如等等。爲什麼Spring選擇這種方式而不是傳統的webapps文件夾下的訪問方式。提供鏈接也很受歡迎。 – 2018-01-12 14:41:24

2

你不能直接訪問WEB-INF foldere下的任何東西。當瀏覽器請求你的CSS文件時,它們不能在WEB-INF文件夾內看到。

試着把你的文件css/css文件夾下的WebContent

,並添加調度的servlet下面授予訪問權,

<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 2014-10-09 11:55:24

+0

有人可以幫我解決這個問題。 – user2409128 2014-10-09 12:01:35

+0

您可以在瀏覽器控制檯中查看被截獲的路徑 – 2014-10-09 12:32:51

18

一個Nice example here把你的style.css直接的webapp/css文件夾不是在WEB-INF

然後添加以下代碼到你的彈簧調度-servlet.xml中

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

,然後用下面的代碼到你的JSP頁面

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

我希望它會工作

0

你需要在調度員小服務程序file.below申報資源是兩個聲明

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

在您使用的只是春天,而不是Spring MVC的情況下,採取以下方法。

放置在servlet調度以下

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

正如你會發現/ CSS樣式表爲定位,並不一定要在/資源文件夾,如果你沒有對Spring MVC中所需的文件夾結構因爲是用彈簧application.Same的情況下適用於JavaScript文件,字體,如果你需要他們等

然後,您可以訪問的資源,你需要他們像這樣

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

我相信有人會發現這個有用的,因爲大多數例子是春天mvc

2

把你的css/js文件在文件夾src/main/webapp/resources。不要把它們放在WEB-INFsrc/main/resources

然後加入這一行去春來,調度員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" %> 
相關問題