django 通过ajax完成邮箱用户注册

Posted 2020-10-31 雪落忆海

一、图片验证码

django-simple-captcha配置

1.在pycharm中，File====》Settings====》Project:项目名====》Project Interpreter====》+====》搜django-simple-captcha　　选择0.55以上版本，然后点install package 按钮进行安装

2.项目名/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.settings.py中添加一个注册信息

INSTALLED_APPS = [

        ......
    
    ‘captcha‘
]

4.打开终端Terminal执行更新数据库命令：

python manage.py makemigrations
python manage.py migrate

5.在users目录下新建form.py文件：

from django import forms
from captcha.fields import CaptchaField


class RegisterForm(forms.Form):
    """注册信息的验证"""
    username=forms.CharField(required=True,error_messages={‘invalid‘:‘该用户名已被占用‘})
    email=forms.EmailField(required=True,error_messages={‘invalid‘:‘邮箱格式错误‘})#邮箱格式，且唯一
    password=forms.CharField(min_length=5,error_messages={‘invalid‘:‘密码长度不能小于5‘})#字符串格式，且长度不能小于5
    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.在前端首页index.html中显示验证码、输入框

html

<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

<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‘])
            });
        });
    })

二、ajax邮箱注册