1. 问题描述:
在jsp中通常,第一遍运行的时候页面的css都是好的,然后再通过请求转发过来,css样式表就会丢失。
jsp中的加载css的代码:
<link rel="stylesheet" href="../css/all.css" />
直接运行:css样式正常,界面也可以显示出来
![011532858c798690f683ad59e83c915b.png](https://i-blog.csdnimg.cn/blog_migrate/2306472f043309353a2c45a9e17991e9.jpeg)
如果通过请求转发,就会出现css样式表丢失
![98e5824137b522652717fab8009f77a0.png](https://i-blog.csdnimg.cn/blog_migrate/cdca6d4bb25eb24873520732335743f3.jpeg)
2. 分析原因:
(1)我们用浏览器打开这个链接,查看样式编辑器
![837cf6063e6452458c000fbb9e166ec2.png](https://i-blog.csdnimg.cn/blog_migrate/8031460dc68ef2154c2660021239efe4.jpeg)
(2)找到all.css,复制网址,查看一下
![6b679fa269ec7d9db1eb73ef97a0ab8e.png](https://i-blog.csdnimg.cn/blog_migrate/0c760d50eceb0f2229896708b75c4282.png)
(3)结果发现找不到路径
![edbeed7c5bfbffb19bfb8e0eaa05facc.png](https://i-blog.csdnimg.cn/blog_migrate/49cd6f4f09f3cfb7ce416823def7d5ac.jpeg)
我们通过观察可以发现,请求转发的访问地址还是之前servlet的地址,所以,如果在http://localhost:8888/JavaEE06JDBCTest/user-register-servlet 下运行jsp界面,就会出现css丢失,原因是我们在导入css的语句 href="../css/all.css" / , ../是返回上一层文件夹,所以如果在这里再这样使用就会导致找不到路径,所以就会出现css样表丢失
3. 解决方法:
我们可以修改jsp的css的路径,把之前的相对路径改成绝对路径,下次不管在那块调用都不会出现路径丢失。
例如:我的css的绝对路径是http://localhost:8888/JavaEE06JDBCTest/css/all.css
![10141a900ccebefa018f3027f8236e1f.png](https://i-blog.csdnimg.cn/blog_migrate/e0af0a54c6b9a6f64c185b463dc7cc65.jpeg)
其中前面的http://localhost:8888/JavaEE06JDBCTest/都可以通过一些方法得到,我们只需要在后面添加,在WebContent文件夹下面的css文件的路径,不包括WebContent,直接添加"css/all.css"就可以直接绝对定位到css文件,从而解决上述问题。
在jsp中添加代码获取css的绝对路径:(其中basePath 最后面的"/css/all.css",根据自己项目的结构添加)
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/css/all.css";
%>
<link rel="stylesheet" href="<%=basePath%>" />
这样我们就可以解决路径找不到的问题,举一反三,以后遇到这种路径问题,可以通过上述方法直接定位到绝对路径。
送自己一句话:千金一刻,我们亦是拾光者!!!