如何自定义登陆界面


不同的客户,可能要求的登录界面行为、样式、风格都不一样。 本文描述如何在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>

 你只要将脚本中的界面元素的ID替换成新设计的登录页的界面元素的ID即可。

此段脚本要放在登录页的</BODY>标签后面。

4. 使用新登录页

假设新设计的登录页放在i/oem/mycompany/login.jsp, 则,通过管理员登录,进入"服务器管理"-->"服务器首页",在界面上的"登录页面"中输入"oem/mycompany/login.jsp"即可。保存后,点击注销,即可看到新设置的登录页面了。


 你只要将脚本中的界面元素的ID替换成新设计的登录页的界面元素的ID即可。

此段脚本要放在登录页的</BODY>标签后面。

附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登陆亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇i与第三方系统用户同步

下一篇如何快速从excel导入采集表单并导入数据

请先登录

创建词条

词条信息

admin
admin

超级管理员|词条创建者

1415

浏览次数:669 次

编辑次数:4次 历史版本

更新时间:2019-12-26