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操作日期和时间的方法
Mar 11 Python
python实现进程间通信简单实例
Jul 23 Python
详解supervisor使用教程
Nov 21 Python
使用python爬虫实现网络股票信息爬取的demo
Jan 05 Python
Numpy数组的保存与读取方法
Apr 04 Python
Python对多属性的重复数据去重实例
Apr 18 Python
Python3 关于pycharm自动导入包快捷设置的方法
Jan 16 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
Jul 22 Python
面向对象学习之pygame坦克大战
Sep 11 Python
Python: 传递列表副本方式
Dec 19 Python
Python爬虫之爬取淘女郎照片示例详解
Jul 28 Python
Django框架安装及项目创建过程解析
Sep 14 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中的Class的几点个人看法
2006/10/09 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
js计算精度问题小结
2013/04/22 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Python数据类型详解(二)列表
2016/05/08 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
animation和transition的区别
2020/10/12 HTML / CSS
写自荐信的七个技巧
2013/10/15 职场文书
标准导师推荐信(医学类)
2013/10/28 职场文书
拉拉队口号
2014/06/16 职场文书
代领毕业证委托书
2014/08/02 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
八一建军节慰问信
2015/02/14 职场文书
倡议书格式及范文
2015/04/29 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技