美文网首页
个人博客—用户登陆&登出

个人博客—用户登陆&登出

作者: 乘风破浪55 | 来源:发表于2016-05-07 17:22 被阅读229次

    个人博客—用户登陆&登出

    • 点击头部的登陆按钮,弹出用户登录dialog


      用户登录dialog
    • 输入用户名和密码会验证是否符合要求,不符合则在上面提示错误信息,且将对应的表单元素边框和必填标志变成红色;每增加一条错误信息相应增加登录表单高度,避免出现滚动条。


      错误信息
    • 用户名和密码输入符合规则后,当密码输入框失去焦点时向后台验证用户名和密码是否正确;验证正确后方可登录。
    用户名或密码不正确
    用户名和密码正确可以登录
    • 点击登录按钮,向后台发送登录请求;发送请求前弹出数据交互中dialog,发送成功后弹出登陆成功dialog;
    数据交互中
    登陆成功
    • 登陆成功后,设置登陆cookie,如果选择了有效期则登陆cookie有效期设置为一周,否则设置为默认有效期,头部显示用户名和登出按钮;
    登陆成功显示用户名和登出
    • 点击登出按钮则退出登录,删除登陆cookie,显示注册和登陆按钮

    html部分

    <!-- 用户登陆弹窗 -->
    <form id="login" title="用户登录">
      <ol class="login_error"></ol>
      <p>
        <label for="user">帐号:</label>
        <input type="text" name="login_user" class="text" id="login_user" />
        <span class="star">*</span>
      </p>
      <p>
        <label for="pass">密码:</label>
        <input type="password" name="login_pass" class="text" id="login_pass" />
        <span class="star">*</span>
      </p>
      <p>
        <input type="checkbox" name="expires" id="expires" checked="checked" /><label for="expires">登录后有效期一周</label>
      </p>
    </form>
    <!-- /用户登陆弹窗 -->
    

    js部分

        // 头部登录按钮点击弹出登陆表单
        $('#header .loginbtn').on("click",function () {
            $('#login').dialog('open');
        }); 
        // 登录表单
        $('#login').dialog({
            autoOpen : false,
            modal : true,
            resizable : false,
            width : 320,
            height : 240,
            buttons : {
                '登录' : function () {
                    $(this).submit();
                }
            }
        }).validate({   //登录表单验证
            // 登录表单提交处理函数,类似注册表单
            submitHandler : function (form) {
                login_submit_fuc(form);
            },  
            showErrors : function (errorMap, errorList) {
                var errors = this.numberOfInvalids();           
                if (errors > 0) {
                    $('#login').dialog('option', 'height', errors * 20 + 240);
                } else {
                    $('#login').dialog('option', 'height', 240);
                }           
                this.defaultShowErrors();
            },      
            highlight : function (element, errorClass) {
                $(element).css('border', '1px solid red');
                $(element).parent().find('span').html('*').removeClass('succ');
            },      
            unhighlight : function (element, errorClass) {
                $(element).css('border', '1px solid #ccc');
                $(element).parent().find('span').html(' ').addClass('succ');
            },  
            errorLabelContainer : 'ol.login_error',
            wrapper : 'li', 
            rules : {
                login_user : {
                    required : true,
                    minlength : 2,
                },
                login_pass : {
                    required : true,
                    minlength : 6,
                    remote : {
                        url : 'php/login.php',
                        type : 'POST',
                        data : {
                            login_user : function () {
                                return $('#login_user').val();
                            },
                        },
                    },
                },
            },
            messages : {
                login_user : {
                    required : '帐号不得为空!',
                    minlength : jQuery.format('帐号不得小于{0}位!'),
                },
                login_pass : {
                    required : '密码不得为空!',
                    minlength : jQuery.format('密码不得小于{0}位!'),
                    remote : '帐号或密码不正确!',
                }
            }
        });
        function login_submit_fuc(form){
            $(form).ajaxSubmit({
                    url : 'php/login.php',
                    type : 'POST',
                    beforeSubmit : function (formData, jqForm, options) {
                        $('#loading').dialog('open');
                        $('#login').dialog('widget').find('button').eq(1).button('disable');
                    },
                    success : function (responseText, statusText) {
                        if (responseText) {
                            $('#login').dialog('widget').find('button').eq(1).button('enable');
                            $('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('登录成功...');
                            if ($('#expires').is(':checked')) {
                                $.cookie('user', $('#login_user').val(), {
                                    expires : 7,
                                });
                            } else {
                                $.cookie('user', $('#login_user').val());
                            }
                            setTimeout(function () {
                                $('#loading').dialog('close');
                                $('#login').dialog('close');
                                $('#login').resetForm();
                                $('#login span.star').html('*').removeClass('succ');
                                $('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('数据交互中...');
                                $('#header .member, #header .logout').show();
                                $('#header .regbtn, #header .loginbtn').hide();
                                $('#header .member').html($.cookie('user'));
                            }, 1000);
                        }
                    },
                });
        }
    

    php部分

    <?php
    require 'config.php';
    
    $_pass = sha1($_POST['login_pass']);
    
    $query = mysql_query("SELECT user,pass FROM user WHERE user='{$_POST['login_user']}' AND pass='{$_pass}'") or die('SQL 错误!');
    
    if (mysql_fetch_array($query, MYSQL_ASSOC)) {
        echo 'true';
    } else {
        echo 'false';
    }
    
    mysql_close();
    ?>
    

    <b><big>代码在Github:个人博客</big></b>

    相关文章

      网友评论

          本文标题:个人博客—用户登陆&登出

          本文链接:https://www.haomeiwen.com/subject/shfsrttx.html