2018-9-28 17:37:18

今天把博客項目 實現了註冊和添加圖片的功能!

放在了自己的github上面 源碼! https://github.com/TrueNewBee/bbs_demo

等晚上做一下頁面的優化!哈哈哈,感覺好有成就感的樣子!

貼上筆記!

1. 滑動驗證碼補充說一下

極驗科技
www.geettest.com  技術文檔 直接下別人的api就好了

2. 復習下form組件和文件上傳
    form 提交數據的三個步驟
        1. action =" "    # 必須指定url
        2. method  = "POST"        # 需要為post請求
 

        3. <button type="submit" >註冊</button>        # 需要有個提交按鈕
    上傳文件的時候 ,需要添加下面enctype
    <form  enctype="multipart/form-data">

3. BBS的註冊功能

貼上 views 和html中的 form 代碼

views:

# 2018-9-28 12:33:47
# 註冊的視圖函數
def register(request):
    if request.method == "POST":
        ret = {"
 
status": 0, "msg": ""}
        form_obj = forms.RegForm(request.POST)
        print(request.POST)
        # 幫我做校驗
        if form_obj.is_valid():
            # 校驗通過，去數據庫創建一個新的用戶
            form_obj.cleaned_data.pop("re_password")
            avatar_img = request.FILES.get("avatar")
            models.UserInfo.objects.create_user(
 
**form_obj.cleaned_data, avatar=avatar_img)
            ret["msg"] = "/index/"
            return JsonResponse(ret)
        else:
            ret["status"] = 1
            ret["msg"] = form_obj.errors
            return JsonResponse(ret)
    # 生成一個form對象
    form_obj = forms.RegForm()
    return render(request, "register.html", {"form_obj": form_obj})

html 中的form代碼:

            <form novalidate action="/reg/" method="post" class="form-horizontal reg-form" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    <label for="{{ form_obj.username.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.username.label }}</label>
                    <div class="col-sm-8">
                        {{ form_obj.username }}
                        <span class="help-block">{{ form_obj.username.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form_obj.password.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.password.label }}</label>
                    <div class="col-sm-8">
                        {{ form_obj.password }}
                        <span class="help-block">{{ form_obj.password.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form_obj.re_password.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label>
                    <div class="col-sm-8">
                        {{ form_obj.re_password }}
                        <span class="help-block">{{ form_obj.re_password.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form_obj.email.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.email.label }}</label>
                    <div class="col-sm-8">
                        {{ form_obj.email }}
                        <span class="help-block">{{ form_obj.email.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label
                            class="col-sm-2 control-label">頭像</label>
                    <div class="col-sm-8">
                        <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png" alt=""></label>
                        <input accept="image/*" type="file" name="avatar" id="id_avatar" style="display: none">
                        <span class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-success" id="reg-submit">註冊</button>
                    </div>
                </div>
            </form>

html 中的form 請求的js代碼(Ajax請求)

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
    // 找到頭像的input標簽綁定change事件
    $("#id_avatar").change(function () {
        // 1. 創建一個讀取文件的對象
        var fileReader = new FileReader();
        // 取到當前選中的頭像文件
        // console.log(this.files[0]);
        // 讀取你選中的那個文件
        fileReader.readAsDataURL(this.files[0]);  // 讀取文件是需要時間的
        fileReader.onload = function () {
            // 2. 等上一步讀完文件之後才 把圖片加載到img標簽中
            $("#avatar-img").attr("src", fileReader.result);
        };
    });
    // AJAX提交註冊的數據
    $("#reg-submit").click(function () {
        // 取到用戶填寫的註冊數據，向後端發送AJAX請求
        var formData = new FormData();
        formData.append("username", $("#id_username").val());
        formData.append("password", $("#id_password").val());
        formData.append("re_password", $("#id_re_password").val());
        formData.append("email", $("#id_email").val());
        formData.append("avatar", $("#id_avatar")[0].files[0]);
        formData.append("csrfmiddlewaretoken", $("[name=‘csrfmiddlewaretoken‘]").val());

        $.ajax({
            url: "/reg/",
            type: "post",
            // Ajax傳文件數據 需要加入下面兩個參數
            processData: false,
            contentType: false,
            data: formData,
            success:function (data) {
                if (data.status){
                    // 有錯誤就展示錯誤
                    // console.log(data.msg);
                    // 將報錯信息填寫到頁面上
                    $.each(data.msg, function (k,v) {
                        // console.log("id_"+k, v[0]);
                        // console.log($("#id_"+k));
                        $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
                    })

                }else {
                    // 沒有錯誤就跳轉到指定頁面
                    location.href = data.msg;
                }
            }
        })
    });

    // 將所有的input框綁定獲取焦點的事件，將所有的錯誤信息清空
    $("form input").focus(function () {
        $(this).next().text("").parent().parent().removeClass("has-error");
    })
</script>

2018-9-28 17:52:17

晚上繼續叠代一下!

9.28 Django博客項目(一)