BBS论坛 注册功能

三、注册功能

# views.py文件
def register(request):
    back_dic = {'code': 100, 'msg': ''}
    form_obj = myforms.MyForm()
    if request.method == 'POST':
        # print("进入了POST！！")
        # 前端传来了数据，现在要去校验了
        form_obj = myforms.MyForm(request.POST)
        # 自动校验，校验结果保存在 is_valid 中
        if form_obj.is_valid():
            data = form_obj.cleaned_data  # 可以看做，经过清洗的数据，键值形式存放，不知道是对象还是字典类型
            # print(type(data))
            # 将confirm_password去掉
            data.pop('confirm_password')
            # 获取用户上传的文件对象，因为上面的data里面是没有的
            # 上传的头像文件是放在request.FILES里面
            file_obj = request.FILES.get('myfile')
            # 判断用户是否上传了自己的头像，因为设置的是可以不上传头像
            # 如果不上传头像的话，会使用默认的头像
            if file_obj:
                # 上传了头像，那么就将路径添加到data中去
                data['avatar'] = file_obj
            # 用create_user  --> 密码会保存成密文
            models.UserInfo.objects.create_user(**data)
            back_dic['msg'] = '恭喜你，注册成功！'
            back_dic['url'] = '/login/'
        else:
            back_dic['code'] = ''
            back_dic['msg'] = form_obj.errors
        return JsonResponse(back_dic)
    return render(request, 'register.html', locals())

<!--register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BBS论坛</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
   <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <h2 class="text-center"> 用户注册 </h2>
                {# 使用ajax向后端提交数据 #}
                <form id="myform">
                    {% csrf_token %}
                    {% for form in form_obj %}
                        <div class="form-group">
                            <label for="{{ form_obj.auto_id }}">{{ form.label }}</label>
                            {{ form }}
                        {# 下面用来显示错误信息的 #}
                        <span class="errors pull-right" style="color: red;"></span>
                        </div>
                    {% endfor %}
                </form>
                <div class="form-group">
                    <label for="id_myfile">头像
                        <img src="/static/img/1.jpg" alt="" width="100" style="margin-left: 20px" id="id_img">
                    </label>
                    <input type="file" name="myfile" id="id_myfile" style="display: none">
                </div>
                <button class="btn btn-success  btn-lg" id="id_submit">注册</button>
            </div>
        </div>
    </div>
    <script>
        $('#id_myfile').change(function () {
            // 获取用户上传的文件对象
            let fileObj = this.files[0];
            // 生成一个内置对象
            let fileReader = new FileReader();
            // 将文件对象传递给内置对象
            fileReader.readAsDataURL(fileObj);
            // 将读取出文件对象替换到img标签
            fileReader.onload = function(){ //等文件阅读器读取完毕再渲染图片
                $('#id_img').attr('src', fileReader.result)
            }
        });

        // ajax提交数据
        $('#id_submit').click(function(){
            // 生成一个FormData对象
            let formData = new FormData();
            // 往FormData对象中添加键值
            $.each($('#myform').serializeArray(), function (index, obj) {
                formData.append(obj.name, obj.value)
            });

            // 手动添加文件数据
            formData.append('myfile', $('#id_myfile')[0].files[0]);
            $.ajax({
                url: '',
                type:'post',
                data: formData,
                //指定两个参数
                processData: false,
                contentType: false,
                success: function (data){
                    if (data.code === 100){
                        //跳转到登录界面
                        console.log("ok!");
                        location.href = data.url;
                    }else{
                        $.each(data.msg, function (index, obj) {
                            let targetId = '#id_' + index;  // id_username, id_password...
                            $(targetId).next().html(obj[0]).parent().addClass('has-error')
                        })
                    }
                }
            });
        });

        $('input').focus(function () {
            $(this).next().html('').parent().removeClass('has-error')
        })
    </script>
</body>
</html>