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. 深度优先搜索-overview

    深度优先搜索的实现一般有2种方式 递归 //todo 非递归-借助stack 因为栈后进先出的特点,使其很容易实现树/图的深度优先遍历.如果是BFS,那非递归经常借助queue. 整个过程可以被描述为 ...

  2. pySpark-merge多个dataframe

    当需要merge多个spark datafame的时候: from functools import reduce buff = [] for pdfs in [pdf1, pdf1,pdf3...] ...

  3. mysql 必知必会整理—sql 计算函数[六]

    前言 简单整理一下sql的计算函数. 正文 函数没有SQL的可移植性强 能运行在多个系统上的代码称为可移植的(portable).相对来说,多数SQL语句是可移植的,在SQL实现之间有差异时,这些差异 ...

  4. Django框架——Q查询进阶、ORM查询优化、事务操作、字段类型、字段参数、Ajax、Content—Type、ajax携带文件

    Q查询进阶 from django.db.models import Q q_obj = Q() # 1.产生q对象 q_obj.connector = 'or' # 默认多个条件的连接是and可以修 ...

  5. vue 弹出框挂载富文本，富文本（）无法实例化问题

    因为elementUI的dialog组件,他是v-if渲染,再页面刚加载时,这个弹出框还未进行挂载,我们就让他v-show显示. ,富文本实例再mounted里面挂载即可

  6. 【Oracle】力扣简单的练习题

    Oracle力扣简单的练习题 请你编写一个 SQL 查询来交换所有的 'f' 和 'm' /* Write your PL/SQL query statement below */ /******** ...

  7. 力扣584(MySQL)-寻找用户推荐人（简单）

    题目: 给定表 customer ,里面保存了所有客户信息和他们的推荐人. 写一个查询语句,返回一个客户列表,列表中客户的推荐人的编号都 不是 2. 对于上面的示例数据,结果为:  解题思路: 本题最 ...

  8. 第 1 章 Python 爬虫概念与 Web 基础

    第 1 章 Python 爬虫概念与 Web 基础 1.1 爬虫概念 1.1.1 什么是爬虫 爬虫,即网络爬虫,又称网络蜘蛛(Web Spider),是一种按照一定规则,用来自动浏览或抓取万维网数据的 ...

  9. [GPT] 哪些职业面临 AI 威胁？

      随着人工智能技术的不断发展和应用,一些重复性.机械化或标准化程度高的职业可能会面临被自动化取代的威胁.例如: 工厂生产线上的装配工人,因为许多工厂已经开始使用自动化机器人完成装配任务: 行政助理, ...

  10. github 解决推拉代码提示 REMOTE HOST IDENTIFICATION HAS CHANGED 失败

    本文记录最近 github 推送或拉取代码时提示 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 而失败的解决方法 报错提示如下 @@@@@@@@@@ ...