django 通过ajax完成邮箱用户注册、激活账号的方法
作者:雪落忆海 发布时间:2022-02-19 05:59:57
一、图片验证码
django-simple-captcha配置
1.在pycharm中,File====》Settings====》Project:项目名====》Project Interpreter====》+====》搜django-simple-captcha选择0.55以上版本,然后点install package 按钮进行安装
2.项目名/urls.py中添加代码:
from django.urls import path,include
......
from users.views import IndexView
......
urlpatterns = [
......
#配置验证码
path('captcha/',include('captcha.urls')),
#首页url
path('', IndexView.as_view(), name='index'),
......
]
3.settings.py中添加一个注册信息
INSTALLED_APPS = [
......
'captcha'
]
4.打开终端Terminal执行更新数据库命令:
python manage.py makemigrations
python manage.py migrate
5.在users目录下新建form.py文件:
from django import forms
from captcha.fields import CaptchaField
......
class RegisterForm(forms.Form):
"""注册信息的验证"""
......
captcha=CaptchaField(error_messages={'invalid':'验证码错误'})
......
6.在users/views.py中添加代码:
from users.form import RegisterForm
class IndexView(View):
"""首页"""
def get(self,request):
register_form=RegisterForm()
return render(request,'index.html',{'register_form':register_form})
7.在前端首页index.html中显示验证码、输入框
html
<div class="modal fade" id="register" tabindex="-1" role="dialog">
......
<!--模态框中关于注册的内容start-->
<div class="modal-body">
......
<P><div style="display: inline-block;width:100px;text-align: center"><b >验证码:</b></div>
<!--验证码start-->
<div class="cap">{{ register_form.captcha }}</div>
<!--验证码end-->
</P>
{% csrf_token %}
</form>
<p><div style="margin-left: 100px;background-color: orangered;width:150px;text-align: center"><b></b></div></p>
</div>
<!--模态框中关于注册的内容end-->
......
css
<style>
.cap{
display: inline-block;
width: 280px;
height: 36px;
}
.cap img{
float: right;
}
</style>
js 跟刷新验证码相关(需要先引入jQuery)
$(function(){
$('.captcha').css({
'cursor': 'pointer'
});
/*# ajax 刷新*/
$('.captcha').click(function(){
console.log('click');
$.getJSON("/captcha/refresh/",function(result){
$('.captcha').attr('src', result['image_url']);
$('#id_captcha_0').val(result['key'])
});
});
})
二、ajax邮箱注册
1.在前端跟注册绑定的模态框代码写成:
html
<div class="modal fade" id="register" tabindex="-1" role="dialog">
......
<div class="modal-body">
<form id="registerform" action="#" method="post">
<p>
<div class="re-input"><b>用户名:</b></div>
<input type="text" name="user" placeholder="用户名">
<div class="msg"><b id="user-msg"></b></div>
</p>
<p>
<div class="re-input"><b>邮箱:</b></div>
<input type="text" name="email" placeholder="邮箱">
<div class="msg"><b id="email-msg">2222</b></div>
</p>
<p>
<div class="re-input"><b >密码:</b></div>
<input type="password" name="pwd" placeholder="密码(不少于6位)">
<div class="msg"><b id="pwd-msg">222</b></div>
</p>
<p>
<div class="re-input"><b >确认密码:</b></div>
<input type="password" name="pwd2" placeholder="确认密码">
<div class="msg"><b id="pwd-msg2">22</b></div>
</p>
<P><div class="re-input"><b >验证码:</b></div>
<div class="cap">{{ register_form.captcha }}</div>
<div class="msg"><b id="captcha-msg">2</b></div>
</P>
{% csrf_token %}
</form>
<p><div style="margin-left: 100px;color: white;background-color: green;width:180px;text-align: center"><b id="active-msg"></b></div></p>
......
<button type="button" class="btn btn-primary" id="registerbtn">确认注册</button>
......
css
<style>
.cap{
display: inline-block;
width: 280px;
height: 36px;
}
.cap img{
float: right;
}
.re-input{
display: inline-block;
width:100px;
text-align: center
}
.msg{
margin-left: 100px;
background-color: orangered;
width:180px;
text-align: center
}
</style>
跟ajax注册相关的js代码:
$("#registerbtn").click(function() {
$.ajax({
cache:false,
type:"POST",
url:"{% url 'users:register' %}",
dataType:'json',
data:$('#registerform').serialize(),
//通过id找到提交form表单,并将表单转成字符串
async:true,
//异步为真,ajax提交的过程中,同时可以做其他的操作
success:function (data) {
//jquery3以后,会将回传过来的字符串格式的data自动json解析不用再使用一遍JSON.parse(data)了,不然反而会在控制台报错
if(data.status){
$('#active-msg').html(data.status);
} else{
if(data.user){
username_msg=data.user.toString();
$('#user-msg').html('用户名'+ username_msg);
}
if(data.email){
email_msg=data.email.toString();
$('#email-msg').html('邮箱'+ email_msg);
}
if(data.pwd){
password_msg=data.pwd.toString();
$('#pwd-msg').html('密码'+ password_msg);
}
if(data.captcha){
captcha_msg=data.captcha.toString();
$('#captcha-msg').html(captcha_msg);
}
msg=data.__all__.toString();
$('#active-msg').html(msg);
}
}
});
});
提升用户交互体验的js代码:
$("input").bind('input propertychange', function() {
$('#login-fail').html('');
$('#user-msg').html('');
$('#email-msg').html('');
$('#pwd-msg').html('');
$('#pwd-msg2').html('');
$('#captcha-msg').html('');
});
2.users/form.py代码:(要验证的字段名跟前端input框的name值要保持一致!)
from django import forms
from captcha.fields import CaptchaField
from .models import UserProfile
class RegisterForm(forms.Form):
"""注册信息的验证"""
user = forms.CharField(required=True, error_messages={'required': '用户名不能为空.'})
email=forms.EmailField(required=True,error_messages={'required': '邮箱不能为空.'})
pwd = forms.CharField(required=True,
min_length=6,
error_messages={'required': '密码不能为空.', 'min_length': "至少6位"})
pwd2 = forms.CharField(required=True,
min_length=6,
error_messages={'required': '密码不能为空.', 'min_length': "至少6位"})
captcha=CaptchaField(error_messages={'invalid':'验证码错误'})
def clean(self):
'''验证两次密码是否一致'''
p1=self.cleaned_data.get('pwd')
p2=self.cleaned_data.get('pwd2')
if p1!=p2:
raise forms.ValidationError('两次输入密码不一致')
else:
return self.cleaned_data
3.users/views.py中与注册相关的代码:
......
from django.http import HttpResponse
from .models import UserProfile,ShopProfile
from users.form import RegisterForm
from django.contrib.auth.hashers import make_password
import json
class RegisterView(View):
"""邮箱注册"""
def post(self, request):
register_form=RegisterForm(request.POST)
if register_form.is_valid():
user_name=request.POST.get('user','')
email=request.POST.get('email','')
pass_word=request.POST.get('pwd','')
u=UserProfile.objects.filter(username=user_name).count()
e=UserProfile.objects.filter(email=email).count()
if u or e:
return HttpResponse('{"status":"该用户名或邮箱已被占用!"}')
else:
user_profile=UserProfile()
user_profile.username=user_name
user_profile.email=email
user_profile.password=make_password(pass_word)
user_profile.is_active=False
user_profile.save()
return HttpResponse('{"status":"注册成功请去邮箱激活!"}')
msg=register_form.errors
msg=json.dumps(msg)
return HttpResponse(msg)
4.配置users/urls.py注册路由:
......
from .views import RegisterView
.....
urlpatterns = [
......
path('register/',RegisterView.as_view(),name='register'),
......
]
三、邮箱激活已注册的账号:
1.新建个数据表存放邮箱激活码:
在users/models.py中增加代码:
class EmailVerifyRecord(models.Model):
"""邮箱激活码"""
code=models.CharField(max_length=20,verbose_name='验证码')
email=models.EmailField(max_length=50,verbose_name='邮箱')
send_type=models.CharField(verbose_name='验证码类型',choices=(('register','注册'),('forget','忘记密码')),
max_length=20)
send_time=models.DateTimeField(verbose_name='发送时间',default=datetime.now)
class Meta:
verbose_name='邮箱验证码'
verbose_name_plural=verbose_name
def __str__(self):
return '{0}({1})'.format(self.code,self.email)
在users/adminx.py中注册数据表:
......
from .models import EmailVerifyRecord
......
class EmailVerifyRecordAdmin(object):
list_display = ['code', 'email', 'send_type', 'send_time']
search_fields = ['code', 'email', 'send_type']
list_filter = ['code', 'email', 'send_type', 'send_time']
......
xadmin.site.register(EmailVerifyRecord,EmailVerifyRecordAdmin)
打开终端Terminal执行更新数据库命令:
python manage.py makemigrations
python manage.py migrate
2.写发邮件的脚本:在apps/users/新建utils/email_send.py
from random import Random
from users.models import EmailVerifyRecord
from django.core.mail import send_mail
from xyw.settings import EMAIL_FROM
def random_str(randomlength=8):
str=''
chars='AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789'
length=len(chars)-1
random=Random()
for i in range(randomlength):
str+=chars[random.randint(0,length)]
return str
def send_register_email(email,send_type='register'):
email_record=EmailVerifyRecord()
code=random_str(16)
email_record.code=code
email_record.email=email
email_record.send_type=send_type
email_record.save()
email_title=''
email_body=''
if send_type=='register':
email_title='雪易网注册激活链接'
email_body='请点击下面的链接激活你的账号:http://127.0.0.1:8000/active/{0}'.format(code)
send_status=send_mail(email_title,email_body,EMAIL_FROM,[email])
if send_status:
pass
elif send_type=='forget':
email_title = '雪易密码重置链接'
email_body = '请点击下面的链接重置你的密码:http://127.0.0.1:8000/reset/{0}'.format(code)
send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
if send_status:
pass
3.在settings.py中追加发送邮件的配置代码:
EMAIL_HOST='smtp.sina.cn'
EMAIL_PORT=25
EMAIL_HOST_USER='xxxxxxxx@sina.cn' #你的邮箱
EMAIL_HOST_PASSWORD='********'
EMAIL_USE_TLS=False
EMAIL_FROM='xxxxxxx1@sina.cn' #同样是你的邮箱,跟上面都是发信者邮箱
#我用的新浪的,也可以用别的
4.开启新浪邮箱的smtp服务,不然不能自动发邮件的,步骤如下:
登录新浪邮箱====》设置区====》客户端pop/imp/smtp====》Pop3/SMTP服务====》服务状态:开启====》保存
5.增加激活功能
在users/views.py中增加激活类ActiveUserView(View)代码:
......
from .models import EmailVerifyRecord
......
class ActiveUserView(View):
"""激活账户"""
def get(self,request,active_code):
all_records=EmailVerifyRecord.objects.filter(code=active_code)
if all_records:
for record in all_records:
email=record.email
user=UserProfile.objects.get(email=email)
user.is_active=True
user.save()
return render(request,'index.html')
6.在users/views.py中
对注册类 RegisterView(View)增加发送激活邮件的代码:
......
from apps.utils.email_send import send_register_email
......
class RegisterView(View):
"""邮箱注册"""
def post(self, request):
......
user_profile.save()
#发送邮件代码start
send_register_email(email,'register')
#发送邮件代码end
return HttpResponse('{"status":"注册成功请去邮箱激活!"}')
对登录LoginView(View)增加验证账户激活与否的代码:
class LoginView(View):
"""用户登录"""
def post(self,request):
user_name=request.POST.get("username","")
pass_word=request.POST.get("pwd","")
user=authenticate(username=user_name,password=pass_word)
if user is not None:
#验证账户是否已经激活start
if user.is_active:
login(request,user)
return HttpResponse('{"status":"success"}')
else:
return HttpResponse('{"status":"fail","msg":"账户未激活"}')
#验证账户是否已经激活end
else:
return HttpResponse('{"status":"fail","msg":"用户名或密码错误"}')
至此完成了用邮箱注册及激活,很多时候,激活邮件都会被邮箱自动放入垃圾箱,而且从邮件点击激活链接的时候,还会被提示一些警告信息,可以说通过邮箱注册各种不如通过短信注册,但是……省钱啊!^_^
来源:http://www.cnblogs.com/xuepangzi/p/8811148.html
猜你喜欢
- 安装PIL库的时候,直接提示:Python version 2.7 required, which was not found in the
- 认知心理学家Donald A. Norman将人类的行动分解成七个阶段:1. 确定目标2. 确定意图3. 明确行动内容4. 执行5. 感知外
- 错误号 错误信息5 &n
- 返回页面的类容,weburl为页面urlFunction GetBytes(weburl) '创建
- #BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大#TYPE:
- <%@ Language=VBScript %><HTML><HEAD>
- 本文实例讲述了python使用wxPython打开并播放wav文件的方法。分享给大家供大家参考。具体实现方法如下:''
- 单线程同步使用socket传输数据使用json序列化消息体struct将消息编码为二进制字节串,进行网络传输消息协议// 输入{  
- 简单的说,组织体系指的就是组织信息的方式。看了一堆拗口的定义后,我根据自己的理解画了下面这个图:从上图看出,同样的图形元素由于采用了不同的组
- 可能接触网站与编程设计的人都知道,一个属性值需要引号包括起来,但是有的时候就是因为没有正确设定引号类型,导致程序出错,就连我自己也是这样,我
- 配置Laravel 的邮件服务可以通过 config/mail.php 配置文件进行配置。邮件中的每一项都在配置文件中有单独的配置项,甚至是
- function.js<!--function getObject(objectId) { &nbs
- 最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份工
- ASP开发中有用的function集合,挺有用处的!希望大家保留!<% '**
- 在我们关于SQL服务器安全系列的这文章里,我们的目标是向你提供安全安装SQL服务器所需要的工具和信心,这样的话,你有价值的数据就会受到保护,
- 本文实例讲述了php tpl模板引擎定义与使用。分享给大家供大家参考,具体如下:tpl.php<?phpnamespace tpl;/
- 什么是deferdefer用来声明一个延迟函数,把这个函数放入到一个栈上, 当外部的包含方法return之前,返回参数到调用方法之前调用,也
- 熟悉css的开发者一定知道图像替换技术,也深知它的意义,Dave Shea 曾在他的一篇文章对此做了详细的总结,参看 Dave Shea’s
- 我想让一片文章,每到3000字就分到下一条插入到数据库,求高手 <%Dim Content Conte
- 当浏览者进入你的网站首页时或提交某些表单时,会弹出网站声明或提交说明等文本信息框,引导浏览者使用你的网站。实现这个功能我们是用Dreamwe