1. 技术文章
  2. 二十六 .ajax登录 认证 验证码(session)

二十六 .ajax登录 认证 验证码(session)

由 孤街浪徒 提交于 2020-02-11 05:49:16

一. ajax 登录 认证 验证码

https://download.csdn.net/download/baobao267/10722491 Django之Form表单验证及Ajax验证方式汇总
https://download.csdn.net/download/baobao267/10722491 Django之Form表单验证及Ajax验证方式汇总
https://blog.csdn.net/HFZeng/article/details/98654307
https://blog.csdn.net/kkorkk/article/details/80150644
https://www.jb51.net/article/165394.htm
https://segmentfault.com/q/1010000009345281
https://blog.csdn.net/huangql517/article/details/81259011

 

 templates<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="{%static 'css/bootstrap.min.css'%}">
    <script type="text/javascript" src="{%static 'js/jq.js'%}"></script>

</head>
<body>
<h3 style="text-align: center">登录页面</h3>
   <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <form method="post"  action=" ">
                     {% csrf_token %}
                    <div class="form-group">
                     <label for="user">用户:</label>
                     <input type="text" class="form-control"  name="user" id="user">
                    </div>


                    <div class="form-group">
                     <label for="pwd">密码:</label>
                     <input type="password" class="form-control" name="pwd"  id="pwd">
                    </div>

                    <div class="form-group">
                     <label for="#">验证:</label>
                     <div class="row">
                      <div class="col-md-6">
                                <input type="text" class="form-control"  name="code" id="code">
                      </div>
                         <div class="col-md-6">
{#                            <img style="width:200px;height:37px; border-radius:3px;" src="{%static 'img/11.png'%}">#}
                              <img style="width:160px;height:35px; border-radius:3px;" src="/get_img/" alt="图片" id="img">
                         </div>
                     </div>
                    </div>
                     <button class="btn btn-success pull-right" id="login_btn">登录</button>
                     <span class="errs"></span>
                </form>
            </div>
        </div>
   </div>
<script>

  $("#login_btn").click(function () {
      var  user=$("#user").val();
      var  pwd=$("#pwd").val();
      var  code=$("#code").val();
      var  csl=$("[name='csrfmiddlewaretoken']").val();
       $.ajax({
             url:"/login/",
             type:"post",
             data:{"user":user,"pwd":pwd,"code":code,"csl":csl},
             success:function (arg) {
                  console.log(arg,typeof(arg))
                  if (arg.user){
                          {#登录成功了#}
                            location.href="www.baidu.com"
                  }else {
                      {#失败#}
                         $(".errs").html(arg.msg_err).css("color","red")
                  }

             }
       });
{#<input type="hidden" name="csrfmiddlewaretoken" value="Sr7qsq3Y854eUp0Ef6vq3d7sO0joJmH6IMbU10ZNIrTnVh2WQdd48Nby4uTlo8AH">#}
  });

    
  {#点击验证码刷新#}

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




</script>
</body>
</html>
viewsfrom django.shortcuts import render,HttpResponse
from django.http import JsonResponse
import random
from django.contrib import auth
def login(request):
     if request.method=="POST":     #  ===> request.is_ajax():
         user=request.POST.get("user")
         pwd = request.POST.get("pwd")
         code = request.POST.get("code")
         print(user,pwd,code,"111111111111")

         # AJAX请求返回字典
         response={"user":None,"msg_err":""}
         if code.upper()==request.session.get("keep_str").upper():
              user_obj=auth.authenticate(username=user,password=pwd)
              if user_obj:
                  response["user"]=user
              else:
                  response["msg_err"] = "用户名或者密码错误！！！！"
         else:
              response["msg_err"]="验证码错误！！"
         return JsonResponse(response)
     else:
         return render(request, "01html/01login.html")



  验证码
def get_img(request):
    # 方式一:读取指定图片  本地磁盘
    # with open("myapp/statics/img/11.png", "rb")as f1:
    #      data=f1.read()
    #  return HttpResponse(data)


   # 方式二:读取指定图片 基于pollow模块来创建验证码 生成图片 放在本地磁盘    from PIL import Image 在读取图片
   # from PIL import Image
   # def get_random_color():  # 获取图片随机颜色
   #          return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
   # img_png=Image.new("RGB",(350,60),get_random_color())
   # f1=open("myapp/statics/img/aa.png","wb")
   # img_png.save(f1,"png")
   # with open("myapp/statics/img/aa.png", "rb")as f1:
   #     data=f1.read()
   # return HttpResponse(data)


   # 方式三 :生成图片放在内存中   放在内存上 使用内存模块  from  io import BinaryIO
    from PIL import Image,ImageDraw,ImageFont
    from  io import BytesIO
    def get_random_color():  # 获取图片随机颜色
             return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
    img_png = Image.new("RGB", (200,38),get_random_color())    # 相当于得到一个画板
    draw=ImageDraw.Draw(img_png)    #  相当于得到一个画笔
    font=ImageFont.truetype("myapp/statics/font/aaa.ttf",25)
    keep_str=""
    for i in range(6):
        random_num=str(random.randint(0,9))
        random_lowalf = chr(random.randint(97, 122))
        random_upperf = chr(random.randint(65,90))
        random_chr=random.choice([random_num,random_lowalf,random_upperf])
        draw.text((i*20+40,5), random_chr,get_random_color(),font=font)
        keep_str+=random_chr
    # 噪点燥线
    width=200
    height=38
    for i in range(6):
        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())
    # 内存写与读
    f=BytesIO()
    img_png.save(f,"png")
    data=f.getvalue()
    print(keep_str,"1111111111111")
    # 将验证码存入各自的session中
    request.session["keep_str"]=keep_str
    return HttpResponse(data)
urlsfrom django.contrib import admin
from django.urls import path
from  home import index
from myapp import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index.index),
    path('login/', views.login),
    path('get_img/', views.get_img),

]

 2. 随机验证码

def get_img(request):
    # 方式一:读取指定图片  本地磁盘
    # with open("myapp/statics/img/11.png", "rb")as f1:
    #      data=f1.read()
    #  return HttpResponse(data)


   # 方式二:读取指定图片 基于pollow模块来创建验证码 生成图片 放在本地磁盘    from PIL import Image 在读取图片
   # from PIL import Image
   # def get_random_color():  # 获取图片随机颜色
   #          return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
   # img_png=Image.new("RGB",(350,60),get_random_color())
   # f1=open("myapp/statics/img/aa.png","wb")
   # img_png.save(f1,"png")
   # with open("myapp/statics/img/aa.png", "rb")as f1:
   #     data=f1.read()
   # return HttpResponse(data)


   # 方式三 :生成图片放在内存中   放在内存上 使用内存模块  from  io import BinaryIO
    from PIL import Image,ImageDraw,ImageFont
    from  io import BytesIO
    import random
    def get_random_color():  # 获取图片随机颜色
             return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
    img_png = Image.new("RGB", (200,38),get_random_color())    # 相当于得到一个画板
    draw=ImageDraw.Draw(img_png)    #  相当于得到一个画笔
    font=ImageFont.truetype("myapp/statics/font/aaa.ttf",25)
    keep_str=""
    for i in range(6):
        random_num=str(random.randint(0,9))
        random_lowalf = chr(random.randint(97, 122))
        random_upperf = chr(random.randint(65,90))
        random_chr=random.choice([random_num,random_lowalf,random_upperf])
        draw.text((i*20+40,5), random_chr,get_random_color(),font=font)
        keep_str+=random_chr
    # 噪点燥线
    width=200
    height=38
    for i in range(6):
        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())
    # 内存写与读
    f=BytesIO()
    img_png.save(f,"png")
    data=f.getvalue()
    print(keep_str,"1111111111111")
    # 将验证码存入各自的session中
    request.session["keep_str"]=keep_str
    return HttpResponse(data)



 



      
  

    
标签

          

              
random

          
ajax

          
png

          
pwd

          
chr

              

      


  







  
    

      
            
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!