Spring MVC程序中得到静态资源文件css,js,图片

本文探讨了在使用SpringMVC开发应用时遇到的CSS、JS等静态资源无法加载的问题及解决方案,提供了五种有效的方法来确保静态资源正确加载。


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>


请注意  <url-pattern>/</url-pattern> 这表示这个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 直接访问了。

2. 采用 default servlet 
web.xml  里面配置

 程序代码


<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/static/*</url-pattern>
</servlet-mapping>


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

3. 通过文件扩展名进行处理 
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>



4. spring servlet 不用restful 风格。在url 上加上前缀 

 程序代码


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


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

5. spring servlet 不用restful 风格。在url 上加上后缀 

 程序代码


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


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

 

 

Spring MVC 中,处理静态资源(如 JavaScript、CSS图片)的关键在于配置请求映射和资源放行,以避免静态资源被 `DispatcherServlet` 拦截并导致 404 错误[^4]。以下是几种常见的处理方式: ### 配置静态资源放行 在 Spring MVC 的配置文件中,可以通过 `<mvc:resources>` 标签明确指定哪些静态资源路径需要放行,确保它们不会被拦截器或控制器处理。例如: ```xml <!-- 放行静态资源 --> <mvc:resources location="/" mapping="/**/*.js"/> <mvc:resources location="/" mapping="/**/*.css"/> <mvc:resources location="/assets/" mapping="/assets/**/*"/> <mvc:resources location="/images/" mapping="/images/*" cache-period="360000"/> ``` 上述配置表示将 `.js`、`.css`、`/assets/` 和 `/images/` 路径下的资源放行,并允许设置缓存周期等属性[^2]。 ### 拦截器排除静态资源 在配置拦截器时,可以通过 `<mvc:exclude-mapping>` 排除静态资源路径,确保它们不会被拦截器处理。例如: ```xml <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**/*"/> <mvc:exclude-mapping path="/**/fonts/*"/> <mvc:exclude-mapping path="/**/*.css"/> <mvc:exclude-mapping path="/**/*.js"/> <mvc:exclude-mapping path="/**/*.png"/> <mvc:exclude-mapping path="/**/*.gif"/> <mvc:exclude-mapping path="/**/*.jpg"/> <mvc:exclude-mapping path="/**/*.jpeg"/> <mvc:exclude-mapping path="/**/*login*"/> <mvc:exclude-mapping path="/**/*Login*"/> <bean class="com.luwei.console.mg.interceptor.VisitInterceptor"/> </mvc:interceptor> </mvc:interceptors> ``` 该配置确保了拦截器不会作用于常见的静态资源路径,从而避免对静态资源的误处理[^2]。 ### 启用默认的 Servlet 处理静态资源 在基于 Java 的配置中,可以通过实现 `WebMvcConfigurer` 接口并重写 `configureDefaultServletHandling()` 方法来启用默认的 Servlet 处理静态资源。例如: ```java @Configuration @ComponentScan("com.cn.controller") @EnableWebMvc public class SpringMVCConfig implements WebMvcConfigurer { @Override public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) { configurer.enable(); } } ``` 此配置确保了当静态资源请求被 `DispatcherServlet` 拦截时,可以交由容器默认的 Servlet 处理,从而正确返回静态资源[^3]。 ### 使用 WebJars 管理前端资源 Spring MVC 还支持通过 WebJars 的方式管理前端依赖,例如使用 Maven 或 Gradle 引入 jQuery、Bootstrap 等库。通过这种方式,静态资源可以像后端依赖一样被版本控制和管理,同时也能与 Spring MVC 的资源处理机制无缝集成。 ### 缓存控制与性能优化 除了资源放行外,Spring MVC 还提供了缓存控制功能,例如在 `<mvc:resources>` 中设置 `cache-period` 属性,以提高静态资源的加载效率。此外,还可以结合 Gzip 压缩、CDN 加速等手段进一步优化静态资源的传输性能[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值