历史版本8 :Web页面简单集成示例 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1、描述编辑
FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简易方式完成集成。通过集成,用户从自己的系统通过链接使用浏览器访问FineBI的服务器,从而在自己系统内调用BI的web页面,来实际嵌入式集成。
2、实现思路编辑
FineBI在嵌入式集成时一般分为两步:获取token和调用其他相关API。
2.1 获取token
API在调用需要先获取token信息。FineBI通过jsonp获取跨域数据,可以通过方法来获取token。代码如下所示:
method为:GET
function GetList(token) {
var i=0;
jQuery.ajax({
url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token,
type: "GET",
timeout: 10000,
dataType: "jsonp",
success:function(res) {
for(;i < res.data.dashboards.length;i++) {
document.write(JSON.stringify(res.data.dashboards[i].name)+"<br>");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
2.2 调用其他相关API
获取到token后可以调用其他api,在请求中带入获取token。比如创建新仪表板:
function NewDemo(token) {
var name = prompt("name","");
var id = "";
var dir = {name: name, catalog: []}
var flag = 0;
jQuery.ajax({
url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token,
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(res) {
if(name != "") {
for (var key in res) {
if(key=="error") {
flag=1;
}
}
if(flag==0) {
window.location.href = url + "/v5/design/report/" + res.data.id + "/edit";
} else {
alert("error!");
}
} else {
alert("name is empty");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert(JSON.stringify(data));
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
注:此处的所有请求都需要带上请求类型:dataType: "jsonp",否则请求无法处理。
注:因为bi中url上面传的是json对像,有些服务器不支持json 的url,所以需要把json类型的url参数值先进行编码encodeURIComponent()。如:
3、操作步骤编辑
html文件编写
根据上述的实现思路编写HTML文件,内容如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"> </script>
<script type="text/javascript">
var url = "http://localhost:37799/webroot/decision";
function loginFR(callback) {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
jQuery.ajax({
url: url + "/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=-1",
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(data) {
alert(JSON.stringify(data));
if (data.status === "success") {
alert("successful!");
} else if (data.status === "fail"){
alert("login fail!");
}
callback && callback(data.accessToken);
},
error:function(){
alert("login error!");
}
});
}
function GetList(token) {
var i=0;
jQuery.ajax({
url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token,
type: "GET",
timeout: 10000,
dataType: "jsonp",
success:function(res) {
for(;i < res.data.dashboards.length;i++) {
document.write(JSON.stringify(res.data.dashboards[i].name)+"<br>");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
function NewDemo(token) {
var name = prompt("name","");
var id = "";
var dir = {name: name, catalog: []}
var flag = 0;
jQuery.ajax({
url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token,
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(res) {
if(name != "") {
for (var key in res) {
if(key=="error") {
flag=1;
}
}
if(flag==0) {
window.location.href = url + "/v5/design/report/" + res.data.id + "/edit";
} else {
alert("error!");
}
} else {
alert("name is empty");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert(JSON.stringify(data));
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
</script>
<body>
<form id="loginForm" name="loginForm" method="post" action="index.html">
<table>
<tbody>
<tr class="prop">
<td class="name"><label>
Username</label></td>
<td class="value"><input id="username" type="text" name="username" value="demo" /></td>
</tr>
<tr class="prop">
<td class="name"><label>
Password</label></td>
<td class="value"><input id="password" type="password" name="password" value="demo" /></td>
</tr>
<tr><td><input id="btn1" type="button" name="b1" value = "login" onclick="loginFR();"/></td></tr>
<tr><td><input id="btn2" type="button" name="b2" value ="login & get list" onclick="loginFR(GetList);"/></td></tr>
<tr><td><a href="http://localhost:37799/webroot/decision/v5/design/report/2c8b43ce791049a5af3f4b68a1c66154/view">
<input id="btn3" type="button" name="b3" value ="open" onclick="loginFR();"/>
</a></td></tr>
<tr><td><input id="btn4" type="button" name="b4" value ="new" onclick="loginFR(NewDemo);"/></td></tr>
</tbody>
</table>
<div class="actionButtons">
</div>
</form>
</body>
</html>
注:以上文件中写的URL地址为FineBI初始默认地址:http://localhost:37799/webroot/decision,可根据需要修改为自身工程的地址及端口。
文件下载:
4、注意事项编辑
由于平台安全限制,FineBI在集成时需要将管理系统>安全管理>安全防护中的Security Headers关闭才可跨域,如下图: