javascript - 我第一次创建 spring maven 元素 css、js、图像未加载 我已经尝试了这里给出的所有解决方案仍然不起作用

标签 javascript css spring maven spring-mvc

我第一次创建 spring maven 元素,我的 css、js、图像没有加载,我已经尝试了这里给出的所有解决方案仍然不起作用。

我的目录结构如图所示:

dispatcher-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"
    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.xsd">

    <context:component-scan base-package="com.niit.musicstore" />

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

index.jsp

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

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

这是输出:

this is the output

最佳答案

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

关于javascript - 我第一次创建 spring maven 元素 css、js、图像未加载 我已经尝试了这里给出的所有解决方案仍然不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37880928/

相关文章:

javascript - 如何在每次页面运行时重新加载 HTML 中的 YouTube 视频?

javascript - C3.js Y 轴范围(最大值/最小值)不适用于条形图

javascript - 何时关闭 Node.js 中的 MySQL 连接

php - 他们是怎么做到的呢?动态加载页面/网站......框架,脚本? PHP、jQuery、 ruby ?

html - Facebook 页面提要 - 全高

java - 如何在Spring中正确终止 Activity 的套接字连接?

JavaScript 模块模式 - 如何在使用对象/函数之前触发构造函数/init 函数?

html - 奇怪的位置绝对 chrome 错误

java - 如何将登录用户的 session 数据传输到另一个 Java 应用程序

java - 捕获 Spring Integration DSL 错误配置异常?