SpringMVC项目读取不到外部CSS文件的解决办法及总结

简介:   昨天,在写一个新需求的时候,因为没有前端同事的对接,无奈只有自己写css,js放到ssm结构的后台项目中,因为之前开发都是把前端文件放在一个专门的服务器上,一直没有关注服务端项目读取静态资源的问题,运行部署以后,项目死活读取不到我在webapp目录下放置的css,js文件,经过一番探索发现了问题.

  昨天,在写一个新需求的时候,因为没有前端同事的对接,无奈只有自己写css,js放到ssm结构的后台项目中,因为之前开发都是把前端文件放在一个专门的服务器上,一直没有关注服务端项目读取静态资源的问题,运行部署以后,项目死活读取不到我在webapp目录下放置的css,js文件,经过一番探索发现了问题.

  原因是这样的,SpringMVC项目因为会在web.xml中配置一个全局的拦截器

<servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
   <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/web-context.xml</param-value>
   </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
<servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>

  DispatcherServlet会拦截所有请求,包括对静态资源css,js的请求,它会将其当做一个正常的请求拦截掉,解决方法是在springmvc的配置文件,也就是上面的web-context.xml中添加<mvc:resources/>:

    <!--静态资源访问-->
    <mvc:resources location="/js/" mapping="/js/**"/>
    <mvc:resources location="/css/" mapping="/css/**"/>

  <mvc:resources/>指定静态资源的存放位置,指定目录下的文件不会再受DispatcherServlet的拦截.

相关文章
|
1月前
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
214 1
|
1月前
|
前端开发 JavaScript
开发过程找不到css源文件?试试配置vite的css源文件映射
【8月更文挑战第3天】开发过程找不到css源文件?试试配置vite的css源文件映射
42 0
开发过程找不到css源文件?试试配置vite的css源文件映射
|
27天前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
1月前
|
前端开发 Java 测试技术
单元测试问题之在Spring MVC项目中添加JUnit的Maven依赖,如何操作
单元测试问题之在Spring MVC项目中添加JUnit的Maven依赖,如何操作
|
2月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
3月前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
3月前
|
Java 程序员
浅浅纪念花一个月完成Springboot+Mybatis+Springmvc+Vue2+elementUI的前后端交互入门项目
浅浅纪念花一个月完成Springboot+Mybatis+Springmvc+Vue2+elementUI的前后端交互入门项目
43 1
|
3月前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
109 1
|
2月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
46 0
|
3月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,