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. JVM—垃圾收集器

    JVM-垃圾收集器 什么是垃圾 没有被引用的对象就是垃圾. 怎么找到垃圾 引用计数法 当对象引用消失,对象就称为垃圾. 对象消失一个引用,计数减去一,当引用都消失了,计数就会变为0.此时这个对象就会变 ...

  2. 支持API 9的Sample已上新，速来拿走

    原文:https://mp.weixin.qq.com/s/sPDG5sG5F_gTp0cE1VV3gQ,点击链接查看更多技术内容.   今年的华为开发者大会上我们发布了HarmonyOS 3.1 D ...

  3. k8s之helm部署mysql集群

    一.简介 Helm Helm 是 Kubernetes 的包管理器. Chart Helm使用的包格式称为 chart.chart存储在Chart Repository. chart就是一个描述Kub ...

  4. mysql 必知必会整理—组合查询与全文搜索[九]

    前言 简单整理一下组合查询与全文搜索. 正文 什么是组合查询,就是我们常说的交并补集. 直接上例子. 举一个例子,假如需要价格小于等于5的所有物品的一个列表,而且还想包括供应商1001和1002生产的 ...

  5. springboot 整合webservice 相关说明

    1.环境依赖 jdk8, springboot 2.3.12.release,cxf版本需要根据springboot版本修改,方法:查看springboot版本的发布日期,然后根据日期找相近的两个版本 ...

  6. Vue3实现图片滚轮缩放和拖拽

    在项目开发中遇到一个需求: 1:用鼠标滚轮可对图片进行缩放处理 2:点击按钮可对图片进行缩放处理 3:可对图片进行拖拽处理 我在开发中通过自己实现与百度查看优秀的铁子进行了两种类型的使用 <te ...

  7. 力扣1132(MySQL)-报告的记录Ⅱ（中等）

    题目: 编写一段 SQL 来查找:在被报告为垃圾广告的帖子中,被移除的帖子的每日平均占比,四舍五入到小数点后 2 位. Actions 表: Removals 表: Result 表: 2019-07 ...

  8. K8s 网关选型初判：Nginx 还是 Envoy？

    简介: 本文将从性能和成本.可靠性.安全性 3 方面,对两大开源实现进行比对,希望对正在做 K8s 网关选型的企业有所借鉴. 作者:张添翼(澄潭) 为了避免混淆,我们先对一些关键定义做一些厘清: 传统 ...

  9. 如何高效完成ECS多环境部署？

    ​简介:通过本文,你可以了解到,如何通过云效流水线有效拉通开发与运维,打破二者之间的壁垒墙,让开发与运维高效联动.在软件开发和部署过程中,我们的软件往往需要在不同的运行环境中运行,例如:开发人员本地开 ...

  10. Kubernetes 入门教程

    简介:本文是一篇 kubernetes(下文用 k8s 代替)的入门文章,将会涉及 k8s 的架构.集群搭建.一个 Redis 的例子,以及如何使用 operator-sdk 开发 operator ...