將knowage(spagobi)頁面嵌套到web應用

接到任務需要將knowage將與現(xiàn)有的自研報表整合，研究了下做些記錄,歡迎討論

一、環(huán)境準備

  • 1.假設已完成knowage安裝(本文使用6.1.0_ce)
  • 2.假設web應用和knowage不在同一個域(一般情況應該都在不同的域，需要解決跨域問題)
  • 3.準備一個springboot的帶jsp應用(不一定springboot，spingmvc的也可以)
  • 4.準備sdk，下載地址(包含所有knowage版本、開發(fā)工具、sdk)：http://release.ow2.org/knowage/
  • 5.準備一個vue應用(適用于前后端分離項目的集成)【備選方案】

二、使用knowage的java sdk方式

解壓下載的knowage的war包

  • 1.目錄結(jié)構(gòu)


    knowae目錄結(jié)構(gòu).png
  • 2.復制需要的包
1. 復制 WEB-INF\tags\spagobi\execution.tag 到web項目的 WEB-INF\tags\spagobi目錄下
2. 復制 WEB-INF\lib 下面的jar到classpath
3. 如果是maven項目請上傳必要的jar到公司私有倉庫（備選）
<dependency>
            <groupId>it.eng.knowage</groupId>
            <artifactId>knowage-utils</artifactId>
            <version>6.1.1</version>
        </dependency>
        <dependency>
            <groupId>it.eng.knowage</groupId>
            <artifactId>spago-core</artifactId>
            <version>2.3.0</version>
        </dependency>

        <dependency>
            <groupId>it.eng.knowage</groupId>
            <artifactId>spago-web</artifactId>
            <version>2.3.0</version>
        </dependency>
        <dependency>
            <groupId>it.eng.knowage</groupId>
            <artifactId>spago-portlet</artifactId>
            <version>2.3.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.7.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.5</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.7.5</version>
        </dependency>
  • 3.jsp頁面中引用
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<!DOCTYPE html>
<%@ taglib prefix="spagobi" tagdir="/WEB-INF/tags/spagobi" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<spagobi:execution spagobiContext="http://192.200.9.120:8080/knowage"
                   documentLabel="  Project"
                   userId="biadmin"
                   password="biadmin"
                   iframeStyle="height:500px; width:100%"
                   executionRole="GUEST"
                   displayToolbar="<%= Boolean.TRUE %>"
                   displaySliders="<%= Boolean.TRUE %>"/>
</body>
</html>
    1. 效果圖
jsp集成結(jié)果.png

三、使用knowage的java script方式

使用原生js sdk的優(yōu)勢在于不限制后端語言，但是需要解決cors跨域的問題

  • 1.復制需要的包
復制 knowagesdk\js 下面js到 webapp\js 下
  • 2.在jsp頁面引用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/commons.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript" src="js/jsonp.js"></script>
    <script type="text/javascript" src="js/cors.js"></script>
    <script type="text/javascript" src="js/services.js"></script>
    <script type="text/javascript" src="js/api_jsonp.js"></script>
    <script type="text/javascript" src="js/api_cors.js"></script>
    <script type="text/javascript" src="js/api.js"></script>
</head>
<body>
<input type="button" value="Login" onclick="javascript:doLogin()"/>
<div height="300px" width="100%" id='targetDiv'></div>
</body>
<script type="text/javascript">

    Sbi.sdk.services.setBaseUrl({
        protocol: 'http'
        , host: '192.200.9.120'
        , port: '8080'
        , contextPath: 'knowage'
        , controllerPath: 'servlet/AdapterHTTP'
    });
    doLogin = function() {
        var user = 'biadmin';
        var password = 'biadmin';
        var cb = function(xhr) {
                Sbi.sdk.api.injectDocument({
                    documentLabel: 'Project'
                    , documentName: 'Project'
                    , executionRole: 'biadmin'
                    , target: 'targetDiv'
                    , height: '500px'
                    , width: '800px'
                    , iframe: {
                        style: 'border: 0px;'
                    }
                });

        };
        Sbi.sdk.cors.api.authenticate({
            credentials: 'user=' + user + '&password=' + password
            , headers: [{
                name: 'Content-Type',
                value: 'application/x-www-form-urlencoded'
            }]
            , callbackOk: cb
        })
    }
</script>
</html>
  • 3.解決跨域
    直接在瀏覽器訪問，頁面會報500錯誤，使用f12查看會有跨域錯誤的提示
    1.下載需要的jar
    cors-filter-2.5.jar
    java-property-utils-1.9.1.jar
    2.修改knowage系統(tǒng)下的tomcat
    將jar放入Knowage-Server-CE\lib下
    修改Knowage-Server-CE\conf\web.xml，如下： 
    <filter>    
        <filter-name>CORS</filter-name>    
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>    
        <init-param>    
            <param-name>cors.allowOrigin</param-name>   
            <param-value>*</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportedMethods</param-name>   
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportedHeaders</param-name>   
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.exposedHeaders</param-name>   
            <param-value>Set-Cookie</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportsCredentials</param-name>   
            <param-value>true</param-value>   
        </init-param>    
    </filter>    
    <filter-mapping>    
        <filter-name>CORS</filter-name>    
        <url-pattern>/*</url-pattern>    
   </filter-mapping>

  • 4.效果圖


    使用js sdk效果.png

四、在vue中使用js sdk

  • 1.復制需要的js
復制 knowagesdk\js 下面js到 static\js 下
在index.html引入：
    <script type="text/javascript" src="./static/js/commons.js"></script>
    <script type="text/javascript" src="./static/js/ajax.js"></script>
    <script type="text/javascript" src="./static/js/jsonp.js"></script>
    <script type="text/javascript" src="./static/js/cors.js"></script>
    <script type="text/javascript" src="./static/js/services.js"></script>
    <script type="text/javascript" src="./static/js/api_jsonp.js"></script>
    <script type="text/javascript" src="./static/js/api_cors.js"></script>
    <script type="text/javascript" src="./static/js/api.js"></script>
  • 2.創(chuàng)建vue.js頁面
<template>

    <div class="deptNeedListContent">
        
        <input type="button" value="Login" onclick="javascript:doLogin()" />
        <div height="300px" width="100%" id='targetDiv'></div>
    </div>

</template>
<script>
    export default {
        data() {
            return {}
        },

        methods: {
            doLogin() {
                Sbi.sdk.services.setBaseUrl({
                    protocol: 'http',
                    host: '192.200.9.120',
                    port: '8080',
                    contextPath: 'knowage',
                    controllerPath: 'servlet/AdapterHTTP'
                });
                var user = 'biadmin';
                var password = 'biadmin';
                var cb = function(xhr) {
                    Sbi.sdk.api.injectDocument({
                        documentLabel: 'Project',
                        documentName: 'Project',
                        executionRole: 'biadmin',
                        target: 'targetDiv',
                        height: '500px',
                        width: '800px',
                        iframe: {
                            style: 'border: 0px;'
                        }
                    });

                };
                Sbi.sdk.cors.api.authenticate({
                    credentials: 'user=' + user + '&password=' + password,
                    headers: [{
                        name: 'Content-Type',
                        value: 'application/x-www-form-urlencoded'
                    }],
                    callbackOk: cb
                })
            }
        },
        mounted() {
            this.doLogin();
        }
    }
</script>
<style>
    .el-table th>.cell {
        color: #000;
    }
</style>
  • 3.解決跨域問題請看章節(jié)三

五、總結(jié)

  • 1.knowage為spago bi新命名網(wǎng)上的資料不是很多，做頁面集成時參考了很多spago bi以前的版本方案
  • 2.knowagesdk提供的時一個war包里面有一些集成的example可以參考
  • 3.使用js sdk時可以看下具體的源碼改成自己需要

應該會寫一系列文章，包含如何安裝、配置、設計和其它系統(tǒng)集成等(我也不知道什么時候才能寫，哈哈哈)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 這里筑夢師,是一名正在努力學習的iOS開發(fā)工程師,目前致力于全棧方向的學習,希望可以和大家一起交流技術(shù),共同...
    筑夢師Winston閱讀 26,443評論 80贊 514
  • 一：什么是閉包？閉包的用處？ （1）閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上，閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 10,029評論 1贊 52
  • 雪色浮動在寒涼的窗欞，一環(huán)一環(huán)的彩燈把舊故事串起，告別總這樣無聲無息，聽著新年的鐘聲當當響起。歲月，又將翻...
    心如愛止水閱讀 396評論 0贊 1
  • 早春三月，春風吹到了窗前，催長了菜葉，催開了菜花。金黃色的花瓣，發(fā)出幽幽清香…… 我把買回來的白菜，將菜葉一層層掰...
    春之原野閱讀 1,277評論 8贊 11
  • 少年從花兒的故鄉(xiāng)走出來，跟著他的父母，帶著拉面手藝，從大西北來到我們這個沿海的小鎮(zhèn)。 西北風歷練的少年，跟小鎮(zhèn)...
    楊家有女閱讀 276評論 0贊 0

友情鏈接更多精彩內(nèi)容