django 通过ajax完成邮箱用户注册、激活账号的方法


Posted in Python onApril 17, 2018

一、图片验证码

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":"用户名或密码错误"}')

至此完成了用邮箱注册及激活,很多时候,激活邮件都会被邮箱自动放入垃圾箱,而且从邮件点击激活链接的时候,还会被提示一些警告信息,可以说通过邮箱注册各种不如通过短信注册,但是……省钱啊!^_^

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
全面解读Python Web开发框架Django
Jun 30 Python
Python之eval()函数危险性浅析
Jul 03 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
Jan 20 Python
Python 中 list 的各项操作技巧
Apr 13 Python
Python函数式编程
Jul 20 Python
Python3实战之爬虫抓取网易云音乐的热门评论
Oct 09 Python
解决vscode python print 输出窗口中文乱码的问题
Dec 03 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
Dec 05 Python
python+numpy实现的基本矩阵操作示例
Jul 19 Python
numpy.meshgrid()理解(小结)
Aug 01 Python
python实现的config文件读写功能示例
Sep 24 Python
Python制作春联的示例代码
Jan 22 Python
对numpy中array和asarray的区别详解
Apr 17 #Python
django 开发忘记密码通过邮箱找回功能示例
Apr 17 #Python
Python实现购物车程序
Apr 16 #Python
神经网络(BP)算法Python实现及应用
Apr 16 #Python
python读取视频流提取视频帧的两种方法
Oct 22 #Python
python读取和保存视频文件
Apr 16 #Python
Python读取视频的两种方法(imageio和cv2)
Apr 15 #Python
You might like
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
使用python绘制常用的图表
2016/08/27 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
军训学生自我鉴定
2014/02/12 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
老公保证书
2015/01/17 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL