一、图片验证码
django-simple-captcha配置
1.在pycharm中，File====》Settings====》Project:项目名====》Project Interpreter====》+====》搜django-simple-captcha 选择0.55以上版本，然后点install package 按钮进行安装
2.项目名/urls.py中添加代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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中添加一个注册信息
|
1
2
3
4
5
6
|
INSTALLED_APPS = [ ...... 'captcha'] |
4.打开终端Terminal执行更新数据库命令：
|
1
2
|
python manage.py makemigrationspython manage.py migrate |
5.在users目录下新建form.py文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
from django import formsfrom captcha.fields import CaptchaField......class RegisterForm(forms.Form): """注册信息的验证""" ...... captcha=CaptchaField(error_messages={'invalid':'验证码错误'}) ...... |
6.在users/views.py中添加代码：
|
1
2
3
4
5
6
7
8
|
from users.form import RegisterFormclass IndexView(View): """首页""" def get(self,request): register_form=RegisterForm() return render(request,'index.html',{'register_form':register_form}) |
7.在前端首页index.html中显示验证码、输入框
html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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
|
1
2
3
4
5
6
7
8
9
10
|
<style> .cap{ display: inline-block; width: 280px; height: 36px; } .cap img{ float: right; }</style> |
js 跟刷新验证码相关（需要先引入jQuery）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$("#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代码：
|
1
2
3
4
5
6
7
8
|
$("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值要保持一致！）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
from django import formsfrom captcha.fields import CaptchaFieldfrom .models import UserProfileclass 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中与注册相关的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
......from django.http import HttpResponsefrom .models import UserProfile,ShopProfilefrom users.form import RegisterFormfrom django.contrib.auth.hashers import make_passwordimport jsonclass 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注册路由：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
......from .views import RegisterView.....urlpatterns = [ ...... path('register/',RegisterView.as_view(),name='register'), ...... ] |
三、邮箱激活已注册的账号：
1.新建个数据表存放邮箱激活码：
在users/models.py中增加代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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中注册数据表：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
......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执行更新数据库命令：
|
1
2
|
python manage.py makemigrationspython manage.py migrate |
2.写发邮件的脚本：在apps/users/新建utils/email_send.py
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
from random import Randomfrom users.models import EmailVerifyRecordfrom django.core.mail import send_mailfrom xyw.settings import EMAIL_FROMdef 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 strdef 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中追加发送邮件的配置代码：
|
1
2
3
4
5
6
7
|
EMAIL_HOST='smtp.sina.cn'EMAIL_PORT=25EMAIL_HOST_USER='xxxxxxxx@sina.cn' #你的邮箱EMAIL_HOST_PASSWORD='********'EMAIL_USE_TLS=FalseEMAIL_FROM='xxxxxxx1@sina.cn' #同样是你的邮箱，跟上面都是发信者邮箱#我用的新浪的，也可以用别的 |
4.开启新浪邮箱的smtp服务，不然不能自动发邮件的，步骤如下：
登录新浪邮箱====》设置区====》客户端pop/imp/smtp====》Pop3/SMTP服务====》服务状态：开启====》保存
5.增加激活功能
在users/views.py中增加激活类ActiveUserView(View)代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
......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)增加发送激活邮件的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
......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)增加验证账户激活与否的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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":"用户名或密码错误"}') |
至此完成了用邮箱注册及激活，很多时候，激活邮件都会被邮箱自动放入垃圾箱，而且从邮件点击激活链接的时候，还会被提示一些警告信息，可以说通过邮箱注册各种不如通过短信注册，但是……省钱啊！^_^
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.cnblogs.com/xuepangzi/p/8811148.html
