爲什麼CSS資源在spring jsp頁面中不起作用？

這是我的jsp頁面。爲什麼CSS資源在spring jsp頁面中不起作用？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <!--here the title Go--> 
    <title></title> 
    <%-- <link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.min.css" />" > 
    <link rel="stylesheet" href="<c:url value="/resources/css/style.css" />" > 
     --%> 

    <link rel="stylesheet" href="/resources/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/resources/css/style.css"> 

    </head> 
    <body> 

    <div class="container main"> 
     <form class="form-horizontal"> 
     <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control" id="" placeholder="Name"> 
     </div> 
     </div> 
     <div class="col-sm-6 ownPic"> 
      <img src="no-profile-female.jpg" alt=""> 
      <input type="file"> 
     </div> 
     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Father's Name</label> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control" id="" placeholder="Father Name"> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Mother's Name</label> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control" id="" placeholder="Father Name"> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">National ID</label> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control" id="" placeholder="National ID"> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Age</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control" id="" placeholder="22"> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Blood Group</label> 
     <div class="col-sm-3"> 
      <select class="form-control"> 
      <option value="">Select your Blood Type</option> 
      <option value="">A +</option> 
      <option value="">A -</option> 
      <option value="">B +</option> 
      <option value="">B -</option> 
      <option value="">O +</option> 
      <option value="">O -</option> 
      <option value="">AB +</option> 
      <option value="">AB -</option> 
      </select> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Gender</label> 
     <div class="col-sm-3"> 
      <select class="form-control" placeholder="Select your Blood Type"> 
      <option value="">Select your Gender</option> 
      <option value="">Male</option> 
      <option value="">Female</option> 

      </select> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Address (Current)</label> 
     <div class="col-sm-6"> 
      <textarea class="form-control" name="name" rows="4" cols="80"></textarea> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Address (Permarent)</label> 
     <div class="col-sm-6"> 
      <textarea class="form-control" name="name" rows="4" cols="80"></textarea> 
     </div> 
     </div> 

     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">PGT/PHD</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">University</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Result</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 


     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Master's Degree</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">University</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Result</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 

     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Bacholor's Degree</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">University</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Result</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 

     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">HSC</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">College Name</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Result</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 


     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">SSC</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">School Name</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Passing Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Result</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 


     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Joining Date</label> 
     <div class="col-sm-2"> 
      <input type="date" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Department</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Location</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 


     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label">Employment Experience</label> 
     <div class="col-sm-4"> 
      <input type="checkbox">Yes 
      <input type="checkbox">No 
     </div> 
     </div> 


     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Company Name</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">From</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">To</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 


     </div> 

     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Company Name</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">From</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">To</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 


     </div> 

     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Company Name</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">From</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">To</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-1 control-label">Year</label> 
     <div class="col-sm-1"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label">Training</label> 
     <div class="col-sm-4"> 
      <input type="checkbox">Yes 
      <input type="checkbox">No 
     </div> 
     </div> 


     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Organization</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Topic</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Duration</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 

     <div class="form-group text-center"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Organization</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Topic</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 

     <label for="inputPassword3" class="col-sm-2 control-label">Duration</label> 
     <div class="col-sm-2"> 
      <input type="text" class="form-control"> 
     </div> 
     </div> 

     <div class="col-md-12 text-center"> 
     <button class="btn btn-success btn-lg" type="button" name="button">Save</button> 
     <button class="btn btn-reset btn-lg" type="button" name="button">Reset</button> 
     </div> 

</form> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

我在資源文件夾中添加CSS。它應該看起來像：This the require form但它看起來像：This is my jsp page。

我的調度員的servlet：

<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:context="http://www.springframework.org/schema/context" 
xmlns:mvc="http://www.springframework.org/schema/mvc" 
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-3.0.xsd 
     http://www.springframework.org/schema/context 
     http://www.springframework.org/schema/context/spring-context-3.0.xsd 
     http://www.springframework.org/schema/mvc 
     http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"> 

<context:component-scan base-package="EmployeeRegistrationForm.controller" /> 
    <mvc:resources mapping="/resources/" location="/resources/css/" 
    cache-period="31556926"/> 
<mvc:annotation-driven /> 


</beans>

那我該怎麼解決這個問題？

我的web.xml是：

<?xml version="1.0" encoding="UTF-8"?> 
<web-app id="WebApp_ID" version="2.4" 
xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
<display-name>SpringExamples</display-name> 
<welcome-file-list> 
    <welcome-file>index.jsp</welcome-file> 
</welcome-file-list> 

<servlet> 
    <servlet-name>dispatcher</servlet-name> 
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
    <load-on-startup>1</load-on-startup> 
</servlet> 
<servlet-mapping> 
    <servlet-name>dispatcher</servlet-name> 
    <url-pattern>/</url-pattern> 
</servlet-mapping> 

</web-app>

我的pom.xml的是：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 
<modelVersion>4.0.0</modelVersion> 
<groupId>SpringExamples</groupId> 
<artifactId>SpringExamples</artifactId> 
<packaging>war</packaging> 
<version>1.0</version> 
<name>SpringExamples</name> 
<description></description> 
<build> 
    <plugins> 
    <plugin> 
    <artifactId>maven-compiler-plugin</artifactId> 
    <configuration> 
    <source>1.5</source> 
    <target>1.5</target> 
    </configuration> 
    </plugin> 
    <plugin> 
    <artifactId>maven-war-plugin</artifactId> 
    <version>3.0.0</version> 
    <configuration> 
    <webResources> 
     <resource> 
     <directory>WebContent</directory> 
     </resource> 
    </webResources> 
    </configuration> 
    </plugin> 
    </plugins> 
</build> 

<properties> 
    <spring.version>3.0.5.RELEASE</spring.version> 
</properties> 

<dependencies> 
    <dependency> 
    <groupId>org.codehaus.jackson</groupId> 
    <artifactId>jackson-mapper-asl</artifactId> 
    <version>1.7.1</version> 
    </dependency> 
    <dependency> 
    <groupId>javax.servlet</groupId> 
    <artifactId>servlet-api</artifactId> 
    <version>2.5</version> 
    </dependency> 
    <dependency> 
    <groupId>org.springframework</groupId> 
    <artifactId>spring-core</artifactId> 
    <version>${spring.version}</version> 
    </dependency> 

    <dependency> 
    <groupId>org.springframework</groupId> 
    <artifactId>spring-web</artifactId> 
    <version>${spring.version}</version> 
    </dependency> 

    <dependency> 
    <groupId>org.springframework</groupId> 
    <artifactId>spring-webmvc</artifactId> 
    <version>${spring.version}</version> 
    </dependency> 
    <dependency> 
     <groupId>jstl</groupId> 
     <artifactId>jstl</artifactId> 
     <version>1.2</version> 
    </dependency> 
</dependencies> 
</project>

來源

2016-12-26 OUN Ash

的CSS不加載的回答也把這個在調度員的servlet。指定正確的路徑。 –

這是正確的路徑。我的css文件位於css文件夾中，位於資源文件夾中@J –

檢查文件是否正確加載來自Chrome中的檢查。 –

你需要把你的資源在WebContent目錄，而不是在src/main/resources

請將您的所有static資源從src/main/resources到WebContent/resources目錄。

這將允許spring正確地掃描靜態資源，然後您可以重建您的應用程序。

<!-- the mvc resources tag does the magic --> 
<mvc:resources mapping="/resources/**" location="/resources/" />

這將告訴DispatcherServlet委派resource掃描糾正的servlet。

來源

2016-12-26 06:10:56 ScanQR

非常感謝你。我已經將src/main的資源文件夾替換爲webapp並且它可以正常工作！ –

@OUNAsh很高興知道這一點。祝你好運！ – ScanQR

試試這個：在調度員servlet.xml文件的flollowing替換您的資源映射

<mvc:resources mapping="/resources/**" location="/resources/css/" 
cache-period="31556926"/>

或

<mvc:resources mapping="/resources/**" location="/resources/" 
cache-period="31556926"/>

來源

2016-12-26 04:56:50 SujitKumar

我做到了，但它不起作用 –

你在哪裏把你的資源目錄放在你的項目中？ – SujitKumar

src/main/resources/css –

變化 <link rel="stylesheet" href="/resources/css/bootstrap.min.css"> <link rel="stylesheet" href="/resources/css/style.css">

這個 <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/resources /css/bootstrap.min.css"> <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/resources/css/style.css">

通過ScanQR

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

來源

2016-12-28 07:20:33

爲什麼CSS資源在spring jsp頁面中不起作用？

回答

相關問題