BBS登录与注册功能

Posted 2021-01-23 louyefeng

登录功能

视图函数

def my_login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        name = request.POST.get('name')
        password = request.POST.get('password')
        code_text = request.POST.get('text')
        text = request.session.get('code_text')
        text = text.lower()
        user = authenticate(request, username=name, password=password)
        if user:
            if not text:
                return HttpResponse('验证码不能为空')
            if code_text == text:
                login(request, user)
                return HttpResponse('登录成功')
            else:
                return HttpResponse('验证码错误')
        else:
            return HttpResponse('用户名或密码错误')

前端页面:

<form>
                {% csrf_token %}
                <h2>登录界面</h2>
                <hr>
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" name="name" id="name" class="form-control" placeholder="用户名" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" name="password" id="password" class="form-control" placeholder="密码" required>
                </div>
                <div class="form-group">
                    <label for="valid_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" name="valid_code" id="valid_code" class="form-control" required>
                        </div>
                        <img src="/get_code/" alt="" width="50%" height="35" id="img_code" draggable="false">
                    </div>

                </div>
            </form>
            <a href="/register/" class="btn btn-primary pull-left">注册</a>
            <button type="button" class="btn btn-primary pull-right" id="btn">登录</button>
            <a href="#" id="change" draggable="false" class="change pull-right">看不清,换一张</a>

<script>
$('#btn').click(function () {
        $.ajax({
            url: '/login/',
            type: 'post',
            data: {
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
                'name': $('#name').val(),
                'password': $('#password').val(),
                'text': $('#valid_code').val()
            },
            success: function (data) {
                alert(data)
            }
        })
    });

    $('#change').click(function () {
        $('#img_code')[0].src += '?'
    })
</script>

注册功能

froms组件

class MyForms(forms.Form):
    username = forms.CharField(max_length=18, min_length=2, label='用户名',
                               error_messages={'max_length': '最长不超过18位', 'min_length': '最短为2个字符', 'required': '不能为空'},
                               widget=widgets.TextInput(attrs={'class': 'form-control', 'placeholder': '用户名'}))
    password = forms.CharField(max_length=18, min_length=2, label='密码',
                               error_messages={'max_length': '最长不超过18位', 'min_length': '最短为2个字符', 'required': '不能为空'},
                               widget=widgets.PasswordInput(attrs={'class': 'form-control', 'placeholder': '密码'}))
    re_password = forms.CharField(max_length=18, min_length=2, label='确认密码',
                                  error_messages={'max_length': '最长不超过18位', 'min_length': '最短为2个字符',
                                                  'required': '不能为空'},
                                  widget=widgets.PasswordInput(attrs={'class': 'form-control', 'placeholder': '确认密码'}))
    email = forms.EmailField(label='邮箱', error_messages={'invalid': '不符合邮箱格式', 'required': '不能为空'},
                             widget=widgets.EmailInput(attrs={'class': 'form-control', 'placeholder': '邮箱'}))

    def clean_username(self):
        name = self.cleaned_data.get('username')
        user = models.UserInfo.objects.filter(username=name).first()
        if user:
            raise ValidationError('用户名已存在')
        else:
            return name

    def clean(self):
        pwd = self.cleaned_data.get('password')
        re_pwd = self.cleaned_data.get('re_password')
        if pwd and re_pwd:
            if pwd == re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')

视图函数

def my_register(request):
    if request.method == 'GET':
        myforms = MyForms()
        return render(request, 'register.html', locals())
    if request.is_ajax():
        response = {'status': 100, 'msg': None}
        myforms = MyForms(request.POST)
        if myforms.is_valid():
            data = myforms.cleaned_data
            data.pop('re_password')
            my_file = request.FILES.get('myfile')
            if my_file:
                data['avatar'] = my_file
            user = models.UserInfo.objects.create_user(**data)
        else:
            response['status'] = 101
            response['msg'] = myforms.errors
        return JsonResponse(response)

前端页面

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form id="form">
                <h2>注册界面</h2>
                <hr>
                {% csrf_token %}
                {% for foo in myforms %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="myfile">头像<img src="/static/img/default.png" id="img_file" alt="" width="40"
                                               height="40"></label>
                    <input type="file" id="myfile">
                </div>
            </form>
            <button type="button" class="btn btn-primary pull-right" id="btn">提交</button>
        </div>
    </div>
</div>
</body>
<script>
    // change为控件值发生变化时触发的事件
    $('#myfile').change(function () {
        // 取出文件
        var file_obj = $('#myfile')[0].files[0];
        // 生成文件阅读器对象,把获取的图片放到img
        try{
            var filereader = new FileReader();
            // 把图片对象读入阅读器对象
            filereader.readAsDataURL(file_obj);
            // 等加载完毕后,渲染到img标签中
            filereader.onload = function () {
                // filereader.result获取阅读器对象中的值
                $("#img_file").attr('src', filereader.result)
            }
         }catch (e) {

        }
    });

    $('#btn').click(function () {
        // 上传文件使用formdata对象
        var formdata = new FormData();
        var formarr = $('#form').serializeArray();
        console.log(formarr);
        // jquery循环 循环往formdata对象中添加数据
        $.each(formarr, function (key, obj) {
            formdata.append(obj.name, obj.value)
        });
        // 添加文件对象数据
        formdata.append('myfile', $('#myfile')[0].files[0]);
        $.ajax({
            url: '/register/',
            type: 'post',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                if (data.status == '100'){
                    location.href = '/login/'
                }else {
                    var msg = data.msg;
                    $('span').remove();
                    for (i in msg){
                        console.log(i,msg[i]);
                        if (i == '__all__'){
                            $('#id_re_password').after('<span class="pull-right">'+ msg[i] + '</span>')
                        }
                        $('#id_'+i).after('<span class="pull-right">'+ msg[i] + '</span>')
                    }
                }
            }
        })
    })
</script>