BBS論壇 註冊功能

 

3、註冊功能

# 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'] = '101'
            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>

 

相關文章
相關標籤/搜索