03 用户注册功能
一、用户模型设计
1、用户表字段分析
- 用户名
- 密码
- 手机号
- 邮箱
2、用户模型设计
django的强大之处在于开发效率高，内置了权限模块之类的很多常用功能。在开始一个新的django项目时，如果权限模块中的User模型不满足项目要求，我们需要扩展或者自定义User模型。
扩展User模型有两种方法：
如果你不需要改变数据库存储内容，只是改变行为，那么可以建立有一个基于User模型的代理模型。
-
如果想存储与User模型关联的信息，可以使用OneToOneField到包含其他信息字段的模型。这种one-to-one模型经常被称作Profile模型，因为它可能存储站点用户的非身份验证的相关信息。例如：
from django.contrib.auth.models import User class Employee(models.Model): user = models.OneToOneField(User, on_delete=models.CASCADE) department = models.CharField(max_length=100)
自定义User模型：
如果不想使用django内置的权限系统，当然你需要自定义用户模型，这种情况不讨论。当然也不建议这么做，django内置权限系统有大的自定义功能扩展，而不是重复造轮子。
开启一个新项目，官方强烈推荐用户自定义用户模型，即是默认的用户模型目前已经足够，但是未来可能会要扩展。
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
pass
<span style="color:red">注意:</span>不要忘记在settings.py中设置AUTH_USER_MODEL指向它。
一旦已经创立数据库表之后再去修改AUTH_USER_MODEL，会困难很多，因为它会影响外键和多对多关系。这个改动并不能自动完成，需要手动修复（巨坑）。
3.用户模型代码
from django.db import models
# 导入auth模型库
from django.contrib.auth.models import AbstractUser ,UserManager as _UserManager
# Create your models here.
class UserManager(_UserManager):
'''
自定义 UserManager 修改在 createSuperUser时必须输入emial的问题
给email设置默认参数None
'''
def create_superuser(self, username, password, email=None, **extra_fields):
super().create_superuser(username=username, password=password, email=email, **extra_fields)
class User(AbstractUser):
phone = models.CharField('phonenumber',
max_length=11,
unique=True,
help_text='phonenumber',
error_messages={'unique': '该手机号已被注册'})
email_active = models.BooleanField('邮箱状态',default=False)
# 重定义父类的objects属性
objects = UserManager()
# 通过createSuperUser管理命令创建用户时将提示输入的字段名列表
REQUIRED_FIELDS = ['phone']
class Meta:
# 指定数据库表名
db_table = 'tb_user'
# 在admin站点中显示名称
verbose_name = '用户'
# 显示复数
verbose_name_plural = verbose_name
在settings.py文件中添加如下配置：
# 自定义用户模型
AUTH_USER_MODEL = 'user.User'
然后运行命令进行数据库迁移：
python manage.py makemigrations
python manage.py migrate
再创建一个管理用户
manage.py@djproject28 > createsuperuser
ssh://pyvip@127.0.0.1:1234/home/pyvip/.virtualenvs/djangoproject28/bin/python3.6 -u /home/pyvip/.pycharm_helpers/pycharm/django_manage.py createsuperuser /home/pyvip/djangoproject/djproject28
用户名: jiangyun
jiangyun
Phonenumber: 12345678910
12345678910
Warning: Password input may be echoed.
Password: jiangyun
jiangyun
Warning: Password input may be echoed.
Password (again): jiangyun
jiangyun
Superuser created successfully.
二、功能需求分析
1、接口设计思路
- 分析业务逻辑，明确主业务功能，涉及到几个子业务，将每一个子业务当成一个接口来设计
- 分析接口的功能任务，明确接口的访问方式与返回数据：
- 接口的请求方式，如GET,POST,DELETE等.
- 接口的url路由
- 输入参数及其数据格式（如路径参数，查询字符串，请求表单，json数据等）
- 返回的参数及其数据格式
2、注册功能分析
1、功能分析：
- 注册页面
- 用户名检测（是否已经被注册）
- 图片验证码
- 图片验证码校验
- 手机号码检测（是否已经被注册）
- 短信验证码
- 短信验证码校验
- 用户数据保存
2、流程图
登录注册流程图.png
三、图形验证码功能
1、功能分析
访问注册页面，得到一张验证码图片
点击验证码图片，刷新得到一张新的验证码图片
2、接口设计
| 项目 | 说明 |
|---|---|
| 请求方法 | GET |
| url路径 | '/imagecode' |
| 输入参数 | 查询参数 |
| 返回参数 | 验证码图片 |
额外参数说明：
为了避免浏览器缓存，保证每次刷新都能拿到不同的图片，我们请求时携带一个rand参数（每次都不一样）
| 参数名 | 类型 | 是否必须 | 描述 |
|---|---|---|---|
| rand | 字符串 | 否 | get携带的参数，避免每次刷新都访问的参数都相同 |
3、后端代码
1、创建新的app verification专门用来处理验证码
2、将验证码生成模块captcha复制到工具utils目录下
3、编写views内容
import logging
from django.shortcuts import render
from django.http import HttpResponse
# 导入验证码库
from utils.captcha.captcha import captcha
from .constants import IMAGE_CODE_EXPIRES
# Create your views here.
# 日志器
logger = logging.getLogger('django')
def image_code_view(request):
'''
生成验证码图片
:param request:
:return:
'''
# 1、生成验证码及其图片
code,code_image = captcha.generate_captcha()
# 2、将验证码放到session中
request.session['image_code'] = code
# 3、设置session的过期时间
request.session.set_expiry(IMAGE_CODE_EXPIRES)
# 4、日志
logger.info('Image code:{}'.format(code))
# 5、返回图片
return HttpResponse(content=code_image, content_type='image/jpg')
4、urls路由
# 子路由
from django.urls import path
from . import views
app_name = 'verification'
urlpatterns = [
path('imagecode/', views.image_code_view, name='imagecode'),
]
# 主路由
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
# path('admin/', admin.site.urls),
path('course/', include('course.urls')),
path('', include('doc.urls')),
path('', include('news.urls')),
path('', include('verification.urls')),
path('', include('user.urls')),
]
四、注册页面
1、功能分析
返回注册页面，点击验证码图片刷新验证码（js实现）
2、接口设计
| 项目 | 说明 |
|---|---|
| 请求方法 | GET |
| url路径 | 'register' |
| 输入参数 | 无 |
| 返回参数 | 注册页面 |
3、后端代码
1、views
class User_register(View):
'''
用户注册类视图
'''
def get(self,request):
return render(request, 'user/register.html')
def post(self,request):
return render(request, 'user/register.html')
2、url路由
# 子路由
path('register', views.User_register.as_view(), name='register'),
# 主路由
path('', include('user.urls')),
3、前端页面
{% extends 'base/base.html' %}
{% load static %}
{% block title %}注册{% endblock title %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/user/auth.css' %}">
{% endblock link %}
{% block main %}
<main id="container">
<div class="register-contain">
<div class="top-contain">
<h4 class="please-register">请注册</h4>
<a href="javascript:void(0);" class="login">立即登录 ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="text" placeholder="请输入用户名" name="username" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" name="password" class="form-control">
</div>
<div class="form-item">
<input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control">
</div>
<div class="form-item">
<input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off" autofocus>
</div>
<div class="form-item">
<input type="text" placeholder="请输入图形验证码" name="captcha_graph" class="form-captcha">
<a href="javascript:void(0);" class="captcha-graph-img">
<img src="{% url 'verification:imagecode' %}" alt="验证码" title="点击刷新">
</a>
</div>
<div class="form-item">
<input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" autocomplete="off">
<a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a>
</div>
<div class="form-item">
<input type="submit" value="立即注册" class="register-btn">
</div>
</form>
</div>
</main>
{% endblock main %}
{% block js %}
{% block jquery %}
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
{% endblock jquery %}
{% block otherjs %}
<script src="{% static 'js/verification/image_code.js' %}"></script>
{% endblock otherjs %}
{% endblock js %}
4、js代码
点击验证码刷新
$(function () {
let $img = $('.form-contain .form-item .captcha-graph-img img');
$img.click(function () {
$img.attr('src', '/imagecode/?rand=' + Math.random())
$img.attr('src', '/imagecode/?rand=' + new Date().getTime())
});
});
