développement back-end
Tutoriel Python
Comment terminer l'enregistrement de l'utilisateur de messagerie et l'activation du compte via ajax dans Django
Comment terminer l'enregistrement de l'utilisateur de messagerie et l'activation du compte via ajax dans Django
Cet article présente principalement comment Django effectue l'enregistrement des utilisateurs de messagerie et l'activation du compte via ajax. Maintenant, je le partage avec vous et lui donne une référence. Jetons un coup d'œil ensemble
1. Code de vérification de l'image
configuration django-simple-captcha configuration
1. Dans pycharm, File====》Settings====》Project:Project name====》Project Interpreter====》+====》Recherche django-simple-captcha Sélectionner la version 0.55 ou supérieur, puis cliquez sur le bouton d'installation du package pour installer
2. Ajoutez le code au nom du projet/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. Ajoutez des informations d'enregistrement dans settings.py
INSTALLED_APPS = [
......
'captcha'
]4. Ouvrez le terminal et exécutez la commande de mise à jour de la base de données :
python manage.py makemigrations python manage.py migrate
5. Créez un nouveau fichier form.py dans le répertoire des utilisateurs :
from django import forms
from captcha.fields import CaptchaField
......
class RegisterForm(forms.Form):
"""注册信息的验证"""
......
captcha=CaptchaField(error_messages={'invalid':'验证码错误'})
......6. Dans utilisateurs/Ajouter du code à vues.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. Affichez le code de vérification et la zone de saisie dans l'index de la page d'accueil frontale. 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 est lié à l'actualisation du code de vérification (il faut d'abord introduire 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. Inscription par e-mail Ajax
1. Le code de la boîte modale lié à l'inscription sur le front end s'écrit comme suit :
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>Code JS lié à l'enregistrement 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);
}
}
});
});Code JS pour améliorer l'expérience d'interaction utilisateur :
$("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 code : (Le nom du champ à vérifier doit être cohérent avec la valeur du nom de la zone de saisie frontale !)
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 Code lié à l'enregistrement :
......
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. Configurer la route d'enregistrement utilisateurs/urls.py :
...... from .views import RegisterView ..... urlpatterns = [ ...... path('register/',RegisterView.as_view(),name='register'), ...... ]
3. Activation par e-mail pour le compte enregistré :
1. Créez un nouveau tableau de données pour stocker le code d'activation par e-mail : .
Ajouter du code dans 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)Enregistrer la table de données dans 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)
Ouvrez le Terminal et exécutez la commande de mise à jour de la base de données :
python manage.py makemigrations python manage.py migrate
2 . Écrivez un script pour l'envoi d'e-mails : Créez un nouveau utils/email_send.py dans apps/users/ >
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' #同样是你的邮箱，跟上面都是发信者邮箱 #我用的新浪的，也可以用别的
Connectez-vous à la boîte aux lettres Sina====》Zone de paramètres====》Client pop/imp/ smtp====》Service Pop3/SMTP====》État du service : ouvert====》Enregistrer 5. Ajouter une fonction d'activationAjouter dans users/views.py Classe d'activation Code 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. Dans users/views.py, enregistrez la classe RegisterView(View ) Ajoutez un code pour l'envoi d'e-mails d'activation :
......
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":"注册成功请去邮箱激活！"}')Ajoutez un code de connexion à LoginView (View) pour vérifier si le compte est activé :
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":"用户名或密码错误"}')Explication détaillée du module d'authentification de Django (authentification de l'utilisateur)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sesame Open Door Exchange Page Web Login Dernière version GATEIO Entrée du site officiel
Mar 04, 2025 pm 11:48 PM
Une introduction détaillée à l'opération de connexion de la version Web Sesame Open Exchange, y compris les étapes de connexion et le processus de récupération de mot de passe.
Tutoriel d'enregistrement GATE.IO
Mar 31, 2025 pm 11:09 PM
Cet article fournit un didacticiel d'inscription GATE.IO détaillé, couvrant chaque étape de l'accès au site officiel à la réalisation de l'enregistrement, notamment le remplissage des informations d'enregistrement, la vérification, la lecture des accords d'utilisateurs, etc. L'article est également en vigueur les mesures de sécurité après une inscription réussie, telles que la configuration de la vérification secondaire et la réalisation de l'authentification réelle, et donne des conseils à partir des débutants pour aider les utilisateurs secondaires à démarrer en toute sécurité leur parcours numérique.
Portail d'enregistrement officiel d'Okx OUYI 2025
Mar 04, 2025 pm 11:45 PM
OKX OUYI est une plate-forme de trading de crypto-monnaie de premier plan. Cet article fournira des étapes détaillées pour vous guider sur la façon d'enregistrer un compte de site Web officiel d'Okx OUYI. Vous apprendrez à accéder au site officiel, à choisir la méthode d'enregistrement, à remplir les informations nécessaires et à terminer le processus d'enregistrement. L'article contient également des informations sur les précautions, telles que l'importance d'utiliser des informations personnelles réelles et de définir un mot de passe fort.
Gate.io Dernier tutoriel d'inscription pour les débutants
Mar 31, 2025 pm 11:12 PM
Cet article fournit aux débutants des tutoriels d'inscription GATE.IO détaillés, en les guidant pour terminer progressivement le processus d'enregistrement, y compris l'accès au site officiel, le remplissage d'informations, la vérification de l'identité, etc., et met l'accent sur les paramètres de sécurité après l'enregistrement. De plus, l'article a également mentionné d'autres échanges tels que Binance, Ouyi et Sesame Open Door. Il est recommandé que les novices choisissent la bonne plate-forme en fonction de leurs propres besoins et rappellent aux lecteurs que l'investissement des actifs numériques est risqué et devrait investir rationnellement.
Application Gateio Exchange Ancienne version GATEIO Exchange App Old Version Télécharger la chaîne de téléchargement
Mar 04, 2025 pm 11:36 PM
Les canaux de téléchargement de l'application GATEIO Exchange pour les anciennes versions, couvrant les marchés d'applications officiels, tiers, les communautés de forum et d'autres canaux.
Dans Laravel, comment gérer la situation où les codes de vérification ne sont pas envoyés par e-mail?
Mar 31, 2025 pm 11:48 PM
La méthode de traitement de l'échec de l'e-mail de Laravel à envoyer le code de vérification est d'utiliser Laravel ...
Comment s'inscrire et télécharger la dernière application sur le site officiel de Bitget
Mar 05, 2025 am 07:54 AM
Ce guide fournit des étapes de téléchargement et d'installation détaillées pour l'application officielle Bitget Exchange, adaptée aux systèmes Android et iOS. Le guide intègre les informations de plusieurs sources faisant autorité, y compris le site officiel, l'App Store et Google Play, et met l'accent sur les considérations pendant le téléchargement et la gestion des comptes. Les utilisateurs peuvent télécharger l'application à partir des chaînes officielles, y compris l'App Store, le téléchargement officiel du site Web APK et le saut de site Web officiel, ainsi que des paramètres d'enregistrement, de vérification d'identité et de sécurité. De plus, le guide couvre les questions et considérations fréquemment posées, telles que
Le dernier portail d'inscription pour le site officiel d'Ouyi
Mar 21, 2025 pm 05:54 PM
En tant que la principale plateforme de trading d'actifs numériques au monde, OUYI OKX attire de nombreux investisseurs avec ses riches produits de trading, ses fortes garanties de sécurité et sa expérience utilisateur pratique. Cependant, les risques de sécurité des réseaux deviennent de plus en plus graves et comment enregistrer en toute sécurité le compte officiel OUYI OKX est crucial. Cet article fournira le dernier portail d'enregistrement pour le site officiel OUYI OKX et expliquera en détail les étapes et les précautions pour une inscription sûre, y compris comment identifier le site officiel, définir un mot de passe solide, permettre la vérification à deux facteurs, etc., pour vous aider à démarrer votre voyage d'investissement dans les actifs numériques en toute sécurité. Veuillez noter qu'il existe des risques dans l'investissement des actifs numériques, veuillez prendre des décisions prudentes.
