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>
项目结构：
Django——基于Ajax的登录功能实现的更多相关文章
- django BBS project login登录功能实现
1.models from django.db import models # Create your models here. from django.contrib.auth.models imp ...
- 基于ajax的登录
验证码 当登录一个网站的时候往往会有验证码. python生成随机验证码,需要使用到 PIL 模块 安装 : pip3 install pillow 1. 创建图片 我们现在写的验证码属 ...
- Django 基于Ajax & form 简单实现文件上传
前端实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- Django中 基于form的注册,基于ajax的登录
1 form.py中写register的的form组件 from django import forms class Register(forms.Form): # 注册的form username ...
- django 通过ajax完成登录
一. 在users/views.py中加代码: from django.http import HttpResponse class LoginView(View): ""&quo ...
- Django基于Form之登录和注册
1.创建Forms文件,内容略多,大家将就着看,不懂请留言 #!/usr/bin/env python # -*- coding: utf8 -*- #__Author: "Skiler H ...
- 基于Shiro的登录功能 设计思路
认证流程 Shiro的认证流程可以看作是个“有窗户黑盒”, 整个流程都有框架控制,对外的入口只有subject.login(token);,这代表“黑盒” 流程中的每一个组件,都可以使用Spring ...
- Django自带的登录功能
https://www.cnblogs.com/wspblog/p/6634262.html
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
随机推荐
- k8s之持久存储卷PV和PVC
一.简介 在前边文章中可以看到,Kubernetes中依赖后端存储包括:NFS.Ceph.块存储等存储设备实现数据的远程存储以及数据持久化. 使用这些网络存储资源需要工程师对存储有一定的了解,并需要在 ...
- The First 寒假集训の小总结
转眼间十五天的寒假集训已经结束,也学习到了许多新知识,dp,线段树,单调栈和单调队列......,假期过得还是很有意义的,虽然我的两次考试成绩不尽人意(只能怪我自己没有好好理解知识点还有好好做题),但 ...
- ddddocr基本使用和介绍
ddddocr基本使用和介绍 摘要:在使用爬虫登录网站的时候,经常输入用户名和密码后会遇到验证码,这时候就需要用到今天给大家介绍的python第三方库ddddocr,ddddocr是一款强大的通用开源 ...
- 力扣511(MySQL)-游戏玩法分析Ⅰ（简单）
题目: 活动表 Activity: 写一条 SQL 查询语句获取每位玩家 第一次登陆平台的日期. 查询结果的格式如下所示: 解题思路: 方法一:使用dense_rank() over(partiti ...
- 谢老师2024春 - Day2：期望DP
Day2:期望DP A - CF148D Bag of mice 设 \(dp_{i,j}\) 表示还剩下 \(i\) 只白鼠,\(j\) 只黑鼠 A 的胜率. 大家都没有拿到白鼠,那么 B 赢, ...
- 基于 eBPF 的 Kubernetes 可观测实践
简介: 阿里云可观测团队构建了 kubernetes 统一监控,无侵入式地提供多语言.应用性能黄金指标,支持多种协议,结合 Kubernetes 管控层与网络系统层监控,提供全栈一体式的可观测体验.通 ...
- 阿里本地生活全域日志平台 Xlog 的思考与实践
简介: 作者:王宇(御田).当你踏进了编程的领域,代码和日志将是你最重要的伙伴".基于日志的问题排查是研发效能领域的重要部分,阿里集团本地生活在支撑多生态公司.多技术栈的背景下,逐渐沉淀了一 ...
- 史上最强《Java 开发手册》泰山版王者归来！
阿里妹导读:潜力修炼一年之久的<Java 开发手册(泰山版)>今天发布!此次共计新增 34 条规约,修改描述 90 处,其中错误码规则更是第一次提出完整的解决方案,大家参考错误码示例表,欢 ...
- 编译优化 | LLVM代码生成技术详解及在数据库中的应用
简介: 作者:长别 1. 前言 随着IT基础设施的发展,现代的数据处理系统需要处理更多的数据.支持更为复杂的算法.数据量的增长和算法的复杂化,为数据分析系统带来了严峻的性能挑战.近年来,我们可以在数据 ...
- dotnet C# 通过 Vortice 使用 Direct2D 特效入门
本文将告诉大家如何通过 Vortice 使用 D2D 的特效 本文属于 DirectX 系列博客,更多 DirectX 和 D2D 以及 Vortice 库的博客,请参阅我的 博客导航 上一篇: Di ...