【基于Django框架的在线教育平台开发-02】用户注册功能开发

用户注册功能开发

1 模型层开发

用户数据表如下所示：

Field	Type	Extra
id	int	Prime Key & Auto Increment
password	varchar(128)
last_login	datetime(6)	Allow Null
is_superuser	tinyint(1)
username	varchar(150)
first_name	varchar(150)
last_name	varchar(150)
email	varchar(254)
is_staff	tinyint(1)
is_active	tinyint(1)
date_joined	datetime(6)
nick_name	varchar(50)
birthday	date	Allow Null
gender	varchar(6)
address	varchar(100)
mobile	varchar(11)
image	varchar(100)

由于Django内置了用户数据表，因此并没有新建数据表，而是选择重写默认用户数据表。由于后续诸多数据表都会用到add_time数据项，所以将该数据项暂时放在一个抽象类中，其他实体类继承于该抽象类。

这里提到的相关技术请参照：
【Django】模型层开发之重写模型类
【Django】模型层开发之创建并继承抽象模型类

from datetime import datetime

from django.db import models
from django.contrib.auth.models import AbstractUser

GENDER_CHOICES = (
    ("male", "男"),
    ("famale", "女"),
)


class BaseModel(models.Model):
    """
    用于存放多个模型共用的数据列，且不生成该类的数据表
    """
    add_time = models.DateTimeField(default=datetime.now, verbose_name="数据添加时间")

    class Meta:
        # 防止父类建表
        abstract = True


class UserProfile(AbstractUser):
    """
    重写用户模型类，继承自 AbstractUser
    """
    nick_name = models.CharField(max_length=50, verbose_name="昵称", default="")
    birthday = models.DateField(verbose_name="生日", null=True, blank=True)
    gender = models.CharField(verbose_name="性别", choices=GENDER_CHOICES, max_length=6)
    address = models.CharField(max_length=100, verbose_name="地址", default="")
    # mobile = models.CharField(max_length=11, unique=True, verbose_name="电话号码")
    mobile = models.CharField(max_length=11, verbose_name="电话号码")
    image = models.ImageField(verbose_name="用户头像", upload_to="head_image/%Y%m", default="default.jpg")

    class Meta:
        """
        对当前表进行相关设置
        """
        verbose_name = "用户信息"
        verbose_name_plural = verbose_name

    def __str__(self):
        """返回一个对象的描述信息"""
        if self.nick_name:
            return self.nick_name
        else:
            return self.username

2 视图层开发

图形验证码的相关知识请看：【Django】图形验证码显示及验证
数据库操作的相关知识请看：【Django】Mysql数据库操作（增、删、改、查）

当用户以GET方式访问注册界面时，仅生成图形验证码并传到前端显示。
当用户以POST方式访问注册界面时，需要验证前端传入的邮箱、密码和图形验证码，这部分的内容都在register_post_form.is_valid()这行代码中完成，系统会自动跳转到django内置的form表单验证模块进行验证，具体请看表单验证小节。最后，将数据写入MySQL数据库中并将表单数据发往前端模板层。

class RegisterView(View):
    def get(self, request, *args, **kwargs):
        register_get_form = RegisterGetForm()
        return render(request, "register.html", {
            "register_get_form": register_get_form,
        })

    def post(self, request, *args, **kwargs):
        register_post_form = RegisterPostForm(request.POST)
        if register_post_form.is_valid():
            email = register_post_form.cleaned_data["email"]
            password = register_post_form.cleaned_data["password"]
            user = UserProfile(username=email, email=email)
            user.set_password(password)
            user.save()
            login(request, user)
            return HttpResponseRedirect(reverse("index"))
        else:
            register_get_form = RegisterGetForm()
            return render(request, "register.html", {
                "register_get_form": register_get_form,
                "register_post_form": register_post_form,
            })

3 配置urls.py

注意：配置urls时需要设置name参数，后续前端界面配置url跳转时会使用到该参数。

from apps.users.views import RegisterView
urlpatterns += [
    ······
    path('register/', RegisterView.as_view(), name="register"),
]

4 表单验证

forms表单验证主要包括两部分：对前端表单数据的约束和对前端表单数据的验证。对数据的约束已经体现在变量定义中，数据验证则使用局部钩子对邮箱进行验证，保证邮箱唯一。对图形验证码captcha的验证不需要我们进行编码，模块中已经内置。

Q：什么是form表单中的局部钩子？
A：定义一个函数,名字叫：clean_字段名字，内部,取出该字段,进行校验，如果通过,将该字段返回，如果失败，抛异常(ValidationError)
 
注意：forms组件中的变量名必须与前端输入框的标签保持一致。

class RegisterGetForm(forms.Form):
    captcha = CaptchaField()


class RegisterPostForm(forms.Form):
    captcha = CaptchaField()
    email = forms.EmailField(required=True)  # 变量名必须与前端name标签保持一致
    password = forms.CharField(required=True, min_length=6)

    def clean_email(self):
        email = self.data.get("email")
        users = UserProfile.objects.filter(email=email)
        if users:
            raise forms.ValidationError("该邮箱已注册")
        return email

5 模板层开发

• 配置form表单提交方式为POST：method="post"；配置form表单向注册url提交数据：action="{% url 'register' %}"，其中register是urls.py配置中所设置的name参数，对应url：http://127.0.0.1:8000/register/。
• 根据form表单验证中的报错信息高亮标注报错数据对应的输入框：在标签的class属性中添加{% if register_post_form.errors.username %}errorput{% endif %}
• 显示报错信息。若form表单验证出错则显示其报错信息，否则显示视图层中回传的其余报错信息。
• 显示验证码。在需要显示验证码的地方输入代码：{{ register_get_form.captcha }}

<form id="email_register_form" method="post" action="{% url 'register' %}" autocomplete="off">
    <div class="form-group marb20 {% if register_post_form.errors.email %}errorput{% endif %}">
        <label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
        <input type="text" id="id_email" name="email" value="{{ register_post_form.email.value }}"
               placeholder="请输入您的邮箱地址"/>
    </div>
    <div class="form-group marb8 {% if register_post_form.errors.password %}errorput{% endif %}">
        <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
        <input type="password" id="id_password" name="password"
               value="{{ register_post_form.password.value }}"
               placeholder="请输入6-20位非中文字符密码"/>
    </div>
    <div class="form-group marb8 captcha1 ">
        <label>验&nbsp;证&nbsp;码</label>
        {{ register_get_form.captcha }}
    </div>
    <div class="error btns" id="jsEmailTips"></div>
    {% if register_post_form.errors %}
        {% for key, error in register_post_form.errors.items %}
            {{ error }}
        {% endfor %}
    {% else %}
        {{ msg }}
    {% endif %}
    <div class="auto-box marb8">
    </div>
    <input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册并登录"/>
    {% csrf_token %}
</form>

6 效果展示