我第一次创建spring maven项目css，js，图片没有加载我试过这里给出的所有解决方案仍然无法正常工作

时间：2016-06-17 11:54:02

标签： javascript css spring maven spring-mvc

我第一次创建了spring maven项目，并且我的css，js，图像没有加载我已经尝试了这里给出的所有解决方案仍然无法正常工作。

我的目录结构显示在图片中：

调度-servlet.xml中 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<html>
<title>Home</title>
<%-- <meta name="description" content="">
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet"
    href="<c:url value="./resources/css/bootstrap.min.css" />" />
<script src="<c:url value="./resources/js/jquery-1.12.4.min.js" />"></script>
<script src="<c:url value="./resources/js/bootstrap.min.js" />"></script>
<link rel="stylesheet"
    href="<c:url value="./resources/css/styles.css" />" /> --%>
    <%@ include file="header.jsp"%>
<body>



    <div class="carousel slide" id="myCarousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
            <li data-slide-to="1" data-target="#myCarousel"></li>
            <li data-slide-to="2" data-target="#myCarousel"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active" id="slide1">
                <div class="carousel-caption">
                    <h4>Music is here</h4>
                    <p>Feel the music and buy your choice you have all the options
                        here!!</p>
                </div>
                <!-- end carousel-caption -->
            </div>
            <!-- end item -->

            <div class="item" id="slide2">
                <div class="carousel-caption">
                    <h4>Songs are here</h4>
                    <p>Listen the song and buy your choice you have all the options
                        here!!</p>
                </div>
                <!-- end carousel-caption -->
            </div>
            <!-- end item -->

            <div class="item" id="slide3">
                <div class="carousel-caption">
                    <h4>Life is happy with songs</h4>
                    <p>Feel the music,Listen the song and buy your choice you have
                        all the options here!!!</p>
                </div>
                <!-- end carousel-caption -->
            </div>
            <!-- end item -->
        </div>
        <!-- end carousel-inner -->

        <!-- Controls -->
        <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span
            class="icon-prev"></span></a> <a class="right carousel-control"
            data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
    </div>
    <!-- end myCarousel -->


    <div class="row" id="features">

        <div class="col-sm-4 feature">
            <img src="<c:url value="./../resources/images/tabla.png" />" alt="
                MusicHub" class="img-circle">
            <h3>Tabla</h3>
        </div>
        <!-- end col-sm-4 -->

        <div class="col-sm-4 feature" id="middle-slide">
            <img src="<c:url value="./../resources/images/sitar.png" />" alt="
                MusicHub" class="img-circle">
            <h3>Sitar</h3>
        </div>
        <!-- end col-sm-4 -->

        <div class="col-sm-4 feature" id="last-slide">
            <img src="<c:url value="./../resources/images/flute1.png" />" alt="MusicHub"
                class="img-circle">
            <h3>Flute</h3>
        </div>
        <!-- end col-sm-4 -->
    </div>
    <!-- end row -->

    <script>
        $('.carousel').carousel({
            interval : 6000
        })
    </script>

    <%-- <%@ include file="footer.jsp"%> --%>

</body>
</html>

的index.jsp 

<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/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.niit.musicstore</groupId>
  <artifactId>musicstore</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>musicstore Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>

    <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>4.0.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.0.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.0.1.RELEASE</version>
        </dependency>

 <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>


  </dependencies>
  <build>
    <finalName>musicstore</finalName>
  </build>
</project>

的pom.xml 

Datatables

这是输出：

this is the output

1 个答案:

答案 0 :(得分：0)

1）将此代码添加到spring-mvc-config.xml 

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
    <property name="prefix" value="/WEB-INF/views/jsp/" />
    <property name="suffix" value=".jsp" />
</bean>

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

<mvc:annotation-driven />

2）您没有使用<c:url>代码

正确映射资源 
<link rel="stylesheet"
    href="<c:url value="/resources/css/bootstrap.min.css" />" >
<script src="<c:url value="/resources/js/jquery-1.12.4.min.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
<link rel="stylesheet"
    href="<c:url value="/resources/css/styles.css" />" >
相关问题
最新问题