Web页面简单集成例子

编辑
文档创建者:doreen0813 (83193 )     浏览次数:3310次     编辑次数:9次     最近更新:doreen0813 于 2019-05-31     

目录:

1、描述编辑

FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简易方式完成集成。通过集成,用户从自己的系统通过链接使用浏览器访问FineBI的服务器,从而在自己系统内调用BI的web页面,来实际嵌入式集成。

2、实现思路编辑

FineBI在嵌入式集成时一般分为两步:获取token和调用其他相关API。

2.1 获取token

API在调用需要先获取token信息。FineBI通过jsonp获取跨域数据,可以通过方法来获取token。代码如下所示:

// 获取token方法 function loginFR(callback) { // 页面上的用户名密码输入框值 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 登录api jQuery.ajax({ url: url + "/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=-1", // 登录url 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!"); } // 获取到token callback && callback(data.accessToken); }, error:function(){ alert("login error!"); } }); }

2.2 调用其他相关API

获取到token后可以调用其他api,比如获取模板列表,新建仪表板:

// 获取模板列表方法 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);// } }); }

注:此处的所有请求都需要带上请求类型:dataType: "jsonp",否则请求无法处理。  

注:因为bi中url上面传的是json对像,有些服务器不支持json 的url,所以需要把json类型的url参数值先进行编码encodeURIComponent()。如:  

222

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,可根据需要修改为自身工程的地址及端口。 

文件下载:

login.html

4、注意事项编辑

由于平台安全限制,FineBI在集成时需要将管理系统>安全管理>安全防护中的Security Headers关闭才可跨域,如下图:

222

附件列表


主题: 部署集成
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用? [ 去社区提问 ]