Spring MVC程序中页面样式读取失败解决办法

矫情吗；* 2022-06-14 06:29 110阅读 0赞

用 Spring MVC 开发应用程序，对于初学者有一个很头疼的问题，那就是程序数据都已经查询出来了，但界面样式仍然十分丑陋，加载不了 css,js,图片等资源文件。当你在浏览器上直接输入某个css文件的路径时，直接得到404错误，而路径肯定没有错，其原因就在于在web.xml 中配置了类似如下的 spring servlet:

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

请注意 / 这表示这个servlet 拦截了所有的请求，包括css,js等。所以出现上面描述的情况。如何解决这个css,js等路径问题呢，有如下几种解决方案.

1.  使用spring mvc resource 去读取静态文件，比如在 WEN-INF 下建立static 文件夹，并在 static 文件夹里面建立css 文件夹，然后建立 1.css 文件.修改 mvc-dispatcher-servlet.xml 文件程序代码 程`<mvc:resources mapping="/static/**" location="/WEB-INF/static/"/>`  
    这里写代码片

这样配置之后，可以通过 [http://your-ip:port/your-app/static/css/1.css][http_your-ip_port_your-app_static_css_1.css] 直接访问了。

1.  采用 default servlet 在 web.xml 里面配置程序代码 程序代码

default  
/static/\*

这样做了之后，所有前缀为static 的请求都交给default servlet 去处理。如果你请求 [http://your-ip:port/your-app/static/css/1.css][http_your-ip_port_your-app_static_css_1.css] ，就表示在 webcontent 目录下的css文件夹下的1.css文件。

1.  通过文件扩展名进行处理 在 web.xml 里面配置程序代码 程序代码

<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.png</url-pattern>
        <url-pattern>*.js</url-pattern>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>

1.  对spring servlet 不用restful 风格。在url 上加上前缀  
    程序代码 程序代码

<servlet-mapping> 
        <servlet-name>mvc-dispatcher</servlet-name> 
        <url-pattern>/app</url-pattern> 
    </servlet-mapping>

这样做的目的是让 dispatchservlet 去拦截以/app 开头的那些 URL,并不拦截css,js等。

1.  对spring servlet 不用restful 风格。在url 上加上后缀  
    程序代码 程序代码

<servlet-mapping> 
        <servlet-name>mvc-dispatcher</servlet-name> 
        <url-pattern>*.do</url-pattern> 
    </servlet-mapping>

这样做的目的是让 dispatchservlet 只拦截\*.do 的url. 并不拦截css,js等。

[http_your-ip_port_your-app_static_css_1.css]: http://your-ip:port/your-app/static/css/1.css