Web页面简单集成例子

  • 文档创建者:doreen0813
  • 编辑次数:19次
  • 最近更新:Roxy 于 2019-12-19
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

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

    通过集成,用户从自己的系统通过链接使用浏览器访问 FineBI 的服务器,从而在自己系统内调用 FineBI 的 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);//
            }
        });
    }

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

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

    222

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

    2.4 效果展示

    以上代码效果展示如下动图:

    1576547424886568.gif

    3. 示例文件下载

    4. 注意事项

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

    222

    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!