接到任務(wù)需要將knowage將與現(xiàn)有的自研報(bào)表整合，研究了下做些記錄,歡迎討論
一捌臊、環(huán)境準(zhǔn)備
- 1.假設(shè)已完成knowage安裝(本文使用6.1.0_ce)
- 2.假設(shè)web應(yīng)用和knowage不在同一個(gè)域(一般情況應(yīng)該都在不同的域杨蛋，需要解決跨域問(wèn)題)
- 3.準(zhǔn)備一個(gè)springboot的帶jsp應(yīng)用(不一定springboot，spingmvc的也可以)
- 4.準(zhǔn)備sdk理澎，下載地址(包含所有knowage版本逞力、開(kāi)發(fā)工具、sdk)：http://release.ow2.org/knowage/
- 5.準(zhǔn)備一個(gè)vue應(yīng)用(適用于前后端分離項(xiàng)目的集成)【備選方案】
二糠爬、使用knowage的java sdk方式
解壓下載的knowage的war包
-
1.目錄結(jié)構(gòu)
knowae目錄結(jié)構(gòu).png - 2.復(fù)制需要的包
1. 復(fù)制 WEB-INF\tags\spagobi\execution.tag 到web項(xiàng)目的 WEB-INF\tags\spagobi目錄下
2. 復(fù)制 WEB-INF\lib 下面的jar到classpath
3. 如果是maven項(xiàng)目請(qǐng)上傳必要的jar到公司私有倉(cāng)庫(kù)（備選）
<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頁(yè)面中引用
<%@ 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>
- 效果圖
jsp集成結(jié)果.png
三寇荧、使用knowage的java script方式
使用原生js sdk的優(yōu)勢(shì)在于不限制后端語(yǔ)言，但是需要解決cors跨域的問(wèn)題
- 1.復(fù)制需要的包
復(fù)制 knowagesdk\js 下面js到 webapp\js 下
- 2.在jsp頁(yè)面引用
<!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.解決跨域
直接在瀏覽器訪問(wèn)执隧，頁(yè)面會(huì)報(bào)500錯(cuò)誤揩抡，使用f12查看會(huì)有跨域錯(cuò)誤的提示
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.復(fù)制需要的js
復(fù)制 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頁(yè)面
<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.解決跨域問(wèn)題請(qǐng)看章節(jié)三
五峦嗤、總結(jié)
- 1.knowage為spago bi新命名網(wǎng)上的資料不是很多，做頁(yè)面集成時(shí)參考了很多spago bi以前的版本方案
- 2.knowagesdk提供的時(shí)一個(gè)war包里面有一些集成的example可以參考
- 3.使用js sdk時(shí)可以看下具體的源碼改成自己需要
應(yīng)該會(huì)寫一系列文章屋摔，包含如何安裝烁设、配置、設(shè)計(jì)和其它系統(tǒng)集成等(我也不知道什么時(shí)候才能寫凡壤，哈哈哈)
