注册功能(一)

用户注册功能

注册即用户在后台数据库中增长了一条数据javascript

一.用户模型表的设计

1.用户表的所需字段

  • 用户名css

  • 密码html

  • 邮箱前端

  • 手机号java

  • 邮箱可用性数据库

2.用户模型的设计

因为django中内置了许多模块,这也使得他开发效率极高,因此在设计模型时若是仅仅是引用django内置的user模块功能确定不足,须要本身去拓展。django

扩展user模型的两种方法后端

1.若是不须要改变数据库的存储内容(不修改USER模型中的字段),只是改变行为,则能够建立一个新的User代理模型。session

2.若是想要存储与User相关的信息,可使用OneToOneField到包含其信息的模型这种one-to-one模型常常被称做Profile模型,由于它可能存储站点用户的非身份验证的相关信息。例如:app

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中有提供一个虚拟的User模型,其中有大部分是已经写好的,因此咱们仅仅只须要根据咱们额外的一些字段进行继承添加便可

开启一个新的项目官方推荐使用本身定义个User模型,在本身定义的中进行扩展

from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
   """
  经过继承AbstractUser,而后再进行添加mobile email_active 字段,
  AbstractUser:一个虚拟的库,在建立迁移时不会将虚拟的进行迁移。
  """
   mobile = models.CharField('手机号',max_length=11,help_text='手机号',unique=True,
                             error_messages={'unique': '此手机号已被注册'})
   email_active = models.BooleanField('邮箱状态', default='False')

   class Meta:
       db_table = 'tb_user'        # 指定数据库中的表名
       verbose_name = '用户'      # 指定admin系统中的名字
       verbose_name_plural = verbose_name  # 显示复数

   def __str__(self):
       return self.username

   # 当使用createsupperuser时 不须要给email而是须要提交手机号
   # 以后还须要去Usermanager中将必须传入的email设置默认为None
   REQUIRED_FIELDS = ['mobile']

   objects = UserManager()

在写完以后在settings文件中进行AUTH_USER_MODEL = 'user.User'的配置

因为上面对createsuperuser进行了修改固然在相对应的管理器中也要进行修改以下:

from django.db import models
from django.contrib.auth.models import AbstractUser,UserManager as Manager


class UserManager(Manager):
   """
  自定义user manager 在使用createsupperuser时,将须要提交的email撤销掉。
  """
   def create_superuser(self, username, password, email=None, **extra_fields):
       return super().create_superuser(username=username,password=password,email=email,**extra_fields)

写好以后要在User中添加进去即

objects = UserManager()

当迁移时出现以下错误

有多是以下问题:

1.setting文件数据库的配置数据不对

改为如上

2.db。cnf文件中user不对

 

二.需求分析

1.接口设计

对于本次业务分为多少个子业务,将每个子业务作成一个接口(即每一个子业务一个view),

分析接口的功能与任务,对每一个借口的数据及请求方式与返回数据分析

  • 请求方式:get post put 等

  • 接口url的定义

  • 接口所须要的参数(路径参数,查询字符串,请求表单,JSON等)

  • 返回的数据及返回数据的格式

 

2.注册功能分析

  • 从一个网页访问注册网页发送一次请求

  • 验证码图片加载一次请求

  • 点击刷新验证码图片一次请求

  • 短信验证码一次请求

画成图以下:

 

三.注册页面的实现

1.接口设计

条目 内容
请求方法 GET
路径参数 /user/register/
参数

2.后端代码

views

class Register(View):
   def get(self,request):
       return render(request, 'user/register.html')

urls

urlpatterns = [
   path('login/', views.login,name='login'),
   path('register', views.Register.as_view(),name='register'),
]

3.前端代码

{% extends 'base/base.html' %}
{% load static %}
{% block title %}
  注册
{% endblock %}
{% block link %}
   <link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock %}
{% block main_start %}
   <!-- container start -->
<main id="container">
 <div class="register-contain">
   <div class="top-contain">
     <h4 class="please-register">请注册</h4>
     <a href="javascript:void(0);" class="login">当即登陆 &gt;</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:image_code' %}" 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>
<!-- container end -->
{% endblock %}
{% block src %}
   <script src="{% static 'js/user/image.js' %}">

   </script>
{% endblock %}

4.js文件

$(()=> {
   //点击刷新图形验证码
   $( '.captcha-graph-img img').click(function () {
       // 必须加随机数,不然系统视为同一请求不会刷新图片
       $(this).attr('src', '/image_code/?rand='+ Math.random())
  })
});

四。图形验证码的实现

1.接口设计

条目 内容
请求方式 get
路径参数 /image_code/
参数设置 查询参数

参数说明:

参数名 类型 是否必须 描述
rand 字符串 输入的用户名

返回结果:验证码图片

2.后端代码

verification views

import logging
# 有关导入 首先是导入系统的库


# 而后导入框架库
from django.shortcuts import render
from django.http import HttpResponse

# 最后导入本身建立的模型
from verification.constant import IMAGE_CODE_EXPIRES
from utils.captcha.captcha import captcha
# Create your views here.

logger = logging.getLogger('django')

def image_code(request):
   """
  用于生成验证码图片
  """
   # 1.生成验证码及图片
   text, image = captcha.generate_captcha()
   # 2.保存验证码 session保存
   request.session['image_code'] = text
   request.session.set_expiry(IMAGE_CODE_EXPIRES)
   # 3.记录一个日志
   logger.info('image_code{}'.format(text))
   # 4.返回验证码图片
   return HttpResponse(content=image,content_type='image/jpg')

urls

from  django.urls import path
from . import views

app_name = 'verification'

urlpatterns = [
   path('image_code/',views.image_code,name='image_code')
]

 

用户注册功能

注册即用户在后台数据库中增长了一条数据

一.用户模型表的设计

1.用户表的所需字段

  • 用户名

  • 密码

  • 邮箱

  • 手机号

  • 邮箱可用性

2.用户模型的设计

因为django中内置了许多模块,这也使得他开发效率极高,因此在设计模型时若是仅仅是引用django内置的user模块功能确定不足,须要本身去拓展。

扩展user模型的两种方法

1.若是不须要改变数据库的存储内容(不修改USER模型中的字段),只是改变行为,则能够建立一个新的User代理模型。

2.若是想要存储与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中有提供一个虚拟的User模型,其中有大部分是已经写好的,因此咱们仅仅只须要根据咱们额外的一些字段进行继承添加便可

开启一个新的项目官方推荐使用本身定义个User模型,在本身定义的中进行扩展

from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
   """
  经过继承AbstractUser,而后再进行添加mobile email_active 字段,
  AbstractUser:一个虚拟的库,在建立迁移时不会将虚拟的进行迁移。
  """
   mobile = models.CharField('手机号',max_length=11,help_text='手机号',unique=True,
                             error_messages={'unique': '此手机号已被注册'})
   email_active = models.BooleanField('邮箱状态', default='False')

   class Meta:
       db_table = 'tb_user'        # 指定数据库中的表名
       verbose_name = '用户'      # 指定admin系统中的名字
       verbose_name_plural = verbose_name  # 显示复数

   def __str__(self):
       return self.username

   # 当使用createsupperuser时 不须要给email而是须要提交手机号
   # 以后还须要去Usermanager中将必须传入的email设置默认为None
   REQUIRED_FIELDS = ['mobile']

   objects = UserManager()

在写完以后在settings文件中进行AUTH_USER_MODEL = 'user.User'的配置

因为上面对createsuperuser进行了修改固然在相对应的管理器中也要进行修改以下:

from django.db import models
from django.contrib.auth.models import AbstractUser,UserManager as Manager


class UserManager(Manager):
   """
  自定义user manager 在使用createsupperuser时,将须要提交的email撤销掉。
  """
   def create_superuser(self, username, password, email=None, **extra_fields):
       return super().create_superuser(username=username,password=password,email=email,**extra_fields)

写好以后要在User中添加进去即

objects = UserManager()

当迁移时出现以下错误

有多是以下问题:

1.setting文件数据库的配置数据不对

改为如上

2.db。cnf文件中user不对

 

二.需求分析

1.接口设计

对于本次业务分为多少个子业务,将每个子业务作成一个接口(即每一个子业务一个view),

分析接口的功能与任务,对每一个借口的数据及请求方式与返回数据分析

  • 请求方式:get post put 等

  • 接口url的定义

  • 接口所须要的参数(路径参数,查询字符串,请求表单,JSON等)

  • 返回的数据及返回数据的格式

 

2.注册功能分析

  • 从一个网页访问注册网页发送一次请求

  • 验证码图片加载一次请求

  • 点击刷新验证码图片一次请求

  • 短信验证码一次请求

画成图以下:

 

三.注册页面的实现

1.接口设计

条目 内容
请求方法 GET
路径参数 /user/register/
参数

2.后端代码

views

class Register(View):
   def get(self,request):
       return render(request, 'user/register.html')

urls

urlpatterns = [
   path('login/', views.login,name='login'),
   path('register', views.Register.as_view(),name='register'),
]

3.前端代码

{% extends 'base/base.html' %}
{% load static %}
{% block title %}
  注册
{% endblock %}
{% block link %}
   <link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock %}
{% block main_start %}
   <!-- container start -->
<main id="container">
 <div class="register-contain">
   <div class="top-contain">
     <h4 class="please-register">请注册</h4>
     <a href="javascript:void(0);" class="login">当即登陆 &gt;</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:image_code' %}" 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>
<!-- container end -->
{% endblock %}
{% block src %}
   <script src="{% static 'js/user/image.js' %}">

   </script>
{% endblock %}

4.js文件

$(()=> {
   //点击刷新图形验证码
   $( '.captcha-graph-img img').click(function () {
       // 必须加随机数,不然系统视为同一请求不会刷新图片
       $(this).attr('src', '/image_code/?rand='+ Math.random())
  })
});

四。图形验证码的实现

1.接口设计

条目 内容
请求方式 get
路径参数 /image_code/
参数设置 查询参数

参数说明:

参数名 类型 是否必须 描述
rand 字符串 输入的用户名

返回结果:验证码图片

2.后端代码

verification views

import logging
# 有关导入 首先是导入系统的库


# 而后导入框架库
from django.shortcuts import render
from django.http import HttpResponse

# 最后导入本身建立的模型
from verification.constant import IMAGE_CODE_EXPIRES
from utils.captcha.captcha import captcha
# Create your views here.

logger = logging.getLogger('django')

def image_code(request):
   """
  用于生成验证码图片
  """
   # 1.生成验证码及图片
   text, image = captcha.generate_captcha()
   # 2.保存验证码 session保存
   request.session['image_code'] = text
   request.session.set_expiry(IMAGE_CODE_EXPIRES)
   # 3.记录一个日志
   logger.info('image_code{}'.format(text))
   # 4.返回验证码图片
   return HttpResponse(content=image,content_type='image/jpg')

urls

from  django.urls import path
from . import views

app_name = 'verification'

urlpatterns = [
   path('image_code/',views.image_code,name='image_code')
]
相关文章
相关标签/搜索