首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

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

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

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

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

- Author -

雪落忆海

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python字典数据对象拆分的简单实现方法
Dec 05 Python
python使用turtle库绘制时钟
Mar 25 Python
numpy库与pandas库axis=0，axis= 1轴的用法详解
May 27 Python
在Pycharm中使用GitHub的方法步骤
Jun 13 Python
Python paramiko使用方法代码汇总
Nov 20 Python
在终端启动Python时报错的解决方案
Nov 20 Python
Selenium关闭INFO:CONSOLE提示的解决
Dec 07 Python
关于django python manage.py startapp 应用名出错异常原因解析
Dec 15 Python
Python获取百度热搜的完整代码
Apr 07 Python
python requests模块的使用示例
Apr 07 Python
Pytorch实现图像识别之数字识别(附详细注释)
May 11 Python
Python开发工具Pycharm的安装以及使用步骤总结
Jun 24 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
MapReduce(1) MybatisPlus(2) Normal From(1) DFA(1) css3 (2) pycharm(6) Qlabel(1) JSON(10) pyqt5(3) linux(15)
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
基于mysql的bbs设计（四）
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php内嵌函数用法实例
2015/03/20 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python中map的基本用法示例
2018/09/10 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
CHARLES & KEITH台湾官网：新加坡时尚品牌
2019/07/30 全球购物
怎样建立和理解非常复杂的声明？例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组？
2013/03/19 面试题
2014年教师个人工作总结
2014/11/10 职场文书
致创业您：正能量激励人心句子（48条）
2019/08/15 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python