django登录功能接口设计和代码实现,ajax,闭包,cookie,session,装饰器

用户登录

(1)  显示登录页面

url

视图函数名

模板文件

父模板文件

/user/login/

login

login.html

base.html

 

 

 

(2)  用户登录的前端js校验。

用户名和密码不可为空。

$(function(){

    var error_name = false;
    var error_password = false;
    var error_check_password = false;


    $('#user_name').blur(function() {
        check_user_name();

    });

    $('#pwd').blur(function() {
        check_pwd();
    });

    $('#cpwd').blur(function() {
        check_cpwd();
    });

    function check_user_name(){
        var len = $('#user_name').val().length;
        if(len<5||len>20)
        {
            $('#user_name').next().html('请输入5-20个字符的用户名')
            $('#user_name').next().show();
            error_name = true;
        }
        else
        {
            $('#user_name').next().hide();
            error_name = false;
        }
    }

    function check_pwd(){
        var len = $('#pwd').val().length;
        if(len<8||len>20)
        {
            $('#pwd').next().html('密码最少8位,最长20位')
            $('#pwd').next().show();
            error_password = true;
        }
        else
        {
            $('#pwd').next().hide();
            error_password = false;
        }        
    }
    function check_cpwd(){
        var pass = $('#pwd').val();
        var cpass = $('#cpwd').val();

        if(pass!=cpass)
        {
            $('#cpwd').next().html('两次输入的密码不一致')
            $('#cpwd').next().show();
            error_check_password = true;
        }
        else
        {
            $('#cpwd').next().hide();
            error_check_password = false;
        }        
        
    }

    $('#reg_form2').submit(function() {
        check_user_name();
        check_pwd();
        check_cpwd();

        if(error_name == false && error_password == false && error_check_password == false)
        {
            return true;
        }
        else
        {
            return false;
        }

    });

})

 

(3)  输入用户名和密码,点击登录进行登录操作。Ajax

url

视图函数名

模板文件

父模板文件

/user/login_check/

login_check

$(function () {
            $('#btnlogin').click(function () {
                // 获取用户名和密码,csrf_tocon
                username = $('#username').val()
                password = $('#pwd').val()
                csrf = $('input[name="csrfmiddlewaretoken"]').val()
                // 传递给服务器的csrf名称为前端浏览器宣传后所生成的名称

                // 记住用户名  结果为true 或 false
                remember= $('input[name="remember"]').is(':checked')

                temp = {'username':username, 'password':password, 'csrfmiddlewaretoken':csrf, 'remember':remember}
                // ajax 发送请求到服务器,存在返回 res为1 否则为0
                $.post('/user/login_check/', temp, function (data) {
                    if(data.res == 0)
                    {
                        // 用户名不存在, 默认隐藏的元素展示出来先试用show()
                        $('.user_error').show().text('用户或密码错误!')
                    }
                    else
                    {
                        // 登录成功跳转页面
                        // location.href = '/'
                        // 根据登录前浏览记录跳转
                        location.href = data.next
                    }

                })
            })

        })

 


接口设计

login视图函数接口:

接口名称

login

 

接口功能

显示登录页面

 

接口参数

request

 

url

/user/login/

 

访问方式

任意

 

返回值

返回HttpResponse

 

# /user/login/
def login(request):
    # 实现记住用户名就能真正显示用户名的后台逻辑
    # 获取cookie   看user是否在其中
    if 'username' in request.COOKIES:
        username = request.COOKIES['username']
    else:
        username = ''
    return render(request, 'df_user/login.html', {'username': username})

 

 

login_check视图函数接口:

接口名称

login_check

 

接口功能

进行用户登录,校验用户名和密码。

 

接口参数

request

 

url

/user/login_check /

 

访问方式

POST

 

返回值

返回json:

登录成功:

  {'res':1}

登录失败:

  {'res':0}

 

# /user/login_check/
def login_check(request):
    # 接收用户名和密码
    username = request.POST.get('username')
    password = request.POST.get('password')
    # 查找用户名和密码是否存, 使用命名参数容错能力更强
    passport = Passport.objects.get_one_passport(username=username, password=password)
    if passport:
        # 判断登录之前的地址是否需要记录, 只有登录成功才会有session记录,之外的session被flush了,所有必须下载登录成功的判断里
        if request.session.has_key('pre_url_path'):
            next = request.session['pre_url_path']
        else:
            # 首页地址
            next = '/'
        # 用户名密码正确
        jres = JsonResponse({'res': 1, 'next': next})
        # 获取是否需要记住用户名  返回结果为字符串类型的 true / false
        remember = request.POST.get('remember')
        if remember == 'true':
            jres.set_cookie('username', username, max_age=14 * 24 * 3600)
        # 记录登录状态
        request.session['islogin'] = True
        request.session['username'] = username
        # 登录账户的id
        request.session['passport_id'] = passport.id
        return jres
    else:
        return JsonResponse({'res': 0})
View Code

 

posted @ 2017-11-05 23:00  mlj0503  阅读(919)  评论(0编辑  收藏  举报