返回thinkph......登陆

thinkphp+layui制作的简单登录页面

张翔2019-05-14 17:41:39277
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css"/>
    <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
</head>
<body style="background: #1E9FFF">
<div style="position: absolute;left: 50%;top: 50%;width: 500px;margin-left: -250px;margin-top: -200px;">
    <div style="background: #FFFFFF;padding: 20px;border-radius: 4px;box-shadow: 5px 5px 20px #444444">

        <div class="layui-form">
            <div class="layui-form-item" style="text-align:center;color: gray">
                <h2>后台管理登录</h2>
            </div>
            <hr>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block" style="width: 260px;">
                    <input type="text" id="username" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="layui-input-block" style="width: 260px;">
                    <input type="password" id="password" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" id="verifycode" class="layui-input">
                </div>
                <img src="{:captcha_src()}" id="img" onclick="reloadImg()">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" onclick="dologin()">登录</button>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    layui.use(['layer'],function(){
        $ = layui.jquery;
        layer = layui.layer;

        // 用户名控件获取焦点
        $('#username').focus();
        // 回车登录
        $('input').keydown(function(e){
            if(e.keyCode == 13){
                dologin();
            }
        });
    });

    // 重新生成验证码
    function reloadImg(){
        $('#img').attr('src','{:captcha_src()}?rand='+Math.random());
    }

    // 登录
    function dologin(){
        var username = $.trim($('#username').val());
        var password = $.trim($('#password').val());
        var verifycode = $.trim($('#verifycode').val());
        if(username == ''){
            layer.alert('请输入用户名',{icon:2});
            return;
        }
        if(password == ''){
            layer.alert('请输入密码',{icon:2});
            return;
        }
        if(verifycode==''){
            layer.alert('请输入验证码',{icon:2});
            return;
        }
        $.post('/admin/Account/dologin',{'username':username,'password':password,'verifycode':verifycode},function(res){
            if(res.code>0){
                reloadImg();
                layer.alert(res.msg,{icon:2});
            }else{
                layer.msg(res.msg);
                setTimeout(function(){window.location.href = '/admin/Home/index'},1000);
            }
        },'json');
    }
</script>


</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送