spring mvc 放置 css/js/img 文件的位置

spring mvc where to put css/js/img files

提问by skowron-line

0 and have problem where to put public files I tried Where to place images/CSS in spring-mvc app?this soluion but its not working for me

0 并且有问题在哪里放置公共文件我试过在 spring-mvc 应用程序中放置图像/CSS 的位置？这个解决方案但它对我不起作用

I have tried to place my public folder every where in WEB-INFdirectory outside but still nothing

我试图将我的公共文件夹放在WEB-INF目录外的每个位置，但仍然没有

web.xml

网页.xml

    <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd 
http://www.springframework.org/schema/mvc 
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-3.0.xsd">

  <display-name>s-mvc</display-name>
  <servlet>
    <servlet-name>frontController</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

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

</web-app>

frontcontroller-servlet.xml

前端控制器-servlet.xml

<mvc:annotation-driven/>

    <context:component-scan base-package="pl.skowronline.controller" />

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

and that how I call css file <link type="text/css" href="/css/bootstrap.css" rel="stylesheet" />

以及我如何调用 css 文件 <link type="text/css" href="/css/bootstrap.css" rel="stylesheet" />

回答by Hoàng Long

the answer from JB Nizet is correct. However, it seems the problem of your application is more than just a place to put css/js file. For Spring MVC, you must put all configuration right, or it will not work.

JB Nizet 的回答是正确的。但是，您的应用程序的问题似乎不仅仅是放置 css/js 文件的地方。对于 Spring MVC，你必须把所有的配置都放对，否则它不会工作。

For simplicity, just put the css folder right in the WEB-INF folder (/WEB-INF/css), so that you can access it like this in your page:

为简单起见，只需将 css 文件夹放在 WEB-INF 文件夹 (/WEB-INF/css) 中，这样您就可以在页面中像这样访问它：

<a href="<c:url value='/css/bootstrap.css'/>"

That link should take you directly to the css file. If it works, you can change the <a>tag into the <link>tag for CSS styling.

该链接应将您直接带到 css 文件。如果有效，您可以将<a>标签更改<link>为 CSS 样式的标签。

If it doesn't work, there are a few things to check:

如果它不起作用，有几件事需要检查：

1) Spring Security constraints that forbid you to access the files

1) 禁止您访问文件的 Spring Security 约束

2) The affect of various filters/ interceptors that can hinder your file access

2）各种过滤器/拦截器的影响，可能会阻碍您的文件访问

3) Servlet Configuration in web.xml. Make sure that no dispatcher intercept your access to the CSS file.

3) web.xml 中的 Servlet 配置。确保没有调度员拦截您对 CSS 文件的访问。

Often, <mvc:resources>will do all the above things for you. But just in case it failed, you may want to have a look.

很多时候，<mvc:resources>都会为你做以上所有的事情。但以防万一它失败了，你可能想看看。

For the <mvc:resources>error:

对于<mvc:resources>错误：

The matching wildcard is strict, but no declaration can be found for element 'mvc:resources'.

匹配的通配符是严格的，但找不到元素“mvc:resources”的声明。

It looks like you haven't declared the right schema yet. For example, you should add the following lines in the beginning of your file:

看起来您还没有声明正确的架构。例如，您应该在文件的开头添加以下几行：

http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-3.0.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-3.0.xsd">

http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/mvc http:/ /www.springframework.org/schema/mvc/spring-mvc-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0 .xsd">

UPDATE:

更新：

As your response, the problem seems to be here:

作为您的回答，问题似乎在这里：

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

You should change it to:

您应该将其更改为：

<servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/*.html</url-pattern>
  </servlet-mapping>

This will save the URL for the css/images files from conflicting with the URL mapping of controller (your servlet), and it let mvc:resources do it magic. Of course, you can use what ever extension you want for "html" part. For a beautiful URL, we may use a library like Turkey URL rewriteto solve the problem

这将保存 css/images 文件的 URL，以免与控制器（您的 servlet）的 URL 映射冲突，并让 mvc:resources 发挥作用。当然，您可以为“html”部分使用您想要的任何扩展名。对于漂亮的URL，我们可能会使用像Turkey URL rewrite这样的库来解决问题

回答by Usha

I think you are getting confused with the web.xmland the application-context.xml.

我认为您对web.xml和感到困惑application-context.xml。

The web.xmlshould contain the webappxsd declarations like this, and the mapping for the Dispatcher Servlet.

本web.xml应包含webappXSD声明是这样，而对于调度的Servlet的映射。

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app 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>s-mvc</display-name>
  <servlet>
    <servlet-name>frontController</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
 </web-app>

Where as the application-context.xmlcontains the spring-frameworkxsd declarations like below

其中application-context.xml包含spring-frameworkxsd 声明如下

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

 <mvc:resources mapping="/css/**" location="/css/"/>
 <mvc:annotation-driven />
 <context:component-scan base-package="pl.skowronline.controller" />

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

</beans>

回答by JB Nizet

This is described in the following section of the documentation. Follow the instructions given there, and then change your href: /css/bootstrap.cssmeans: In the folder cssright under the root of the server. So, unless your application is deployed as the root application, it won't work, because you need to prepend the context path of your app:

文档的以下部分对此进行了描述。按照那里给出的说明，然后更改您的href:/css/bootstrap.css表示：在服务器css根目录下的文件夹中。因此，除非您的应用程序部署为根应用程序，否则它将无法工作，因为您需要预先添加应用程序的上下文路径：

href="<c:url value='/css/bootstrap.css'/>"

And this will thus mean: in the css folder, right under the root of the webapp. If the context path of your webapp is /myFirstWebApp, the generated href will thus be

这意味着：在 css 文件夹中，就在webapp的根目录下。如果您的 web 应用程序的上下文路径是/myFirstWebApp，则生成的 href 将是

href="/myFirstWebApp/css/bootstrap.css"

回答by Jeevan Patil

You can try using context path to locate resource files.

您可以尝试使用上下文路径来定位资源文件。

<link type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" />

Read thisto know more.

阅读本文以了解更多信息。

回答by Vaibhav Jadhav

I too had the same problem.Please perform below steps to get it work which worked well for me and my teammates as well.

我也遇到了同样的问题。请执行以下步骤以使其正常工作，这对我和我的队友也很有效。

Step1 :- Create a folder in Web-INF with name "resources"

步骤 1 :- 在 Web-INF 中创建一个名为“resources”的文件夹

Step2 :- Upload your bootstrap,css and js if you already do have or in case if you want to write it write inside this folder

Step2 :- 如果你已经有或者如果你想把它写在这个文件夹中，请上传你的引导程序、css 和 js

Step3 :- Now Update your dispatcher servlet xml as below

步骤 3 :- 现在更新您的调度程序 servlet xml，如下所示

1. Add Below code within beans tag

   <mvc:resources mapping="/resources/**" location="/resources/" />
           <mvc:annotation-driven />
   

   2. Add below code to xsi:schemaLocation at top of this xml

      http://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

1. 在 beans 标签中添加以下代码

   <mvc:resources mapping="/resources/**" location="/resources/" />
           <mvc:annotation-driven />
   

   2. 将以下代码添加到此 xml 顶部的 xsi:schemaLocation

      http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

step 4:- now you can use css,bootstrap resouces in your code as below

第 4 步：- 现在您可以在代码中使用 css、bootstrap 资源，如下所示

<header class="custem_header_bg"><img src="resources/img/product_banner.png" class="img-responsive"> </header>

回答by Chinthaka Dinadasa

You can only set base on JSP as following steps. Then you don't need to set mvc:resources in web.xml. Just set base as following. Also we can use header file to set this value. Then we can include that header.jsp in to any page we are using in application. Then we dont need to set this value in every JSP.

您只能按照以下步骤基于 JSP 进行设置。那么你就不需要在 web.xml 中设置 mvc:resources。只需将基础设置如下。我们也可以使用头文件来设置这个值。然后我们可以将该 header.jsp 包含到我们在应用程序中使用的任何页面中。那么我们就不需要在每个 JSP 中都设置这个值。

You need to set <base/>as following...

您需要设置<base/>如下...

<c:set var="req" value="${pageContext.request}" />

<c:set var="url"> ${req.requestURL} </c:set>
<c:set var="uri" value="${req.requestURI}" />

<head>
    <title></title>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />

Then You can Import any JS or CSS like below..

然后你可以像下面这样导入任何 JS 或 CSS。

<script src="assets/js/angular/angular.js"></script>