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调用java的Webservice示例
Mar 10 Python
Python Web开发模板引擎优缺点总结
May 06 Python
详解Python网络爬虫功能的基本写法
Jan 28 Python
学习python之编写简单乘法口诀表实现代码
Feb 27 Python
python基础教程项目二之画幅好画
Apr 02 Python
python list是否包含另一个list所有元素的实例
May 04 Python
Python3.5多进程原理与用法实例分析
Apr 05 Python
python查找重复图片并删除(图片去重)
Jul 16 Python
Django框架视图介绍与使用详解
Jul 18 Python
python pygame实现滚动横版射击游戏城市之战
Nov 25 Python
通过实例解析Python调用json模块
Dec 11 Python
Python yield生成器和return对比代码实例
Apr 20 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
img的onload的另类用法
2008/01/10 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python使用turtule画五角星的方法
2015/07/09 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
分析python请求数据
2018/08/19 Python
通过实例解析python and和or使用方法
2020/11/14 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
英文简历中的自我评价
2013/10/06 职场文书
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
2015年度党员个人总结
2015/02/14 职场文书
母亲节感言
2015/08/03 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android