首先,先将前端页面加入到框架中,在web下新建文件夹statics用来存放静态资源,将之前做好的前端页面添加到该文件夹下
当然,如果是把html页面转成jsp放在jsp文件夹下也行,但要在html文件上加一行
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
并把后缀改成 .jsp 当然了用到的css,jsp文件依然可以放在statis下,只要改下路径就好了
<script src="../statics/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../statics/js/formValidator_min.js" type="text/javascript" charset="UTF-8"></script>
<script src="../statics/js/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script src="../statics/js/test.js" type="text/javascript" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="../statics/css/test.css" />
效果和html文件放在statics下一样。
接下来,就是搞定如何加载静态资源了,下面是我 的web.xml 的部分代码
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
我们会发现url-pattern是将所有路径都交给dispatcher处理,自然 controller 对于静态资源的请求就会返回404
所以方法一是直接改成 /*.do (这方法我没用)
另外呢我们不用方法一,可以在之前,先用默认的servlet来处理静态资源,所以方法二是在上述代码前加上
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/statics/*</url-pattern>
</servlet-mapping>
使访问静态资源的路径都交由默认servlet, 这也是静态资源都放在一个文件夹下的原因(这方法我也没用)
方法三比较通用就是在springMVC的配置文件下加一行
<mvc:default-servlet-handler/>
即可。该代码就是自动识别静态资源并交给默认servlet处理。
讲道理这样就差不多了,不过我比较折腾想将欢迎页面设成前端的静态页面,据说可以通过欢迎页直接跳转到前端页面来解决,(这个自己搜下,我没用)
web.xml 文件下
<welcome-file-list>
<welcome-file>/statics/index.html</welcome-file>
</welcome-file-list>
我硬生生的直接将欢迎页设成前端页面,然后坑就来了
发现这样改后,静态资源竟然又加载不了了,只有光秃秃的html,我就奇怪了,直接访问 /statics/index.html 倒是没问题,F12 Network 查看后发现静态资源全都404了,看下访问静态资源发现,本来应该访问 localhost/statics/js/...的却直接访问了 localhost/js/.... 的路径。
当然我可以直接复制一份js放在web下,我还真就这么干了,但发现并没什么用。。不知道为啥 JRebel 热部署在这里出了点问题,重启下就好了。
当然我又试了别的办法,听说在springMVC加这两行就好了
<mvc:resources mapping="/js/**" location="/statics/js/"/>
<mvc:resources mapping="/css/**" location="/statics/css/"/>
我加了但没用。 后来发现是JRebel的原因,重启即可,上述方法还是有用的。
最后解决办法是把资源访问路径改成了和上文提到的jsp里一样的相对路径就好了。大概是因为路径中的两点..表示web的根目录吧。