SpringMVC中自定义JS/CSS引用出现404错误的解决方案

问题

在“物业报修系统”项目里,我写前端时自定义了一些CSS文件,在JSP中引用它们。当我运行项目时,浏览器上并没有显示相应的样式,内容全部挤在一坨(我那个郁闷哪)。

分析

当我开启浏览器的开发者工具后,发现相应的CSS并没有成功下载,get出现了404错误,比如下面这条URL:

1
http://localhost:8080/student/css/bootstrap.min.css

访问这条URL时显示404错误。

我仔细想了想,似乎不太对,既然可以获取JSP文件,为什么不可以获取CSS文件呢?

我再想了想,恍然明悟,我并没有主动获取JSP文件,而是,在我输入URL后服务器才给我返回一个JSP。比如我输入:

1
http://localhost:8080/student/login

服务器返回给我的JSP文件是/WEB-INF/student/login.jsp,也就是说,访问JSP是访问RestFul API后,服务器的控制器自动给我返回JSP。现在我要明晃晃地访问CSS文件,应该要让SpringMVC给我开个门路吧?

解决

我上网一查,果不其然,我需要在spring-servlet.xml中加入相应的映射配置:

1
<mvc:resources mapping="/student/css/**" location="WEB-INF/jsp/student/css/"/>

其中location指服务器上的具体位置,而mapping则是URL上的参数(使用了Ant的通配符)。

在JSP中引用CSS

我的login.jsp放在WEB-INF/student/下,而CSS文件放在WEB-INF/student/css/下,在JSP中引用CSS我可以这么写:

1
<link href="css/my/signin.css" rel="stylesheet">

运行起来显示就正常了。

效果

(复制BootStrap的示例):