i@Report

如何自定义登陆界面

顶(13) 分享评论(0) 编辑

分享到 腾讯微博开心001 人人网新浪微博 QQ空间微信印象笔记

不同的客户，可能要求的登录界面行为、样式、风格都不一样。本文描述如何在i@Report中控制登录页行为和样式。

适用版本：I@Report 4.2.1 -4.2.2 , 4.3.1

1. 登录页参数控制

默认登录页是main/login.jsp。可以传递一些参数来控制登录行为。

(1). 可以通过server.property参数来设置登录id输入框下方是否要弹出任务组下拉列表：

例如，设置登录类型为服务器用户登录。此时登录界面上不会显示任务组下拉列表供选择

logintype=user

logintype参数取值有：

bbh: 登录框下方只显示任务组的下拉列表。
user: 登录框下方不显示任务组下拉列表。
all: 不设置logintype时，默认为此种类型，显示完全的服务器及任务组下拉列表供选择。

(logintype参数只适用于4.2.2)

(b). 在login.jsp的url后传递参数，使登录后进入不同任务组或跳转至指定url

登录指定的任务组：

main/login.jsp?grpname=XXX&grpcaption=YYY

其中grpname参数后的XXX和grpcaption参数后的YYY分别代表默认要登录的任务组名和标题。访问此链接，登录界面上将自动选择此任务组，输入用户名密码登录后将直接进入此任务组。

登录后跳转到指定的URL：

main/login.jsp?forward=XXXXXXX

其中forward参数后的XXXXXXX是要跳转的url地址。可以是相对地址，也可以是http开头的绝对地址。

应用举例：

某系统只有1个任务组和任务，想登录后直接进入任务进行数据查看、填报等操作。

URL的写法是：

main/login.jsp?grpname=XXX&grpcaption=YYY&forward=main/listbbq.do%3FtaskId=GUID

然后将此url在服务器管理中设置为服务器的登录页即可。

2. 登录页面的基本元素

i@Report的登录页面的基本构成元素如下图所示：

(1)信息提示区：用来显示登录过程中的提示信息或者登录失败后的异常信息．此元素可以是标准的DOM元素，如<div>, <span>或<table>等．但不能是表单元素．

(2)登录目标：显示要登录的目标任务组或服务器．此元素可以是标准的DOM元素，如<div>, <span>或<table>等．但不能是表单元素．

(3)用户名输入框：用来输入登录帐号的输入框．必须是<input>元素．

(4)密码输入框：用来输入用户密码．必须是<input>元素．

(5)登录按钮：用来点击进行登录用的．可以是<button>，或<img>等元素．

这些基本元素在页面上的位置可以任意设置。可以最大限度的满足美工要求。

3. 登录页面脚本

要想在新设计的登录页面实现登录，必须在页面中嵌入如下脚本：

<scriptsrc="sanlib/js/keys.js"></script>
<scriptsrc="sanlib/js/util.js"></script>
<scriptsrc="sanlib/js/sys.js"></script>
<scriptsrc="sanlib/js/xmlhttp.js"></script>
<scriptsrc="js/taskgroup.js"></script>
<scriptsrc="js/loginform.js"></script>
<script>
    var serverPath = "<%=serverPath%>";
    var qs = new QueryString();
    var grpname = qs.get("grpname");
    var grpcaption = qs.get("grpcaption");
    var forward = qs.get("forward");
    var config = {
      forms:{  //登录界面上的表单元素
              uid:"user",  //用户代码输入框，是dom id或input dom对象
              pwd:"psw",  //用户密码输入框，是dom id或input dom对象
              grp:"grp",  //任务组显示标签，是一般为div或span等dom对象或其id
              login: "dologin", //登录按钮的id或其dom对象。可以是按钮、图片等。
              msg: "msg",  //信息显示标签。可以是div或span或其它dom对象或id.
              rempwd: null //是否记住密码的checkbox对象或其id.
            },
       serverPath: serverPath, //服务器路径
       forward: forward,  //登录后的转向地址
       loginType: "all"  //登录类型,bbh或user或all
    }
    if( grpname&&grpcaption ){
      config.logingroup =  { //要登录的任务组。
                    name: grpname, //任务组名
                    caption: decodeURIComponent(escape(grpcaption)) //任务组中文名。
                  }
    }
    var loginform = new LoginForm(window,config);
</script>