Django——基于forms组件和ajax的注册功能
path('register/',views.register)
#注册的form表单
from django import forms
from django.forms import widgets
class RegForm(forms.Form):
user = forms.CharField(max_length=32,widget=widgets.TextInput(attrs={'class':'form-control'}),label='用户名')
pwd = forms.CharField(max_length=32,widget=widgets.PasswordInput(attrs={'class':'form-control'}),label='密码')
re_pwd = forms.CharField(max_length=32,widget=widgets.PasswordInput(attrs={'class':'form-control'}),label='确认密码')
email = forms.EmailField(max_length=32,widget=widgets.EmailInput(attrs={'class':'form-control'}),label='邮箱')
#注册
def register(request):
if request.is_ajax(): #这一步也可以用if request.method==POST判断
form = RegForm(request.POST)
response = {'user': None,'msg': None} #返回的数据,默认设置为 None
if form.is_valid():
#如果前端检验成功,返回校验后的正确信息
#这一步还需要把用户注册信息保存到数据库中
response['user'] = form.cleaned_data.get('user')
else:
#如果前端检验失败,返回错误信息
response["msg"] = form.errors
return JsonResponse(response)
form = RegForm()
return render(request,'register.html',{'form': form})
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="{% static 'blog_app/bootstrap/css/bootstrap.css' %}">
<script src="{% static 'blog_app/jq.js' %}"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>注册</h3>
<hr>
<form>
{% csrf_token %}
{% for field in form %} {# 循环form表单对象,field表示每一个字段 #}
<div class="form-group">
<label for="{{ field.auto_id }}">{{ field.label }}</label> {# field.auto_id表示生成表单时的id值 #}
{{field}}
</div>
{% endfor %}
<div class="form-group">
<label for="avatar">
头像
<img src="/static/blog_app/default.png" width="70px" height="70px" id="avatar_img">
</label>
<input type="file" id="avatar" style="display: none">
</div>
<input type="button" class="btn btn-success register_btn" value="注册" id="register_btn"><span class="error"></span>
</form>
</div>
</div>
</div>
<script>
// 头像预览
$('#avatar').change(function(){
// 获取用户选中的文件对象
var file_obj = $(this)[0].files[0]
// 获取文件对象的路径(使用文件阅读器)
var reader = new FileReader() // 创建一个文件阅读器对象
reader.readAsDataURL(file_obj) // 读出文件的路径
// 显示预览头像图片
reader.onload = function(){
$('#avatar_img').attr('src',reader.result)
}
})
// Ajax提交注册信息,数据以FormData的形式发送,组键值对
$('#register_btn').click(function (){
var formdata = new FormData()
formdata.append("user",$('#id_user').val())
formdata.append("pwd",$('#id_pwd').val())
formdata.append("re_pwd",$('#id_re_pwd').val())
formdata.append("email",$('#id_email').val())
formdata.append("avatar",$('#avatar')[0].files[0])
formdata.append("csrfmiddlewaretoken",$('[name="csrfmiddlewaretoken"]').val())
$.ajax({
url: '',
type: 'post',
contentType: false, //使用formdata提交时,必须配置的
processData: false, //使用formdata提交时,必须配置的
data: formdata,
success: function (data) {
// 回调函数
// 接收后端返回的信息,并进行打印
// 还可以通过返回的数据进行相应的前端错误提示,以及进行相应的路径跳转
console.log(data)
}
})
})
</script>
</body>
</html>
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>
标签:code,form,random,request,Django,forms,ajax,valid,user
From: https://www.cnblogs.com/mengdie1978/p/17374779.html