先部署html还是部署静态资源 (jsp生成静态html)

本方案完全是基于旧的Struts2 和jsp框架做的实现设想,大家是否有更好的方案!

需求背景

我们有时候可能需要快速发布一些专题活动或者页面,并且这些专题页面排版布局每一次都完全不一样或者说变化很大,那么就需要提供个上传html压缩包的功能,上传完后就自动解压到项目目录下,然后就可以直接访问了,当然权限安全自己考虑,那怎么做呢?下面是基于Struts2的jsp架构基础上的设想。

面对的困难

1、html静态资源页面需要获取一些业务参数,以及调用一些js方法,但是这些业务参数需要授权获取2、html静态资源页面不能跟原有项目放在一起,需要独立部署为静态资源文件3、html静态资源页面需要本地可以打开调试,然后打包就可以直接上传,不需要对路径进行任何修改

如果你的用途只是纯静态,没有任何业务属性,比如获取用户身份什么的,那么可以不考虑1,如果你不介意静态资源文件跟项目放一起导致项目慢慢变得臃肿,可以不考虑2,同时也不用考虑3了,因为都是同一个项目下,用相对路径即可。

实现思路

1、jsp动态包含

如果我们html静态资源文件和项目是可以放在同一个目录下面的,那么就可以使用JSP动态包含实现,具体思路如下1-1、用户请求一个Action,执行相关业务逻辑,比如微信登录,获取用户信息等后跳转到jsp页面1-2、jsp页面把相关业务参数封装成js变量,或者方法1-3、用户jsp:include 引入html文件1-4、这样html文件里面也可以使用1-3封装的业务属性和方法,伪代码如下

@ParentPackage(value = "default")
@Namespace(value = "/act")
@Action(value = "myAction", results = {
        @Result(name = "index", location = "index.jsp"))

})
public class MyAction{
    public String index(){
        return "index";
    }

}

上面是请求,下面是jsp页面

...
<script>
    var username = "从后台传过来的相关业务属性";
    function addVisit(){
        //封装好的相关业务方法
        ...
    }
</script>
<!--jsp include-->
<jsp:include page="/act/xxxx/index.html"/>
...

这样就可以实现想要的功能啦,统一入口

https://域名/act/myAction.do?param=xxxx

只需要动态替换index.html的内容即可,做到了静态资源可配置。

但是如果我们要求把静态资源部署到独立的静态资源服务器呢?也就是这个index.html跟项目不在一起,那怎么办?jsp:include并不支持引入远程page。怎么办呢?那就要用下面的方案了?

2、ajax读取流

其实就是相当于把index.html用ajax请求回来放到某一个div中,原理很简单,如下

<body>
    <div id="includeHtml"></div>
  </body>
  <script>
     var baseUrl = "文件所在路径";
     var username = "从后台传过来的相关业务属性";
     function addVisit(){
        //封装好的相关业务方法
        ...
     }
     $(function(){
       $.ajax({
              type:"GET",
              url:baseUrl+"/index.html",
              data: "",
              success:function(msg){
                   //因为msg是一个html文件,里面也有很多引用的相对路径的图片样式资源
                   //所以这里需要对./进行替换
                  var html = msg.replace(/\.\//g,baseUrl);
                  $("#includeHtml").html(html);
              },
              error:function(XMLHttpRequest, textStatus, thrownError){}
         })

 })
  </script>

这样就好了,主要难点就是对./这里进行替换,不替换的话,html里面的资源路径全都错乱