将knowage(spagobi)页面嵌套到web应用

接到任务需要将knowage将与现有的自研报表整合，研究了下做些记录,欢迎讨论

一、环境准备

• 1.假设已完成knowage安装(本文使用6.1.0_ce)
• 2.假设web应用和knowage不在同一个域(一般情况应该都在不同的域，需要解决跨域问题)
• 3.准备一个springboot的带jsp应用(不一定springboot，spingmvc的也可以)
• 4.准备sdk，下载地址(包含所有knowage版本、开发工具、sdk)：http://release.ow2.org/knowage/
• 5.准备一个vue应用(适用于前后端分离项目的集成)【备选方案】

二、使用knowage的java sdk方式

解压下载的knowage的war包

• 1.目录结构

  
  
  knowae目录结构.png
• 2.复制需要的包

1. 复制 WEB-INF\tags\spagobi\execution.tag 到web项目的 WEB-INF\tags\spagobi目录下
2. 复制 WEB-INF\lib 下面的jar到classpath
3. 如果是maven项目请上传必要的jar到公司私有仓库（备选）

            it.eng.knowage
            knowage-utils
            6.1.1
        
        
            it.eng.knowage
            spago-core
            2.3.0
        

        
            it.eng.knowage
            spago-web
            2.3.0
        
        
            it.eng.knowage
            spago-portlet
            2.3.0
        
        
        
            commons-codec
            commons-codec
            1.9
        
        
            com.fasterxml.jackson.core
            jackson-annotations
            2.7.5
        
        
            com.fasterxml.jackson.core
            jackson-databind
            2.7.5
        
        
        
            javax.servlet
            javax.servlet-api
            4.0.0
            provided
        

        
            com.fasterxml.jackson.core
            jackson-core
            2.7.5
        

• 3.jsp页面中引用

<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>

<%@ taglib prefix="spagobi" tagdir="/WEB-INF/tags/spagobi" %>



    
    

• 4. 效果图

jsp集成结果.png

三、使用knowage的java script方式

使用原生js sdk的优势在于不限制后端语言，但是需要解决cors跨域的问题

• 1.复制需要的包

复制 knowagesdk\js 下面js到 webapp\js 下

• 2.在jsp页面引用

• 3.解决跨域
  直接在浏览器访问，页面会报500错误，使用f12查看会有跨域错误的提示
  1.下载需要的jar
  cors-filter-2.5.jar
  java-property-utils-1.9.1.jar
  2.修改knowage系统下的tomcat
  将jar放入Knowage-Server-CE\lib下
  修改Knowage-Server-CE\conf\web.xml，如下：

        
        CORS    
        com.thetransactioncompany.cors.CORSFilter    
            
            cors.allowOrigin   
            *   
            
            
            cors.supportedMethods   
            GET, POST, HEAD, PUT, DELETE   
            
            
            cors.supportedHeaders   
            Accept, Origin, X-Requested-With, Content-Type, Last-Modified   
            
            
            cors.exposedHeaders   
            Set-Cookie   
            
            
            cors.supportsCredentials   
            true   
            
        
        
        CORS    
        /*    
   

• 4.效果图

  
  
  使用js sdk效果.png

四、在vue中使用js sdk

• 1.复制需要的js

复制 knowagesdk\js 下面js到 static\js 下
在index.html引入：
    
    
    
    
    
    
    
    

• 2.创建vue.js页面

• 3.解决跨域问题请看章节三

五、总结

• 1.knowage为spago bi新命名网上的资料不是很多，做页面集成时参考了很多spago bi以前的版本方案
• 2.knowagesdk提供的时一个war包里面有一些集成的example可以参考
• 3.使用js sdk时可以看下具体的源码改成自己需要

应该会写一系列文章，包含如何安装、配置、设计和其它系统集成等(我也不知道什么时候才能写，哈哈哈)