Django——基于Ajax的登录功能实现

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/',views.login),
    path('get_validCode_img/',views.get_validCode_img),
    path('index/',views.index),
]

from django.http import JsonResponse
from django.shortcuts import render,HttpResponse
from PIL import Image      #图像处理模块，pip install pillow
from PIL import ImageDraw  #在图片上画画，处理验证码文字
from PIL import ImageFont  #字体
import random
from io import BytesIO   #内存管理的工具
from django.contrib import auth
 
 
#登录
def login(request):
    if request.method == 'POST':    #Ajax以POST方式提交登录信息
        response = {'user': None,'msg': None}    #定义Ajax请求的返回值
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')
        valid_code_str = request.session.get('valid_code_str')    #获取session保存的验证码的值
 
        if valid_code.upper() == valid_code_str.upper():          #和用户输入的验证码进行比对验证，不区分大小写
            user = auth.authenticate(username=user,password=pwd)  #登录信息验证
            if user:
                auth.login(request,user)  #登录状态保持
                response['user'] = user.username
            else:
                response['msg'] = 'username or password error'
 
        else:
            response['msg'] = 'valid code error'
 
        return JsonResponse(response)   #返回验证的最终结果JSON数据
 
    return render(request,'login.html')
 
 
 
#登录的验证码
def get_validCode_img(request):
 
    def get_random_color():    #定义一个随机生成图片的颜色的函数，用于生成图片的颜色
        return (random.randint(0,255),random.randint(0,255),random.randint(0,255))
 
    img = Image.new("RGB",(270,40),color=get_random_color())   #创建一个图片对象img
 
    draw = ImageDraw.Draw(img)       #创建一个画笔对象，在img上画画
    font = ImageFont.truetype("static/blog_app/font/AaMingYueJiuLinTian.ttf",size=30)   #创建字体，字体文件需要下载，第一个参数为字体文件的路径
 
    valid_code_str = ""  #用于保存验证码
    for i in range(5):
        random_num = str(random.randint(0,9))   #随机数字
        random_low_alpha = chr(random.randint(95,122))   #随机小写字母
        random_upper_alpha = chr(random.randint(65,90))  #随机大写字母
        random_char = random.choice([random_num,random_low_alpha,random_upper_alpha])   #三选一赋值给random_char
        draw.text((i*20+80,5),random_char,get_random_color(),font=font)   #在img上写字
 
        valid_code_str += random_char    #保存验证码
 
    # with open('validCode.png','wb') as f:         #创建一个文件句柄
    #     img.save('f','png')                       #将图片写到文件中去，但是是写到磁盘中，格式为：‘png’
    # with open('validCode.png','rb') as f:
    #     data = f.read()                           #将图片从磁盘读出来
 
    request.session["valid_code_str"] = valid_code_str   # ***将当前的验证码的值 保存到用户的session中，在用户登录的时候，和用户输入的验证码做比对验证
 
    #上面的文件操作是在磁盘的操作，不太好，下面是在内存中操作
    f = BytesIO()        #创建一个内存句柄
    img.save(f,'png')    #将图片存到内存中
    data = f.getvalue()  #再从内存中获取图片给data
 
    return HttpResponse(data)    #返回图片
 
 
def index(request):
    return HttpResponse('登录成功')

{% load static %}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="{% static 'blog_app/bootstrap/css/bootstrap.css' %}">
    <script src="{% static 'blog_app/jq.js' %}"></script>
</head>
<body>
    <h3>登录</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form>
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="user">用户名</label>
                        <input type="text" id="user" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码</label>
                        <input type="password" id="pwd" class="form-control">
                    </div>
 
                    <div class="form-group">
                        <label for="">验证码</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="valid_code form-control" id="valid_code">
                            </div>
                        <div class="col-md-6">
                            <img src="/get_validCode_img/" alt="验证码图片" width="270" height="40" id="valid_code_img">
                        </div>
                    </div>
                    </div>
 
                    <input type="button" class="btn btn-info login_btn" value="登录" id="login_btn"><span class="error"></span>
                    <a href="/register/" class="btn btn-success">注册</a>
                </form>
            </div>
        </div>
    </div>
 
    <script>
        // 点击时刷新登录的验证码
        $('#valid_code_img').click(function(){
                $(this)[0].src +="?"
        })
 
        // 登录验证码验证
        $('#login_btn').click(function(){
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    user: $('#user').val(),
                    pwd: $('#pwd').val(),
                    valid_code: $('#valid_code').val(),
                    csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),   // 需要自己组csrf_token键值
                },
                success: function (res) {           // res接受登录验证后返回的数据
                    console.log(res)
 
                    if(res.user){      // 如果存在user,即验证通过
                        location.href="/index/"    //这一步表示：如果验证成功，则跳转到'/index/'路径
                    }
                    else {              // 如果验证失败，则把错误信息显示到页面的span标签中，提示用户
                        $('.error').text(res.msg).css({color: 'red'})
                    }
                }
            })
        })
    </script>
</body>
</html>