哇塞!他竟然知道怎么解决这个Idea创建的SSM项目无法加载css和js外部资源问题!yyds牛逼啊!

成功解决了Idea 创建的SSM项目无法加载jss、css等外部静态资源问题

1 导读

学妹听说我们在做SSM课程设计!
大老远跑过来看
一不小心,当着学妹们的面调试出来一个bug,
当时很慌,害怕毁掉了学妹心中的形象。
火上浇油的是,学妹看见我的问题不好解决就来了一句:哥哥,代码有问题是正常的,不着急慢慢来,我陪你!
我心想:???,我的代码怎么会不正常,我怕是你多少有点不正常吧!!
在这里插入图片描述
还好我比较机灵,不出几秒钟就把bug解决了!
成功挽回了学妹心中完美的形象!
此时此刻的我,
一个人坐在寝室非常开心的写下了这篇文章来分享这一天经历的幸运。
在这里插入图片描述
感觉哪里怪怪的?
~~~~

2 释放静态资源

释放静态资源是一个必要的步骤,如果不释放这些静态资源,tomcat运行后会把这些资源进行拦截,这里提供两种方法:

2.1 在spring-servlet.xml配置resource

在这里插入图片描述

  • location元素:webapp目录下的static包下的所有文件;

  • mapping元素:以/static开头的所有请求路径,如/static/js 或者/static/css;

  • 配置mvc:resources的作用:DispatcherServlet不会拦截以/static开头的所有请求路径,并当作静态资源

交给Servlet处理。

	<mvc:default-servlet-handler/>
    <mvc:resources location="/js/" mapping="/js/**"/>
    <mvc:resources location="/css/" mapping="/css/**"/>

2.2 在web.xml配置

在这里插入图片描述

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

  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.gif</url-pattern>

  </servlet-mapping>

  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>

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

3 遇见问题

部署tomcat后发现首页是正常的.
oh!myGod!
在这里插入图片描述但是令人意外的是:
跳转到其他页面后出现了难以接受的问题,可以看得很清楚,页内样式并没有渲染。
还好出现了问题,真是虚惊一场!
下面开始分析问题!
在这里插入图片描述

4 分析问题

必须明白的是:

  1. 首页正常运行
  2. 跳转无法加载css资源
    于是尝试了一下直接访问:localhost:8080/manager.com/css/managerCss/unifiStyle.css。
    天啊撸,竟然直接显示出来了!说明这些文件是可以被访问的,是没有被Servlet拦截掉的。
    在这里插入图片描述

在这里插入图片描述查看了html的使用css的链接,发现了问题:

  • 路径不完整
  • 系统执行到不同的页面,是根据当前页面请求的地址去找相应的资源文件的,也就是说除了首页可以正常访问资源意外,其他页面都会在localhost:8080/manager.com/css/managerCss/unifiStyle.css之间加入一些地址映射,也就是我们在的requestMapping。

在这里插入图片描述

5 解决问题

找出问题所在后,开始对症下药,把相应的链接写全了。
在这里插入图片描述

6 成功运行

这样,问题轻松解决,感觉很简单。
在这里插入图片描述

7 总结

不说废话了,这里就是以总分总的形式来讲述整个过程,难度不大,技术要求不高。
大家走过路过别忘记了点赞
啊, 同志们!
在这里插入图片描述

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值