Spring MVC在jsp页面中导入css和js

时间:2014-12-26 09:10:39

标签: java css spring jsp spring-mvc

当我将一个css文件添加到jsp文件中时,我发现了一个问题,我已经搜索并尝试了以下链接中的tut,但它对我不起作用... http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

我的项目是由spring工具套件创建的。这是我的文件结构和文件

-\src
-----\main
--------\webapp
-----------\resources
--------------\css
-----------------\jquery-ui.css
--------------\js
-----------------\jquery-1.10.2.js

的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/root-context.xml</param-value>
    </context-param>

    <!-- Creates the Spring Container shared by all Servlets and Filters -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- Processes application requests -->
    <servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

servlet的context.xml中

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <!-- DispatcherServlet Context: defines this servlet's request-processing 
        infrastructure -->

    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />

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

    <!-- Resolves views selected for rendering by @Controllers to .jsp resources 
        in the /WEB-INF/views directory -->
    <beans:bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>

    <context:component-scan base-package="vn.edu.tdt.controller" />



</beans:beans>

abc.jsp页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/jquery-ui.css">

<script src="resources/js/jquery-1.10.2.js"></script>

我知道我的问题已经在很多人的stackoverflow.com中提出过,我已经阅读了这些并尝试了但是它没有用,所以一个直接的答案非常有帮助:D

更新问题: 我在浏览器中收到此消息:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/tdt/resources/css/jquery-ui.css".

5 个答案:

答案 0 :(得分:1)

我遇到过类似的问题,我试图从下面的页面实现弹簧部分,但它有效,

http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

mvc:resources mapping是关键概念。

此致

答案 1 :(得分:0)

您应该像这样映射静态资源路径

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

并在路径

中从相对引用切换到根引用
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/jquery-ui.css">

还要为您的资源映射添加一个order属性。像

这样的东西
<resources mapping="/resources/**" location="/resources/" order="0" />

将您的扫描语句移动到xml中的第一个,例如

<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">


    <context:component-scan base-package="vn.edu.tdt.controller" />

    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />

    ...

建议更改的原因是静态映射默认情况下具有最低优先级,并将其设置为0,实际上使其更高,并且您没有收到错误消息,说它不能被映射,而不是你没有获得CSS资源。这意味着可能某些请求映射正在接管请求(您应该在日志中看到)

答案 2 :(得分:0)

在您的上下文中包含资源,如下所示:

<resources location="/css/" mapping="/css/**"/>
<resources location="/js/" mapping="/js/**" />

并在jsp页面中链接:

<link href="<c:url value="/css/jquery-ui.css"/>" rel="stylesheet" type="text/css" />
<script src="<c:url value="/js/lib/jquery/jquery-1.10.2.js"/>"></script>

答案 3 :(得分:0)

配置图像,css和js文件夹,如下所示

<mvc:resources mapping="/img/**" location="WEB-INF/img/" />
    <mvc:resources mapping="/css/**" location="WEB-INF/css/" />
    <mvc:resources mapping="/js/**" location="WEB-INF/js/" />

答案 4 :(得分:0)

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery/jquery-1.10.2.js"></script>

我使用了上面的回复中提到的mvc:resources和其他东西。仍然面临的问题最终删除'/',这对我有用..