问题
在“物业报修系统”项目里,我写前端时自定义了一些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的示例):