django 通过ajax完成邮箱用户注册、激活账号的方法
框架(架构)  /  管理员 发布于 6年前   197
一、图片验证码
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 makemigrationspython manage.py migrate
5.在users目录下新建form.py文件:
from django import formsfrom captcha.fields import CaptchaField......class RegisterForm(forms.Form): """注册信息的验证""" ...... captcha=CaptchaField(error_messages={'invalid':'验证码错误'}) ......
6.在users/views.py中添加代码:
from users.form import RegisterFormclass 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 formsfrom captcha.fields import CaptchaFieldfrom .models import UserProfileclass 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 HttpResponsefrom .models import UserProfile,ShopProfilefrom users.form import RegisterFormfrom django.contrib.auth.hashers import make_passwordimport jsonclass 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 makemigrationspython manage.py migrate
2.写发邮件的脚本:在apps/users/新建utils/email_send.py
from random import Randomfrom users.models import EmailVerifyRecordfrom django.core.mail import send_mailfrom xyw.settings import EMAIL_FROMdef 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 strdef 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=25EMAIL_HOST_USER='[email protected]' #你的邮箱EMAIL_HOST_PASSWORD='********'EMAIL_USE_TLS=FalseEMAIL_FROM='[email protected]' #同样是你的邮箱,跟上面都是发信者邮箱#我用的新浪的,也可以用别的
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":"用户名或密码错误"}')
至此完成了用邮箱注册及激活,很多时候,激活邮件都会被邮箱自动放入垃圾箱,而且从邮件点击激活链接的时候,还会被提示一些警告信息,可以说通过邮箱注册各种不如通过短信注册,但是……省钱啊!^_^
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号