用户注册初步实现

用户点击右上角的注册按钮后，会跳转到注册页面进行注册。

注册采用邮箱+密码+图片验证码的注册方式。

1.首先我们完成邮箱+密码的注册方式

后端服务器

1.在总urls.py下注册注册信息的路由：

    # 用户注册
    url(r'user_register/$', RegisterView.as_view(), name='user_register'),

2.在写视图函数之前，先写forms表单验证类:
在users/forms.py:

#注册表单验证
class UserRegisterForm(forms.Form):
    #email
    email = forms.EmailField(required=True)
    #密码
    password = forms.CharField(required=True,min_length=6,max_length=16,error_messages={
        'required':'密码必须填写',
        'min_length':'密码不少于6位',
        'max_length':'密码不能超过16位'
    })

3.在users/views.py下编写视图函数，还是采用CBV的方式进行编写。

#用户注册
class RegisterView(View):

    #get方式返回register.html
    def get(self, request, *args, **kwargs):
        return render(request,'register.html')

    #post方式处理提交的数据
    def post(self,request, *args, **kwargs):

        # 实例化表单，注意参数request.POST
        user_register_form = UserRegisterForm(request.POST)


        if user_register_form.is_valid():         #验证表单的合法性

            email = user_register_form.cleaned_data['email']
            password = user_register_form.cleaned_data['password']
            # print(email)
            # print(password)

            #在数据库中查询用户名和邮箱与该email是否有重复的
            user_list = UserProfile.objects.filter(Q(username=email)|Q(email=email))

            if user_list:    #如果该email已存在，返回

                return render(request,'register.html',{
                    'msg':'用户已经存在'       #返回错误信息
                })
            else:
                #创建新用户
                new_user = UserProfile()
                new_user.username = email
                new_user.set_password(password)
                new_user.email = email
                new_user.save()
                
                login(request,new_user)       #执行登录操作，因为前端按钮为注册并登录
                
                return HttpResponseRedirect(reverse('index'))  #重定向到index

        else:
            # 如果表单验证不通过，返回register.html,并返回表单验证的错误提示
            return render(request, 'register.html', {
                'user_register_form': user_register_form     
            })

到这里后端完成

前端页面

1.将register.html复制到templates目录下，修改页面下的css以及js的引用：

1.{% load staticfiles %}

2.将css/js的引用改为：
 <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
的方式。

这是可以运行了
访问:127.0.0.1:8000/user_register/

3.找到注册实现的表单，

修改action地址：{% url 'user_register' %}
添加 {% csrf_token %}
查看input标签的name属性，方便后端获取数据
在错误信息的标签中，填充后端传过来的数据{{ msg }}以及遍历表单验证的错误信息
提交按钮的type为submit类型，如果为button，使用ajax请求。

<form id="mobile_register_form" method="post" action="{% url 'user_register' %}" autocomplete="off">
                        {% csrf_token %}
                        {#       邮箱        #}
                        <div class="form-group marb20 ">
                            <input id="jsRegMobile" name="email" type="text" placeholder="请输入您的邮箱">
                        </div>

                          {#       密码       #}
                        <div class="form-group marb8 ">
                            <input id="jsPhoneRegPwd" name="password" type="password" placeholder="请输入6-20位非中文字符密码">
                        </div>


                        {#        图片验证码，先不实现     #}
                        <div class="form-group marb20 blur" id="jsRefreshCode">
                            <img src="/captcha/image/5b0fe7811ef645d9cb94cc7af579e855ec49819a/" alt="captcha"
                                 class="captcha"/>
                            <input type="hidden" name="captcha_0" value="5b0fe7811ef645d9cb94cc7af579e855ec49819a"
                                   required id="id_captcha_0">
                            <input type="text" name="captcha_1" required
                                                                     id="id_captcha_1" autocapitalize="off"
                                                                     autocomplete="off" autocorrect="off"
                                                                     spellcheck="false" placeholder="请输入图片验证码">
                        </div>
                        {#  邮箱验证码，先不实现  #}
{#                        <div class="clearfix">#}
{#                            <div class="form-group marb8 verify-code ">#}
{#                                <input id="jsPhoneRegCaptcha" name="code" type="text" placeholder="输入邮箱验证码">#}
{#                            </div>#}
{#                            <input class="verify-code-btn sendcode" id="jsSendCode" value="发送验证码">#}
{#                        </div>#}


                        {#      错误信息      #}
                        <div class="error btns" id="jsMobileTips">
                            {{ msg }}

                            {% for key,err in user_register_form.errors.items %}
                                {{ err }}
                            {% endfor %}
                        </div>

                        <div class="auto-box marb8">
                        </div>

                        {#   提交按钮    #}
                        <input class="btn btn-green" id="jsMobileRegBtn" type="submit" value="注册并登录">
{#                        <input type="hidden" name="csrfmiddlewaretoken"#}
{#                               value="r20XuUA2E7Aw0becQXwBbl57JQLgmKXrBBLY1FlPzoKyjZxXrwHVn9cvfwDxXFco">#}
                    </form>

运行：

1.当输入一个不正确的email时