整合前端页面到SSM框架以及如何加载前端静态资源以及作为欢迎页面后的坑

首先，先将前端页面加入到框架中，在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的根目录吧。

整合前端页面到SSM框架以及如何加载前端静态资源以及作为欢迎页面后的坑

猜你喜欢