Django Blog之注册认证

Blog之注册认证

一、setting设置

添加头像后存到指定位置，并能作为静态文件被访问。

#存到根目录下的media文件夹中
MEDIA_ROOT = os.path.join(BASE_DIR,"media") 

#可以在浏览器中访问
MEDIA_URL = "/media/"

二、url设置

from django.conf.urls import url
from django.contrib import admin
from django.views.static import serve
from blog import settings
from app01 import views


urlpatterns = [
    url(r'^admin',admin.site.urls),
    url(r'^index/', views.index),   #首页
    url(r'^login/', views.login),   #登录页面
    url(r'^get_valid_img/', views.get_valid_img),   #获取图片验证
    url(r'^register/', views.register),   #获取图片验证
    url(r'^$', views.login),    #无效路径返回登录页面

    
# media 配置
    url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
]

三、viws.py

# 登录注册功能
from django import forms
from django.forms import widgets
from .models import UserInfo
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError

class RegisterForm(forms.Form):
    user = forms.CharField(max_length=8, label="用户名",
                           widget=widgets.TextInput(attrs={"class":"form-control"})
                           )

    pwd = forms.CharField(min_length=4,label="密码",
                          widget=widgets.PasswordInput(attrs={"class":"form-control"})
                          )

    repeat_pwd = forms.CharField(min_length=4,label="确认密码",
                                widget =widgets.PasswordInput(attrs={"class":"form-control"})
                                 )

    email = forms.EmailField(label="邮箱",
                             widget=widgets.EmailInput(attrs={"class":"form-control"})
                             )

    def clean_user(self):
        val = self.cleaned_data.get("user")
        ret = UserInfo.objects.filter(username=val)
        if not ret:
            return val
        else:
            raise ValidationError("该用户已存在")


    def clean(self):
        if self.cleaned_data.get("pwd") == self.cleaned_data.get("repeat_pwd"):
            return self.cleaned_data
        else:
            raise ValidationError("两次密码不一致！")


from django.http import JsonResponse

def register(request):
    if request.method == "POST":
        res = {"user": None,"error_dict": None}
        #取出所有的POST请求数据
        form = RegisterForm(request.POST)
        if form.is_valid():
            print(form.cleaned_data) # {"user":"yuan","pwd":"12345","repeat_pwd":"12","email":"123"}
            print(request.FILES)


            user = form.cleaned_data.get("user")
            print("="*120)
            print("user", user)
            print("="*120)
            pwd = form.cleaned_data.get("pwd")
            email = form.cleaned_data.get("email")
            avatar = request.FILES.get("avatar")
            print("user", user)
            if avatar:
                user=UserInfo.objects.create_user(username=user,password=pwd,email=email,image=avatar)
            else:
                user = UserInfo.objects.create_user(username=user, password=pwd,email=email)
            res["user"] = user.username
        else:
            print(form.errors)   # {"repeat_pwd":["....",],"email":["......",]}
            print(form.cleaned_data)
            res["error_dict"] = form.errors
        return JsonResponse(res)


    form = RegisterForm()
    return render(request, "register.html", locals())
登录注册功能
from django.shortcuts import render, redirect, HttpResponse

# Create your views here.

from django.contrib import auth
from django.http import JsonResponse

def index(request):
    # 如果数据库找不到此用户，跳转到登录页面
    if not request.user.username:
        return redirect("/login/")
    return render(request, "index.html")

# def login(request):
#     if request.is_ajax():#method=="POST"
#         user = request.POST.get("user")
#         pwd = request.POST.get("pwd")
#         valid_code = request.POST.get("valid_code")
#         res = {"state":False,"msg":None}
#
#         valid_str = request.session.get("valid_str")
#
#         if valid_str.upper()==valid_str.upper():
#             user=auth.authenticate(username=user,password=pwd)
#             if user:
#                 res["state"]=True
#                 auth.login(request,user)
#             else:
#                 res["msg"] = "username or pwd error"
#         else:
#             res["msg"] = "验证码错误！"
#         return JsonResponse(res)
#     return render(request,"login.html")
#
# def get_valid_img(request):
#     import PIL
#
#     from PIL import Image
#     from PIL import ImageDraw, ImageFont
#     import random
#     def get_random_color():
#         return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
#
#     image = Image.new("RGB", (250, 40), get_random_color())
#
#     # 生成五个随机字符
#     draw = ImageDraw.Draw(image)
#     font = ImageFont.truetype("static/fonts/kumo.ttf", size=32)
#     temp = []
#     for i in range(5):
#         random_num = str(random.randint(0, 9))
#         random_low_alpha = chr(random.randint(97, 122))
#         random_upper_alpha = chr(random.randint(65, 90))
#         random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])
#         draw.text((24 + i * 36, 0), random_char, get_random_color(), font=font)
#
#         # 保存随机字符
#         temp.append(random_char)
#
#     # 噪点噪线
#     # width=250
#     # height=40
#     # for i in range(100):
#     #     x1=random.randint(0,width)
#     #     x2=random.randint(0,width)
#     #     y1=random.randint(0,height)
#     #     y2=random.randint(0,height)
#     #     draw.line((x1,y1,x2,y2),fill=get_random_color())
#     #
#     # for i in range(400):
#     #     draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
#     #     x = random.randint(0, width)
#     #     y = random.randint(0, height)
#     #     draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
#
#     # 在内存生成图片
#     from io import BytesIO
#     f = BytesIO()
#     image.save(f, "png")
#     data = f.getvalue()
#     f.close()
#
#     # ["a","2","2","s"]
#     valid_str = "".join(temp)  # "a22s"
#     print("valid_str", valid_str)
#
#     request.session["valid_str"] = valid_str
#
#     return HttpResponse(data)


def login(request):
    if request.is_ajax():
        user = request.POST.get("user")
        pwd = request.POST.get("pwd")
        valid_code = request.POST.get("valid_code")
        res = {"state": False, "msg": None}

        valid_str = request.session.get("valid_str")    #通过session取到用户输入的验证码信息

        if valid_code.upper() == valid_str.upper():
            user = auth.authenticate(username=user,password=pwd) #从数据库进行比对，没有用户则返回空

            if user:
                res["state"] = True
                auth.login(request, user)  #登录校验
            else:
                res["msg"] = "用户名或密码错误"
        else:
            res["msg"] = "验证码错误"

        return JsonResponse(res) #对res进行序列化

    return render(request, "login.html")


# 图片验证码
def get_valid_img(request):

    import PIL

    from PIL import Image
    from PIL import ImageDraw, ImageFont
    import random

    def get_random_color():
        return (random.randint(0,255),random.randint(0,255), random.randint(0,255))

    image = Image.new("RGB", (255, 38), get_random_color())

    # 生成五个随机字符串
    draw = ImageDraw.Draw(image)
    font = ImageFont.truetype("static/fonts/kumo.ttf", size=32)
    temp = []
    for i in range(5):
        random_num = str(random.randint(0, 9))
        random_low_alpha = chr(random.randint(97, 122))    #生成a到z之间的一个字母
        random_up_alpha = chr(random.randint(65, 90))      #生成A到Z之间的一个字母
        random_char = random.choice([random_num, random_low_alpha, random_up_alpha])
        draw.text((24+i*36,0), random_char, get_random_color(), font=font)
        #保存随机字符
        temp.append(random_char)
    # 噪点噪线
    width = 255
    height=40
    # 噪线
    # for i in range(10):
    #     x1=random.randint(0,width)
    #     x2=random.randint(0,width)
    #     y1=random.randint(0,height)
    #     y2=random.randint(0,height)
    #     draw.line((x1,y1,x2,y2),fill=get_random_color())
    # # 噪点
    # for i in range(20):
    #     draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
    #     x = random.randint(0, width)
    #     y = random.randint(0, height)
    #     draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())

    #在内存生成图片
    from io import BytesIO
    f = BytesIO()
    image.save(f, "png")
    data = f.getvalue()   #获取图片的数据
    f.close()

    # ["a","2","2","s"]
    valid_str = "".join(temp)  #将生成的图片中的列表转换成字符串  "a22s"
    print("valid_str", valid_str)
    print("*"*120)
    print(temp)


    request.session["valid_str"] = valid_str  #将图片中字符串存到session表中

    return HttpResponse(data) #返回获取的图片数据



# 登录注册功能
from django import forms
from django.forms import widgets
from .models import UserInfo
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError

class RegisterForm(forms.Form):
    user = forms.CharField(max_length=8, label="用户名",
                           widget=widgets.TextInput(attrs={"class":"form-control"})
                           )

    pwd = forms.CharField(min_length=4,label="密码",
                          widget=widgets.PasswordInput(attrs={"class":"form-control"})
                          )

    repeat_pwd = forms.CharField(min_length=4,label="确认密码",
                                widget =widgets.PasswordInput(attrs={"class":"form-control"})
                                 )

    email = forms.EmailField(label="邮箱",
                             widget=widgets.EmailInput(attrs={"class":"form-control"})
                             )

    def clean_user(self):
        val = self.cleaned_data.get("user")
        ret = UserInfo.objects.filter(username=val)
        if not ret:
            return val
        else:
            raise ValidationError("该用户已存在")


    def clean(self):
        if self.cleaned_data.get("pwd") == self.cleaned_data.get("repeat_pwd"):
            return self.cleaned_data
        else:
            raise ValidationError("两次密码不一致！")


from django.http import JsonResponse

def register(request):
    if request.method == "POST":
        res = {"user": None,"error_dict": None}
        #取出所有的POST请求数据
        form = RegisterForm(request.POST)
        if form.is_valid():
            print(form.cleaned_data) # {"user":"yuan","pwd":"12345","repeat_pwd":"12","email":"123"}
            print(request.FILES)


            user = form.cleaned_data.get("user")
            print("="*120)
            print("user", user)
            print("="*120)
            pwd = form.cleaned_data.get("pwd")
            email = form.cleaned_data.get("email")
            avatar = request.FILES.get("avatar")
            print("user", user)
            if avatar:
                user=UserInfo.objects.create_user(username=user,password=pwd,email=email,image=avatar)
            else:
                user = UserInfo.objects.create_user(username=user, password=pwd,email=email)
            res["user"] = user.username
        else:
            print(form.errors)   # {"repeat_pwd":["....",],"email":["......",]}
            print(form.cleaned_data)
            res["error_dict"] = form.errors
        return JsonResponse(res)


    form = RegisterForm()
    return render(request, "register.html", locals())
views整体内容

四、HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="/static/bs/bootstrap.min.css">
    <style>
        .container{
            margin-top: 120px;
        }
        {#为头像设置样式#}
        #avatar{
            display: none;
        }
        .avatar{
            width: 60px;
            height: 60px;
            margin-left: 15px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="" novalidate>
                {% csrf_token %}
               {% for field in form %}
               <div class="form-group">
                   <label for="">{{ field.label }}</label>
                   {{ field }} <span class="error pull-right"></span>
               </div>
               {% endfor %}

                <div class="form-group">
                    <label for="avatar">头像<img class="avatar" src="/static/img/default.png" alt=""></label>

                    <input type="file" id="avatar">
               </div>

                <input type="button" class="btn btn-default reg_btn pull-right" value="提交"><span class="error" style="color: red;margin-left: 20px"></span>
            </form>
            
        </div>
    </div>
</div>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/csrf/init_ajax.js"></script>
<script>
    //图像预览
    $("#avatar").change(function () {
        //获取头像文件的数据
        var choose_file=$(this)[0].files[0];
        //实例一个读取文件对象
        var reader = new FileReader();
        reader.readAsDataURL(choose_file);
        //上传文件
        reader.onload = function () {
            $(".avatar").attr("src",reader.result) //result读取文件所在路径
        }
    });

    //注册事件
    {#$(".reg_btn").click(function () {#}
    {#    var formdata = new FormData();#}
    {#    formdata.append("user",$("#id_user").val());#}
    {#    formdata.append("pwd",$("#id_pwd").val());#}
    {#    formdata.append("repeat_pwd",$("#id_repeadt_pwd").val());#}
    {#    formdata.append("email",$("#id_email").val());#}
    {#    formdata.append("avatar",$("#avatar")[0].files[0]);#}
    {#    console.log(formdata);#}
        {#alert("123");#}
    {#    $.ajax({#}
    {#        url:"",#}
    {#        type:"post",#}
    {#        //文件获取时固定写法#}
    {#        processData:false,#}
    {#        contentType:false,#}
    {#        data:formdata,#}
    {#        success:function (data) {#}
    {#            if (data.user){#}
    {#                //注册成功#}
    {#                location.href="/login/"#}
    {#            }#}
    {#            else {#}
    {#                //注册失败#}
    {#                console.log(data.error_dict);#}
    {#                //清空错误信息#}
    {#                $("form span").html("");#}
    {#                $("form.form-group").removeClass("has-error");#}
    {#                //加载错误信息#}
    {#                $.each(data.error_dict,function (field,error_list) {#}
    {#                    if(field=="__all__"){#}
    {#                        //取出错误信息，并设置颜色为红色#}
    {#                        $("#id_repeat_pwd").next().html(error_list[0]).css("color","red");#}
    {#                        //为重复密码的输入框加class#}
    {#                        $("#id_repeat_pwd").parent().addClass("has-error");#}
    {#                        $("id_repeat_pwd").prev().addClass("has-error")#}
    {##}
    {#                    }#}
    {##}
    {#                    $("#id_"+field).next().html(error_list[0]).css("color","red");#}
    {#                    $("#id_"+field).parent().addClass("has-error")#}
    {#                })#}
    {#            }#}
    {#        }#}
    {##}
    {#    })#}
    {#{)#}

     // 注册事件
    $(".reg_btn").click(function () {
        var formdata=new FormData();
        formdata.append("user",$("#id_user").val());
        formdata.append("pwd",$("#id_pwd").val());
        formdata.append("repeat_pwd",$("#id_repeat_pwd").val());
        formdata.append("email",$("#id_email").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);

        {#formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());#}


        $.ajax({
            url:"",
            type:"post",
            processData:false,
            contentType:false,
            data:formdata,
            success:function (data) {

                //console.log(data)
                if (data.user){
                    // 注册成功
                    location.href="/login/"
                }
                else {// 注册失败
                    {#console.log(data.error_dict);#}
                    // q清空错误信息
                    $("form span").html("");
                    $("form .form-group").removeClass("has-error");
                    // 加载错误信息
                    $.each(data.error_dict,function (field,error_list) {

                      if(field=="__all__"){
                          $("#id_repeat_pwd").next().html(error_list[0]).css("color",'red');
                          $("#id_repeat_pwd").parent().addClass("has-error");
                          $("#id_pwd").next().html(error_list[0]).css("color",'red');
                          $("#id_pwd").parent().addClass("has-error")


                      }

                      $("#id_"+field).next().html(error_list[0]).css("color",'red');
                      $("#id_"+field).parent().addClass("has-error")


                    })



                }

            }
        })
    })

</script>
</body>
</html>
register.html

 

posted @ 2018-04-16 20:19  amyleell  阅读(88)  评论(0)    收藏  举报