この記事では主に、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);
}
}
});
});
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('');
});
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)...... from .views import RegisterView ..... urlpatterns = [ ...... path('register/',RegisterView.as_view(),name='register'), ...... ]
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)...... 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
