이 글에서는 주로 Ajax를 통해 Django에서 이메일 사용자 등록 및 계정 활성화를 완료하는 방법을 소개하고 참고용으로 올려드립니다. 함께 살펴볼까요
1. 사진 인증 코드
django-simple-captcha 구성
1. pycharm에서 파일====》설정====》프로젝트: 프로젝트 이름= ===》프로젝트 인터프리터====》+====》django-simple-captcha 검색 버전 0.55 이상을 선택하고 패키지 설치 버튼을 클릭하여 설치합니다.
2. 프로젝트 이름에 코드를 추가합니다. :
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. 터미널을 열고 데이터베이스 업데이트 명령을 실행합니다.
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. jax 이메일 등록
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>js 코드 관련 ajax 등록:
$("#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 코드: (확인할 필드 이름은 프런트엔드 입력 상자의 이름 값과 일치해야 합니다!)
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_data3.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'), ...... ]
3. 등록된 계정:
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)
터미널을 열어 데이터베이스 업데이트 실행 명령:
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:
passEMAIL_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' #同样是你的邮箱，跟上面都是发信者邮箱 #我用的新浪的，也可以用别的
......
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')......
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":"注册成功请去邮箱激活！"}')관련 권장 사항:
Django의 인증 모듈(사용자 인증)에 대한 자세한 설명위 내용은 django에서 ajax를 통해 이메일 사용자 등록 및 계정 활성화를 완료하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
