为什么来自资源的CSS在spring jsp页面中不起作用?

时间:2016-12-26 03:41:55

标签: java html css spring spring-mvc

这是我的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>

3 个答案:

答案 0 :(得分:0)

试试这个:用dispatcher-servlet.xml文件中的flollowing替换你的资源映射

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

OR

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

答案 1 :(得分:0)

您需要将资源放在WebContent目录中,而不是src/main/resources

请将您的所有static资源从src/main/resources移至WebContent/resources目录。

这将允许spring正确扫描静态资源,然后您可以重建您的应用程序。

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

这将告诉DispatcherServletresource扫描委派给正确的servlet。

答案 2 :(得分:0)

变化      <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">

同样将它放在dispatcher-servlet中,由ScanQR

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