用户系统集成多维数据分析工具FineBI简单示例
1. 描述
为了简化步骤，用户系统BIdemo里面只有两个页面：登录页面login.html和跳转页面index.html，登录页面就是指用户系统输入用户名密码的页面，index.html则是用户名密码验证成功之后，用户系统的首页，该示例首页中以超链节点的方式将FineBI集成进来。
2. 登录页面login.html
FineBI平台拥有自己的用户登录界面，需要登录才能使用，在实际情况中，企业会有自己的系统登录界面，如果将FineBI嵌入在系统中，虽然用户登录了用户系统，但是没有登录FineBI平台，当使用FineBI时，还要跳转到FineBI特定的登录页面登录，这对使用者而言非常麻烦。因此需要在用户系统的登录页面登录时同时登录FineBI平台（即将输入的用户名密码也发送到FineBI平台进行认证），从而访问FineBI时不需要再次登录。
2.1 FineBI登录验证接口
用户输入用户名密码后点击提交或登录按钮时，触发loginFR()方法，该方法中实现登录事件并且通过ajax将用户名密码发送到FineBI平台进行验证，并且在验证成功时，触发html中的表单提交事件，实现登录成功页面的跳转，实现BI认证代码如下：
1. function loginFR() {
2. var username =document.getElementById(\"username\").value; 3. var password =document.getElementById(\"password\").value; 4. var f = document.getElementById(\"loginForm\"); 5. jQuery.ajax({
6. url:\"http://localhost:8080/FineBI/ReportServer?op=fs_load&cmd=
sso\",//FineBI平台登录验证地址
7. dataType:\"jsonp\",//跨域采用jsonp方式
8. data:{\"username\":username,\"password\":password},//将用户名密码值发
送过去
9. jsonp:\"callback\",
10. timeout:5000,//超时时间（单位：毫秒） 11. success:function(data) {
12. if (data.status === \"success\") {//验证成功 13. f.submit();//页面跳转到指定页面 14.
15. } else if (data.status === \"fail\"){
16. alert(\"用户名密码错误！！！\"); //验证失败（用户
名或密码错误） 17. } 18. },
19. error:function(){
20. alert(\"超时或服务器其他错误！！！\");// 验证失败（超时或服务器其他
错误） 21. } 22. }); 23. }
注：由于使用了ajax，需要引入jquery.js。
另：如果用户名密码需要编码转换，可引入finereport.js,使用FR的内置编码函数进行编码转化，示例中，用户名无需编码转换，代码如下:
1.
1. FR.cjkEncode(document.getElementById(\"username\").value); //使用
FR的内置编码函数进行编码转化
2.2 完整代码
即完整的实现登录的代码如下：
1. 2.
3.
4. 5. 31.
32.
49.
50. ();\" value =\"登录\"/>
51. y:none;\"/> 52.
注：为了简化，上面示例中没有做用户系统的验证。
打开一个FineBIweb工程，其地址登录入口与上述代码的url一致，进行登录测试。如图所示进行测试
输入用户名、密码，单击登录，如图
3. 系统首页index.html
用户输入用户名密码验证成功之后，系统页面跳转到系统首页index.html，实际应用中，系统的首页会比较复杂，这里将首页简化一下，将FineBI的几个操作步骤以链接的形式显示在页面左侧，右侧嵌入一个iframe，在iframe中显示链接内容。
在上一节中已经介绍了FineBI四个操作页面的API接口链接和两个获取链接地址的方法，下面将该四个接口链接添加到系统首页index.html左侧，点击左侧链接节点时，触发viewReport()事件，将不同API接口的op参数值传递过来，拼接成完整的URL，并在右侧iframe中显示，同时在首页左侧添加我创建的目录列表中的第一个即时分析节点，点击该节点时触发openList()事件，通过ajax获取节点的url，并在右侧iframe中显示，代码如下：
1. 2. 3.
4.
5.
6. 7. 26.
27.
28.
| 35. FineBI Demo 36. | 37.|
40.
41.
46.
51.
56.
61. | 67. 68. |