Warum CSS von Ressourcen funktioniert nicht im Frühling jsp Seite?

Dies ist meine JSP-Seite.Warum CSS von Ressourcen funktioniert nicht im Frühling jsp Seite?

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

Ich füge CSS auf Ressourcen-Ordner hinzu. Es sollte so aussehen: This the require form Aber es sieht so aus: This is my jsp page.

mein Dispatcher-Servlet ist:

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

Dann, wie kann ich dieses Problem lösen?

meine web.xml ist:

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

mein pom.xml ist:

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

Quelle

2016-12-26 OUN Ash

Css nicht geladen werden. Geben Sie den richtigen Pfad an. –

Dies ist der richtige Pfad. Meine CSS-Dateien befinden sich im CSS-Ordner, der sich im Ressourcenordner befindet. @J –

Überprüfen Sie, ob die Datei korrekt von den Inspektionen in Chrome geladen wird. –

Sie benötigen Ressourcen in WebContent Verzeichnis setzen und nicht in src/main/resources

Bitte bewegen Sie alle static Ressourcen src/main/resources-WebContent/resources Verzeichnis.

Dies ermöglicht spring die statische Ressource ordnungsgemäß zu scannen und dann können Sie Ihre Anwendung neu erstellen.

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

Dies wird DispatcherServlet sagen die resource Scannen zu delegieren Servlet zu korrigieren.

Quelle

2016-12-26 06:10:56 ScanQR

Vielen Dank so viel. Ich habe den Ressourcenordner von src/main zu webapp ersetzen und es funktioniert !!!! –

@OUNAsh froh, das zu wissen. Viel Glück! – ScanQR

Try this: Ersetzen Sie Ihre Ressource-Mapping mit dem flollowing in Dispatcher-servlet.xml Datei

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

ODER

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

Quelle

2016-12-26 04:56:50 SujitKumar

Ich tat es, aber es hat nicht funktioniert –

wo haben Sie Ihr Ressourcenverzeichnis in Ihrem Projekt behalten? – SujitKumar

src/main/resources/css –

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

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

Auch diese wie durch ScanQR in Dispatcher-Servlet setzen

beantwortet

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

Quelle

2016-12-28 07:20:33

Warum CSS von Ressourcen funktioniert nicht im Frühling jsp Seite?

Antwort

Verwandte Themen