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>

　　

项目结构：

Django——基于Ajax的登录功能实现的更多相关文章

  1. django BBS project login登录功能实现

    1.models from django.db import models # Create your models here. from django.contrib.auth.models imp ...

  2. 基于ajax的登录

    验证码 当登录一个网站的时候往往会有验证码. python生成随机验证码,需要使用到 PIL 模块 安装 : pip3 install pillow 1. 创建图片        我们现在写的验证码属 ...

  3. Django 基于Ajax & form 简单实现文件上传

    前端实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...

  4. Django中 基于form的注册,基于ajax的登录

    1 form.py中写register的的form组件 from django import forms class Register(forms.Form): # 注册的form username ...

  5. django 通过ajax完成登录

    一. 在users/views.py中加代码: from django.http import HttpResponse class LoginView(View): ""&quo ...

  6. Django基于Form之登录和注册

    1.创建Forms文件,内容略多,大家将就着看,不懂请留言 #!/usr/bin/env python # -*- coding: utf8 -*- #__Author: "Skiler H ...

  7. 基于Shiro的登录功能 设计思路

    认证流程 Shiro的认证流程可以看作是个“有窗户黑盒”, 整个流程都有框架控制,对外的入口只有subject.login(token);,这代表“黑盒” 流程中的每一个组件,都可以使用Spring ...

  8. Django自带的登录功能

    https://www.cnblogs.com/wspblog/p/6634262.html

  9. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  10. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

随机推荐

  1. 关于集群节点timeline不一致的处理方式

    关于集群节点 timeline 不一致的处理方式 本文出处:https://www.modb.pro/db/400223 在 PostgreSQL/MogDB/openGauss 数据库日常维护过程中 ...

  2. Python3学习－－正则表达式

    import rer = re.match("Chen\d+","Chen123ronghua123")r = re.match(".+", ...

  3. 学习Source Generators之了解Source Generators的应用场景

    前面的文章我们都初步学习了Source Generators的使用方式以及做了一些简单的代码生成工具. 但是Source Generators除了做自动代码生成之外,还能有别的应用场景,本文来了解一下 ...

  4. UE4中HTC Vive 手柄如何抓取物体

    想知道 HTC Vive 手柄如何抓取物体? HTC Vive 的手柄有许多功能,在游戏里你可以用手柄射箭,可以用手柄拾取木棍等等,但是这些是如何设置的呢?来看看我们的公开课教程吧. 本期教程为上半部 ...

  5. web 报表工具如何自适应

    现在的报表用户已经不再将报表作为一个单纯的报表工具看待了,有时候也会当作页面工具来使用,这时为了页面显示工整美观,就需要报表能够自适应宽度.下面我们就基于润乾报表来讲一下是如何做到自适应展现报表. 产 ...

  6. xilinx的serdes接收时钟坑

    ilinx的7 series fpga transceivers wizard用于自定义的serdes编码. 要选择多个serdes端口,如下图,点击对应的名称,然后右边选择use该设备就可以. 生成 ...

  7. leetcode - 子数组最大平均值

    给定 n 个整数,找出平均数最大且长度为 k 的连续子数组,并输出该最大平均数. 示例: 输入:[1,12,-5,-6,50,3], k = 4 输出:12.75 解释:最大平均数 (12-5-6+5 ...

  8. 如何使用 Serverless Devs 部署静态网站到函数计算（上）

    简介:部署个静态网站到函数计算~ ​ 前言 公司经常有一些网站需要发布上线,对比了几款不同的产品后,决定使用阿里云的函数计算(FC)来托管构建出来的静态网站. FC 弹性实例自带的500 Mb 存储空 ...

  9. Flagger on ASM——基于Mixerless Telemetry实现渐进式灰度发布系列 2 应用级扩缩容

    简介: 应用级扩缩容是相对于运维级而言的.像监控CPU/内存的利用率就属于应用无关的纯运维指标,针对这种指标进行扩缩容的HPA配置就是运维级扩缩容.而像请求数量.请求延迟.P99分布等指标就属于应用相 ...

  10. 如何在零停机的情况下迁移 Kubernetes 集群

    ​简介:本文将通过集群迁移的需求.场景以及实践方式,介绍如何基于阿里云容器服务 ACK,在零停机的情况下迁移 Kubernetes 集群. 作者:顾静(子白)|阿里云高级研发工程师:谢瑶瑶(初扬)|阿 ...