博客系统-登录注册

url配置

from django.conf.urls import url,include
from django.contrib import admin
from blogCMS import settings
from django.views.static import serve

from blog import views
from blog import urls
urlpatterns = [
    url(r'^login/', views.login),
    url(r'^log_out/', views.log_out),
    url(r'^reg/', views.reg),
]

登录相关

视图

def login(request):
    if request.method=="POST":
        print("====可以走过来")
        username = request.POST.get("username")
        password = request.POST.get("password")
        validCode = request.POST.get("valid_code")

        login_response = {"is_login": False, "error_msg": None}

        if validCode.upper()==request.session.get("keepValidCode").upper():          #验证码不区分大小写
            user = auth.authenticate(username=username,password=password)
            if user:
                login_response["is_login"]=True      #验证通过
                auth.login(request,user)

                # request.session["username"] = username
            else:
                login_response["error_msg"]="用户名或密码错误"   #验证不通过
        else:
            login_response["error_msg"]="验证码输入有误"         #验证码错误
        import json
        return HttpResponse(json.dumps(login_response))
    else:
        # print(request.session["keepValidCode"])
        return render(request,"login.html")

前端HTML

{#<!DOCTYPE html>#}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="/static/jquery/jquery-3.2.1.min.js"></script>

    <script src="/static/jquery/jquery.session.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>
    <!-- 为使用方便，直接使用jquery.js库，如您代码中不需要，可以去掉 -->
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <!-- 引入封装了failback的接口--initGeetest -->
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
</head>
<style></style>
<body>

<div class="container" style="margin-top: 100px">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h2>欢迎登录</h2>
                </div>
                <div class="panel-body">
                    <form class="form-signin" novalidate>
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" id="username" class="form-control" placeholder="请输入用户名" required
                                   autofocus>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" id="password" class="form-control" placeholder="请输入密码" required
                                   autofocus>
                        </div>

                        <div class="row valiCode">

                            <div class="col-md-5">
                                <div class="form-group">
                                    <label for="validCode">验证码</label>
                                    <input type="text" class="form-control validCode_text" id="validCode"
                                           placeholder="请输入右侧验证码">
                                </div>
                            </div>
                            <div class="col-md-7 ">
{#                                <a href="">#}
{#                                    <img class="validCode_img" src="/get_validCode_img/" alt="" width="160px" height="40px" >点击更换验证码#}
{#                                </a>#}

                                    <img class="validCode_img" src="/get_validCode_img/" alt="" width="160px" height="40px" title="点击更换验证码">

                                    <div id="popup-captcha"></div>

                                <input type="button" class="ret" style="background: none;border: none" id="fresh" value="看不清，换一张">
                            </div>

                        </div>

                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="remember-me"> 记住密码
                            </label>

                            <a href="">忘记密码</a>
                        </div>
                    </form>
                    <div class="col-md-4">
                        <button class="btn  btn-info btn-block" id="subBtn">登录</button>
                        <span class="error"></span>
                    </div>
                    <div class="col-md-4">
                        <button class="btn  btn-success btn-block" id="register">注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<script src="/static/jquery/jquery.cookie.js"></script>
<script src="/static/blog/login.js"></script>
<script>


    var handlerPopup = function (captchaObj) {
        // 成功的回调
        captchaObj.onSuccess(function () {
            var validate = captchaObj.getValidate();
            $.ajax({
                url: "/pc-geetest/ajax_validate", // 进行二次验证
                type: "post",
                dataType: "json",
                data: {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                    geetest_challenge: validate.geetest_challenge,
                    geetest_validate: validate.geetest_validate,
                    geetest_seccode: validate.geetest_seccode
                },
                success: function (data) {
                    var response = data;

                    if (response["is_login"]){
                        if ($.cookie("next_path")){
                        location.href=$.cookie("next_path");
                        alert($.cookie("next_path"))
                            $.removeCookie("next_path","",{ expires: -1 })
                        }
                        else{
                            location.href="/index/"
                        }
                    }else{
                        $(".error").html(response["error_msg"]).css("color","red");
                    }
                }
            });
        });
        $("#subBtn").click(function () {
            captchaObj.show();

        });
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#popup-captcha");
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
    $.ajax({
        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerPopup);
        }
    });

</script>


</body>
</html>

JS

$("#register").click(function () {
        location.href="/reg/"
    });


//     //url无刷新验证码
    $(".validCode_img").click(function () {
        this.src+="?";
    });
//

注册相关

视图配置

# 注册
def reg(request):
    if request.method == "POST":
        print(request.FILES)
        regform = RegForm(request,request.POST,request.FILES)
        # print("=====这里是regform=====")

        reg_response = {"user":None,"valid_code":False,"errors":""}
        # print(regform.cleaned_data.get("username"))
        if regform.is_valid():
            print("===this is ===")
            username = regform.cleaned_data.get("username")
            password = regform.cleaned_data.get("password")

            obj = models.UserInfo.objects.create_user(username=username,password=password,avatar=request.FILES.get("img","/avatar/default.png"))
            reg_response["user"]=username
            print("======", reg_response["user"])
        else:
            print("===验证不通过====")
            reg_response["errors"]=regform.errors

        # return HttpResponse("OK")
        return HttpResponse(json.dumps(reg_response))

    regform = RegForm(request)
    return render(request,"reg.html",{"regform":regform})

HTML相关

{#<!DOCTYPE html>#}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery/jquery.cookie.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<style>

    .cc {
        margin-top: 10px;
    }
    .avator_div {
        position: relative;
        width: 60px;
        height: 60px;
        cursor: hand;
    }
    .avator_img, .avator_file {
        position: absolute;
        left: 80px;
        top: 0;
        width: 60px;
        height: 60px;
    {#        cursor: hand;#}

    }

    .avator_file {
        opacity: 0;
    {#        cursor: hand;#}{#        display: none;#}
    }


</style>
<body>


{#<img src="/static/img/top.png" style="width: 100%;position: fixed;top: 0;left: 0;">#}

<div class="container" style="margin-top: 20px">
    <div class="row">
        <h2>注册页面</h2>
        <hr>
        <div class="col-md-6">
            <form novalidate>
                {% csrf_token %}
                <div class="cc">用户名：
                    {{ regform.username }}
                </div>

                <div class="cc">密码：
                    {{ regform.password }}
                </div>

                <div class="cc">确认密码：
                    {{ regform.repassword }}
                </div>

                <div class="cc">邮箱：
                    {{ regform.email }}
                </div>

                <div class="avator_div cc">
                    <label for="avator">头像：</label>
                    <img src="/static/img/default.png" class="avator_img" id="preScan">
                    <input type="file" id="avator" class="avator_file">
                </div>


                <div class="row valiCode">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="validCode">验证码：</label>
                            {{ regform.valid_code }}
                        </div>
                    </div>
                    <div class="col-md-7 " style="margin-top: 20px">
                        <img class="validCode_img" src="/get_validCode_img/" alt="" width="160px" height="40px" >
                    </div>

                </div>

                <button type="button" class="btn btn-success ajax_signUp">点击注册</button>


            </form>
        </div>
        <div class="col-md-4 col-md-offset-1">
            <img src="/static/img/registersideimg.png" alt="">
        </div>

    </div>
</div>


</body>

<script src="/static/blog/register.js"></script>

<script>


</script>


</html>

js

// 注册页面的主要js代码


    var per_error_arr = [];

    $(".ajax_signUp").click(function () {
        var form = new FormData();
        form.append("username",$("[name=username]").val());
        form.append("password",$("[name=password]").val());
        form.append("repassword",$("[name=repassword]").val());
        form.append("email",$("[name=email]").val());
        form.append("valid_code",$("[name=valid_code]").val());
        var fileobj =$("#preScan").next()[0].files[0];

        // console.log(fileobj);

        $.ajax({
            url: "/reg/",
            type: "POST",
            data: form,
            processData: false,
            contentType: false,
            headers: {"X-CSRFToken": $.cookie('csrftoken')},
            success: function (data) {

                data = JSON.parse(data);
                if (data["user"]) {
                    alert("OK");
                    location.href="/login/"
                }
                else if(data["errors"]){
                    var error_list = data["errors"];
                    console.log("per_error_arr",per_error_arr);
                    $(".Mr_zhang").css("border","").next().remove();

                    for (var error in error_list){
                        $div=$("<div>").addClass("row");

                       $div_in=$("<div>").addClass("col-md-5").addClass("col-md-offset-9");

                       $div.append($div_in);

                       console.log($div);
                       if (error=="__all__"){
                            $div_in.text("密码不一致!");
                            $("#id_repeat_password").css("border","2px solid red").after($div);
                       }

                       $div_in.text(errors[error]);
                       $("#id_"+error).css("border","2px solid red").addClass("Mr_zhang").after($div);
                    }
                    pre_error_arr=errors_list;
                   console.log("pre_error_arr",pre_error_arr)
                }
            }
        })

    });



    $(".validCode_img").click(function () {
        this.src+="?";
    });


    $("#avator").change(function () {
        console.log("OK");
        var first_file = $(this)[0].files[0];
        var reader = new FileReader();
        reader.readAsDataURL(first_file);
        reader.onload=function () {
            $("#preScan").attr("src",this.result)
        }
    })

*注销

# 注销
def log_out(request):
    auth.logout(request)
    return redirect("/login/")

posted @ 2018-03-29 13:05 前方、有光阅读(2856) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不会起名字

博客系统-登录注册

url配置

登录相关

视图

前端HTML

JS

注册相关

视图配置

HTML相关

js

*注销

公告