Django で ajax を介して電子メール ユーザー登録とアカウント アクティベーションを完了する方法

この記事では主に、Ajax を介して Django でメール ユーザーの登録とアカウントのアクティブ化を完了する方法を紹介し、参考として提供します。一緒に見てみましょう

1. 画像確認コード

django-simple-captcha設定

1. pycharmで、File====》Settings====》Project:プロジェクト名= ===》プロジェクトインタープリター====》+====》django-simple-captcha を検索 バージョン 0.55 以降を選択し、パッケージのインストールボタンをクリックして、プロジェクト名/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.設定に登録情報を追加します。py

INSTALLED_APPS = [

    ......
  
  'captcha'
]

4.ターミナルを開き、データベース更新コマンドを実行します:

python manage.py makemigrations
python manage.py migrate

5.新しいフォームを作成します。ユーザー ディレクトリの .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. フロントエンド ホームページ インデックスに確認コードと入力ボックスを表示します。 html

html

<p class="modal fade" id="register" tabindex="-1" role="dialog">

  ......

<!--模态框中关于注册的内容start-->
   <p class="modal-body">
    ......
      
      <P><p style="display: inline-block;width:100px;text-align: center"><b >验证码：</b></p>

<!--验证码start-->

      <p class="cap">{{ register_form.captcha }}</p>

<!--验证码end-->

</P>
      {% csrf_token %}
    </form>
     <p><p style="margin-left: 100px;background-color: orangered;width:150px;text-align: center"><b></b></p></p>
   </p>

<!--模态框中关于注册的内容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'])
      });
    });
  })

2 . ajaxメール登録 1. フロントエンドでの登録に関連付けられている 特定のモーダル ボックス コードは次のように記述されます:

html

<p class="modal fade" id="register" tabindex="-1" role="dialog">

 ......
   
   <p class="modal-body">
    <form id="registerform" action="#" method="post">
      <p>
        <p class="re-input"><b>用户名：</b></p>
        <input type="text" name="user" placeholder="用户名">
        <p class="msg"><b id="user-msg"></b></p>
      </p>
      <p>
        <p class="re-input"><b>邮箱：</b></p>
        <input type="text" name="email" placeholder="邮箱">
        <p class="msg"><b id="email-msg">2222</b></p>
      </p>
      <p>
        <p class="re-input"><b >密码：</b></p>
        <input type="password" name="pwd" placeholder="密码（不少于6位）">
        <p class="msg"><b id="pwd-msg">222</b></p>
      </p>
      <p>
        <p class="re-input"><b >确认密码：</b></p>
        <input type="password" name="pwd2" placeholder="确认密码">
        <p class="msg"><b id="pwd-msg2">22</b></p>
      </p>
      <P><p class="re-input"><b >验证码：</b></p>
        <p class="cap">{{ register_form.captcha }}</p>
        <p class="msg"><b id="captcha-msg">2</b></p>
      </P>
      {% csrf_token %}
    </form>
     <p><p style="margin-left: 100px;color: white;background-color: green;width:180px;text-align: center"><b id="active-msg"></b></p></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 コード:

ユーザー対話エクスペリエンスを向上させるための

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);

        }
      }
    });
  });

2.users/form.py コード: (検証されるフィールド名は、フロントエンド入力ボックスの名前の値と一致している必要があります!)

rreee

3登録済みアカウント:

1. 新しいデータテーブルを作成して電子メールアクティベーションコードを保存します:

users/models.py にコードを追加します:

$("input").bind('input propertychange', function() {
    $('#login-fail').html('');
    $('#user-msg').html('');
    $('#email-msg').html('');
    $('#pwd-msg').html('');
    $('#pwd-msg2').html('');
    $('#captcha-msg').html('');
  });

users/adminx.py にデータテーブルを登録します:

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

ターミナルを開いてデータベースの更新を実行します。 コマンド:

......

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)

2. 電子メールを送信するスクリプトを作成します: apps/users/ に新しい utils/email_send.py を作成します。 Sina Mailbox の SMTP サービスを有効にしないと、メールを自動的に送信できません。手順は次のとおりです:

Sina Mailbox にログイン====》設定エリア====》クライアント Pop/imp/smtp = ===》Pop3/SMTP サービス====》サービスステータス: on====》保存

5. アクティベーション関数を追加

users/views.py:

にアクティベーションクラス ActiveUserView(View) コードを追加します。

......

from .views import RegisterView
.....

urlpatterns = [

  ......

  path('register/',RegisterView.as_view(),name='register'),

  ......
  ]

6. users/views.py で、登録クラス RegisterView (View) にアクティベーション電子メールを送信するためのコードを追加します。

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)

ログイン LoginView ( View) コード:

......

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)

これで、メールによる登録とアクティベーションが完了しました。多くの場合、アクティベーションメールはメールによって自動的にゴミ箱に入れられ、メールにあるアクティベーションリンクをクリックすると、また、いくつかの警告メッセージも表示されます。電子メールでの登録はテキスト メッセージでの登録ほど良くないと言われていますが、費用は節約できます。 ^_^

関連する推奨事項:

Django の認証モジュール (ユーザー認証) の詳細な説明

以上がDjango で ajax を介して電子メール ユーザー登録とアカウント アクティベーションを完了する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。