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 是轻 ...
随机推荐
- 进阶 stack smashing--canary 报错利用 && environ泄露栈地址
进阶 stack smashing--canary 报错利用 && environ泄露栈地址 这部分是对进阶stack smashing的使用,以及对 environ的认识,我们可以看 ...
- redis 简单整理——redis 的字符串基本结构和命令[二]
前言 简单介绍一下redis的基本结构和命令. 正文 redis有5种基本结构: 字符串 哈希 列表 集合 有序集合 那么就来看下其基本命令吧. 通用命令键: keys * 查看全部键,一般不怎么用. ...
- js es6系列——map函数
正文 map,必要解释就是map不是地图的意思,而是映射的意思. 这里就简单的介绍了这个map了. array.map(callback,[ thisObject]); 看下这个案例后,我们发现了就发 ...
- 【SSH通道数据库连接池】连接远程linix服务器上面的mysql
首先,我用的是阿里的druid数据库连接池,其次,需要第三方jar包,maven坐标如下: <dependency> <groupId>com.jcraft</group ...
- ArcPy自动绘制大量地图并设置地图要素：Python
本文介绍基于Python语言中ArcPy模块,实现ArcMap自动批量出图,并对地图要素进行自定义批量设置的方法. 1 任务需求 首先,我们来明确一下本文所需实现的需求. 现有通过Pyth ...
- 从MVC到云原生：CBU研发体系演进之路
简介: 本文对过去十年 CBU 在研发方式和技术架构上的探索做一个简要的回顾总结,以及对未来的展望. 前言 CBU作为集团内最早成立的几个BU之一,有着多年丰富的业务沉淀,而CBU的技术也伴随着业务一 ...
- iOS 端容器之 WKWebView 那些事
简介: 本文主要是关于在端容器设计开发过程中,WKWebView 使用上遇到的一些问题和解决办法 作者 | 驽良 来源 | 阿里技术公众号 一 背景 熟悉 iOS\macOS Hybrid 混合 ...
- [FAQ] 没有docker用户组，怎么让普通用户有权限操作docker
如果没有docker用户组,可以通过以下步骤让普通用户有权限操作docker: 创建一个名为docker的用户组: sudo groupadd docker 将当前用户添加到docker用户组中: ...
- 一键入门到精通：sd-webui-prompt-all-in-one 项目大揭秘！
今天向大家推荐一个宝藏项目.在创意无限的AI艺术生成世界中,sd-webui-prompt-all-in-one 项目如一股清流,为广大创作者和开发者带来了前所未有的便捷和灵感.这不仅仅是一个项目,它 ...
- 羽夏壳世界—— PE 解析的实现
写在前面 此系列是本人一个字一个字码出来的,包括代码实现和效果截图. 如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后 ...