知启蒙开源平台

Zhiqim Console（管理控制台）是知启蒙框架中最简洁的管理控制台组件，没有数据库，只保留一个账号，非常适用于后端程序嵌入WEB控制台模式，包括首页、登录、主界面、左侧菜单和欢迎页功能，依赖该组件实现基本的账号验证，通过覆盖原则增加自有功能。
森中灵最后提交于19天前替换lib
返回文件列表
indexWww.htm7KB
<!DOCTYPE html>
<html>
<head>
<title>${context.getContextName()}</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
${Styles.src(zhiqim.css)}
${Scripts.src(zhiqim.js)}
${Scripts.setContextPath(context)}
${Scripts.src(jsencrypt.js)}
${Styles.htmlOverflowHidden()}
${zhiqim_manager_console_log()}
<style>
body{color:#333;background-color:#747f9d;background-image: url(ztmpl/zhiqim_manager/index_bg.jpg);background-repeat: no-repeat;background-size:100%;}
body,table,td,div{font-size:14px;line-height:120%;}
a,a:visited{color:#333;text-decoration:none;cursor:pointer;}
a:active,a:hover{color:#1e7eec;text-decoration:none;}

.header{position:fixed;width:100%;height:40px;line-height:40px;background-color:#000; background:rgba(0,0,0,0.2); filter:alpha(opacity=20);}
.footer{position:fixed;bottom:0px; width:100%;height:40px;background:rgba(255,255,255,0.2);line-height:40px;text-align:center;color:#fff;}

.login{background-image: url(ztmpl/zhiqim_manager/index_bg_center.jpg);background-repeat:repeat-y; width:825px;}
.input{background-color:#3f3f40;color:#fffafa;font-size:20px;letter-spacing:1px;border:2px solid #5c5c5c;border-radius:5px;height:45px;line-height:45px;text-indent:10px;font-family:Consolas,"微软雅黑";}
.input:focus{border-color:#708090;}
.input.verificationCode{letter-spacing:4px;}
</style>
<script>
Z.onload(function()
{//默认焦点
    if (Z.V.isEmpty(Z("#operatorCode").val()))
        Z("#operatorCode").focus();
    else if (Z.V.isEmpty(Z("#operatorPass").val()))
        Z("#operatorPass").focus();
    else if (Z("#verificationCode").length > 0)
        Z("#verificationCode").focus();
        
    Z(document).keydown(function(e)
    {
        if (Z.E.key(e) != Z.E.KEY.ENTER)
            return;
            
        if (!Z.Dialog.cache.isEmpty())
            return;
            
        doLogin();
    });
});

function doRememberCode(rememberCode)
{//取消记住账号时，同时取消记住密码
    if (!rememberCode.checked)
    {
        Z("#rememberPass")[0].checked = false;
        Z("[data-id=rememberPass]").removeClass("z-active");
    }
}

function doRememberPass(rememberPass)
{//记住密码时，同时记住账号
    if (rememberPass.checked)
    {
        Z("#rememberCode")[0].checked = true;
        Z("[data-id=rememberCode]").addClass("z-active");
    }
}

function doLogin()
{//登陆
    var operatorCode = Z("#operatorCode").val();
    if (Z.V.isEmptyBlank(operatorCode))
    {//用户名和密码必填
        Z.failure("用户账号不能为空！",function(){
            Z("#operatorCode").focus();
        });
        return;
    } 
    
    var operatorPass = Z("#operatorPass").val();
    if (Z.V.isEmptyBlank(operatorPass))
    {//用户名和密码必填
        Z.failure("用户密码不能为空！",function(){
            Z("#operatorPass").focus();
        });
        return;
    }
    
    var verificationCode = Z("#verificationCode").val();
    if (Z("#verificationCode").length > 0 && verificationCode.length != 4)
    {//如果有验证码框的时候，要求值必须是4位（数字在输入时控制）
        Z.failure("验证码为4位数字！");
        return;
    }
    
    //对密码进行RSA加密
    var publicKey = "${ZmrParamDao.getPublicKey()}";
    var encrypt = new JSEncrypt();
    encrypt.setPublicKey(publicKey);
    operatorPass = encrypt.encrypt(operatorPass);
    
    var ajax = Z.ajax("ZmrLoginPresenter", "doLogin");
    ajax.addParam("operatorCode", operatorCode);
    ajax.addParam("operatorPass", operatorPass);
    ajax.addParam("verificationCode", verificationCode);
    
    <#if hasRememberCode>
    ajax.addParam("rememberCode", Z("#rememberCode")[0].checked);
    </#if>
    <#if hasRememberPass>
    ajax.addParam("rememberPass", Z("#rememberPass")[0].checked);
    </#if>
    
    ajax.setFailureAlertRecovery();
    ajax.setSuccessLocationResponse();
    ajax.setLoading("login", "正在登录...", {disabled:true,recovery:false});
    ajax.execute();
}
</script>
</head>

<body>
${Htmls.toCallFrame()}
<div class="header">
    <div class="z-float-left z-w400 z-lh40 z-pd-l10 z-color-white">欢迎登录&nbsp;&nbsp;[&nbsp;${context.getContextName()}&nbsp;]！</div>
    <div class="z-float-right z-text-right z-w200 z-lh40 z-pd-r10"></div>
</div>  
<div class="z-absolute-center-middle login" style="height:<#if hasVerificationCode && hasRememberCode>410<#elseif hasVerificationCode>360<#elseif hasRememberCode>350<#else>300</#if>px"> 
<table class="z-table z-h100p">
<tr height="210">
    <td width="50%" class="z-text-center"><img src="ztmpl/zhiqim_manager/index_logo.png"></td>
    <td width="50%" valign="top" rowspan="2">
    <input type="text" id="userName" name="userName" class="z-hidden-fixed"/>
    <input type="password" id="userPass" name="userPass" class="z-hidden-fixed"/>
    <table class="z-table z-mg-l30 z-h70-tr z-pd5 z-color-white">
    <tr>
        <td class="z-px20 z-text-gray z-mg-t10">用户登录</td>
    </tr>
    <tr>
        <td><input id="operatorCode" class="z-w300 input" placeholder="用户账号" value="#{operatorCode}" maxlength="16" spellcheck="false" autocomplete="off"></td>
    </tr>
    <tr>
        <td><input id="operatorPass" type="password" class="z-w300 input" placeholder="用户密码" value="#{operatorPass}" maxlength="16" spellcheck="false" autocomplete="off"></td>
    </tr>
    <#if hasVerificationCode>
    <tr>
        <td>
            <input id="verificationCode" class="z-w200 input verificationCode" placeholder="验证码" data-options="type:Numeric;paste:true;" maxlength="4" spellcheck="false" autocomplete="off">
            <img class="z-pointer z-bd-rd5 z-mg-t-5" title="点击刷新验证码" onclick="this.src='service/vcode.jpg?bgColor=%231299ec&width=95&height=42&fontSize=20&yawp=true&t='+new Date().getTime();" src="service/vcode.jpg?bgColor=%231299ec&width=95&height=42&fontSize=20&yawp=true&t=${DateTimes.getDateTime17String()}">
        </td>   
    </tr>
    </#if>
    <#if hasRememberCode>
    <tr class="zi-h40">
        <td class="z-px16 z-text-gray">
            <input id="rememberCode" type="checkbox" data-role="z-checkbox" data-class="z-mg-r10 z-blue" onclick="doRememberCode(this);" <#if Validates.isNotEmpty(operatorCode)>checked</#if>>记住账号
        <#if hasRememberPass>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="rememberPass" type="checkbox" data-role="z-checkbox" data-class="z-mg-r10 z-blue" onclick="doRememberPass(this);" <#if Validates.isNotEmpty(operatorPass)>checked</#if>/>记住密码
        </#if>
        </td>
    </tr>
    </#if>
    <tr>
        <td><button id="login" class="z-button z-w300 z-h50 zi-px20 z-blue" onclick="doLogin()">登&nbsp;&nbsp;录</button></td>
    </tr>
    </table>
    <input type="text" id="userName2" name="userName2" class="z-hidden-fixed"/>
    <input type="password" id="userPass2" name="userPass2" class="z-hidden-fixed"/>
    </td>
</tr>
<tr class="z-h120">
    <td class="z-text-center" valign="top"><img src="ztmpl/zhiqim_manager/index_slogan.png"/></td>
</tr>
</table>
</div>
<div class="footer">${zmr_copyright}</div>
</body>
</html>