Servlet使用请求转发到JSP导致前端页面css样式丢失解决

1. 问题描述：

在jsp中通常，第一遍运行的时候页面的css都是好的，然后再通过请求转发过来，css样式表就会丢失。

jsp中的加载css的代码：

<link rel="stylesheet" href="../css/all.css" />

直接运行：css样式正常，界面也可以显示出来

image.png

如果通过请求转发，就会出现css样式表丢失

image.png

2. 分析原因：

（1）我们用浏览器打开这个链接，查看样式编辑器

image.png

（2）找到all.css，复制网址，查看一下

image.png

（3）结果发现找不到路径

image.png

我们通过观察可以发现，请求转发的访问地址还是之前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

image.png

其中前面的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%>" />

这样我们就可以解决路径找不到的问题，举一反三，以后遇到这种路径问题，可以通过上述方法直接定位到绝对路径。

送自己一句话： 千金一刻，我们亦是拾光者！！！