一、需求分析

1.登录功能分析

1.1流程
1.2功能

• 登录的页面
• 登录的功能
• 登出的功能

二、登录页面

1.接口设计
1.1 接口说明

1.2 返回结果
登录页面

三、登录功能

1. 业务流程

1.1 参数校验
1.账户校验
2.密码校验
3.账户密码联合校验
1.2 登录逻辑
1.在session 中保存状态
2.根据记住我的选择，进行有效期的设置（session_id）

2、接口设计

2.1 接口说明

2.2 参数说明

2.3 返回结果：

{
        "errno":'0',
        "errmsg":" ok",
}

2.4 后端代码实现
user/forms.py

class LoginForm(forms.Form):
    # 账号的校验留待后面
    account = forms.CharField(error_messages={'required':'账户不能为空'})
    password = forms.CharField(label='密码', max_length=20, min_length=6, error_messages={
        'max_length': '密码长度要小于20',
        'min_length': '密码长度至少6个字符',
        'required': '密码不能为空',
    })
    remember = forms.BooleanField(required=False)
      ##重写init
    def __init__(self,*args,**kwargs):
        self.request = kwargs.pop('request',None)
        super().__init__(*args,**kwargs)

    ##校验开始
    def claean_account(self):
        '''
        校验用户名
        :return:
        '''
        account = self.cleaned_data.get('account')
        if not re.match(r'^1[3-9]\d{9}$',account) and (len(account)< 5 or len(account) > 20):
            raise forms.ValidationError('用户账户格式不正确，请重新输入')
        return account
        # if re.match(r'^1[3-9]\d{9}$',account):
        #     pass
        # else:
        #     if len(account)< 5 or len(account) > 20:
        #         raise forms.ValidationError('用户账户格式不正确，请重新输入')
    ## 联合校验
    def clean(self):
        '''
        校验用户名，并是实现登录逻辑
        :return:
        '''
        cleaned_data = super().clean()
        account = cleaned_data.get('account')
        password = cleaned_data.get('password')
        remember = cleaned_data.get('remember')

        ##sql 语句
        # select * from tb_user where mobile= account and username = account;

        user_set = User.objects.filter(Q(mobile=account)|Q(username=account))
        #判断是否存在
        if user_set:
            user = user_set.first()
            # 校验密码是否匹配
            if user.check_password(password):
                if remember:
                    # 免先登录14天
                    #由于要从request中拿到session数据，记得要重写__init__
                    self.request.session.set_expiry(constants.SESSION_EXPIRY)
                else:
                    self.request.session.set_expiry(0)
                #登录
                login(self.request,user)
            else:
                raise forms.ValidationError('密码错误，请重新输入！！！')
        else:
            raise forms.ValidationError('用户账户不存在，请重新输入~！')

        return cleaned_data

2.5 前端代码实现
static/js/user/login.js

$(function () {
    let $loginBtn = $('.login-btn');    // 获取登录按钮元素
    $loginBtn.click(function (e) {
        e.preventDefault(); // 阻止默认提交
        // 1.校验账户
        let sAccount = $('input[name="account"]').val();
        if (sAccount === ''){
            message.showError('用户账户不能为空');
            return
        }
        if(!(/^\w{5,20}$/).test(sAccount) && !(/^1[3-9]\d{9}$/).test(sAccount)){
            message.showError('用户账户格式不正确，请求重新输入');
            return
        }
        // 2.校验用户输入密码
        let sPassword = $('input[name="password"]').val();
        if(sPassword === ''){
            message.showError('用户密码不能为空');
            return
        }
        // 3.获取用户是否勾选'记住我'，勾选为true，否则为false
        let bRemember = $('input[name="remember"]').is(':checked');
        // 4.发送ajax
        $.ajax({
            url: '/user/login/',
            data: {
                account: sAccount,
                password: sPassword,
                remember: bRemember
            },
            type: 'POST',
            dataType: 'json',
            success: function (res) {
                if(res.errno === '0'){
                    message.showSuccess('恭喜， 登录成功！');
                    setTimeout(function () {
                        //注册成功之后重定向到打开登录页面之前的页面
                        //重定向
                        if(!document.referrer || document.referrer.includes('/user/login/') || document.referrer.includes('/user/register/')){
                            window.location.href = '/'
                        }else {
                            window.location.href = document.referrer
                        }
                    }, 1000)
                }else{
                    message.showError(res.errmsg)
                }
            },
            error: function (xhr, msg) {
                message.showError('服务器超时，请重试')

            }
        });
    });
});

四、登出功能

1.接口设计
1.1 接口说明

1.2 返回结果
登录页面

附效果图

01.jpg

02.jpg

03.jpg

最后的最后

 $ git add .
 $ git commit -m 'update projects'
 $ git push origin master