Web页面简单集成示例- FineBI Document

Last update： 2021-12-31

1. 概述

1.1 问题描述

FineBI 通过各种样式如表格、图表等来呈现数据，进行统计分析。这些数据表格或图表，用户在开发系统的时候也可以自己编程来实现，但是工作量大，维护难。

1.2 实现思路

FineBI 是基于 B/S 架构的浏览器/服务器模式，现在用户开发的系统基本上趋向于 B/S 架构的浏览器/服务器模式，因此有些页面完全可以直接采用 Web 页面嵌入式集成的简易方式完成集成。

通过集成，用户从自己的系统通过链接使用浏览器访问 FineBI 的服务器，从而在自己系统内调用 FineBI 的 Web 页面，来实际嵌入式集成。

2. 示例

示例文件：login.html

2.1 关闭 Security Headers

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

2.2 HTML 文件编写

2.2.1 具体步骤

1）代码内容如下所示：

注：代码中模板地址为完整地址，用户可开启模板认证避免出现其他人得到模板完整 URL 查看模板数据的情况。

<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/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> 
 </head>
 <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="admin" /></td> 
     </tr> 
     <tr class="prop"> 
      <td class="name"><label> Password</label></td> 
      <td class="value"><input id="password" type="password" name="password" value="1" /></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 &amp; get list" onclick="loginFR(GetList);" /></td>
     </tr> 
     <tr>
      <td><a href="http://localhost:37799/webroot/decision/v5/design/report/f987404aa556460995c4519e470c5836/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，可根据需要修改为自身工程的地址及端口；代码中的用户名、密码需要根据实际情况修改。

2）将 HTML 文件命名为 login.html ，放到%BI_HOME%\webapps\webroot下。

2.2.2 代码介绍

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

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）调用其他相关 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++) {login.html
                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"，否则请求无法处理。

注：FineBI 中 URL 传递 JSON 对像，有些服务器不支持 JSON 对象的 URL ，因此需要把 JSON 类型的 URL 参数值先进行编码encodeURIComponent()。例如：

2.3 效果展示

启动 FineBI 工程，访问http://localhost:37799/webroot/login.html，如下图所示：

注：第一个 login 按钮，代表登录工程；点击第一个 login 按钮，再点击第三个 open 按钮，则不会进入登录页提示登录的。

いいね
良くない
閲覧しただけ

中文（简体）中文（繁體） English

日本語

フィードバック

鼠标选中内容，快速反馈问题

鼠标选中存在疑惑的内容，即可快速反馈问题，我们将会跟进处理。

不再提示

10s后关闭

Web页面简单集成示例