用户注册功能

Posted 2022-02-23 wdty

##  用户注册功能

 

[TOC]

 

 

 

### 一、设计接口思路

 

- 分析业务逻辑，明确在这个业务中需要涉及到几个相关子业务，将每个子业务当做一个接口来设计

- 分析接口的功能任务，明确接口的访问方式与返回数据：

  - 接口的请求方式，如GET 、POST 、PUT等

  - 接口的URL路径定义

  - 需要前端传递的数据及数据格式（如路径参数、查询字符串、请求体表单、JSON等）

  - 返回给前端的数据及数据格式

 

 

 

### 二、功能分析

 

- 用户名判断是否存在

- 手机号判断是否存在

- 图片验证码

- 短信验证码

- 注册保存用户数据

 

图片验证码、短信验证码考虑到后续可能会在其他业务中也会用到，因此将验证码功能独立出来，**创建一个新应用verifications，在此应用中实现图片验证码、短信验证码**

 

 

 

#### 2.后端视图实现

 

a.将生成图像验证码的模块文件夹（百度云盘有提供captcha文件夹）复制粘贴到项目根目录utils文件夹下

 

b.由于验证（图片验证、短信验证）功能，以后有可能在其他应用或项目中重用，所以单独创建一个应用来实现，所有验证相关的业务逻辑接口。在apps目录中创建一个verifications应用，并在settings.py文件中的INSTALLED_APPS列表中指定。

 

```python

 

```

 

```python

 

  

```

 

 

 

### 四、判断用户是否存在

 

#### 1.分析

 

**请求方法**：**GET** 

 

**url定义**：`/usernames/(?P<username>\w5,20)/`

 

**请求参数**：url路径参数

 

| 参数      | 类型   | 前端是否必须传 | 描述         |

| --------- | ------ | -------------- | ------------ |

| usernames | 字符串 | 是             | 输入的用户名 |

 

 

 

#### 2.后端视图实现

 

```python

from utils.json_fun import to_json_data

from django.views import View

 

 

class CheckUsernameView(View):

    """

    Check whether the user exists 

    GET usernames/(?P<username>\w5,20)/

    """

    def get(self, request, username):

 

        # count = User.objects.get(username=username).count

        data =

            ‘username‘: username,

            ‘count‘: Users.objects.filter(username=username).count()

       

        return to_json_data(data=data)

    

```

 

在项目根目录中的utils目录下创建json_fun.py文件，用于处理json格式转化功能。

 

```python

from django.http import JsonResponse

 

from .res_code import Code

 

 

def to_json_data(errno=Code.OK, errmsg=‘‘, data=None, kwargs=None):

    json_dict = ‘errno‘: errno, ‘errmsg‘: errmsg, ‘data‘: data

 

    if kwargs and isinstance(kwargs, dict) and kwargs.keys():

        json_dict.update(kwargs)

 

    return JsonResponse(json_dict)

```

 

在项目根目录中的utils目录下创建res_code.py文件，用于把后端执行的情况返回给前端。

 

```python

class Code:

    OK                  = "0"

    DBERR               = "4001"

    NODATA              = "4002"

    DATAEXIST           = "4003"

    DATAERR             = "4004"

    METHERR             = "4005"

    SMSERROR            = "4006"

    SMSFAIL             = "4007"

 

    SESSIONERR          = "4101"

    LOGINERR            = "4102"

    PARAMERR            = "4103"

    USERERR             = "4104"

    ROLEERR             = "4105"

    PWDERR              = "4106"

    

    SERVERERR           = "4500"

    UNKOWNERR           = "4501"

 

 

error_map =

    Code.OK                    : "成功",

    Code.DBERR                 : "数据库查询错误",

    Code.NODATA                : "无数据",

    Code.DATAEXIST             : "数据已存在",

    Code.DATAERR               : "数据错误",

    Code.METHERR               : "方法错误",

    Code.SMSERROR              : "发送短信验证码异常",

    Code.SMSFAIL               : "发送短信验证码失败",

 

    Code.SESSIONERR            : "用户未登录",

    Code.LOGINERR              : "用户登录失败",

    Code.PARAMERR              : "参数错误",

    Code.USERERR               : "用户不存在或未激活",

    Code.ROLEERR               : "用户身份错误",

    Code.PWDERR                : "密码错误",

    

    Code.SERVERERR             : "内部错误",

    Code.UNKOWNERR             : "未知错误",

```

 

```python

# url 定义

from django.urls import path, re_path

 

from . import views

 

app_name = "verifications"

 

 

urlpatterns = [

    # image_code_id为uuid格式

    path(‘image_codes/<uuid:image_code_id>/‘, views.ImageCode.as_view(), name=‘image_code‘),

    re_path(‘usernames/(?P<username>\w5,20)/‘, views.CheckUsernameView.as_view(), name=‘check_username‘),

 

]

```

 

 

 

#### 3.前端代码实现    auth.js

 

```javascript

$(function ()

  let $username = $(‘#user_name‘);

  let $img = $(".form-item .captcha-graph-img img");

  let sImageCodeId = "";

 

  // 1、图像验证码逻辑

  generateImageCode();  // 生成图像验证码图片

  $img.click(generateImageCode);  // 点击图片验证码生成新的图片验证码图片

 

  // 2、用户名验证逻辑

  $username.blur(function ()

    fn_check_username();

  );

 

  // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性

  function generateImageCode()

    // 1、生成一个图片验证码随机编号

    sImageCodeId = generateUUID();

    // 2、拼接请求url /image_codes/<uuid:image_code_id>/

    let imageCodeUrl = "/image_codes/" + sImageCodeId + "/";

    // 3、修改验证码图片src地址

    $img.attr(‘src‘, imageCodeUrl)

 

 

 

  // 生成图片UUID验证码

  function generateUUID()

    let d = new Date().getTime();

    if (window.performance && typeof window.performance.now === "function")

      d += performance.now(); //use high-precision timer if available

   

    let uuid = ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function (c)

      let r = (d + Math.random() * 16) % 16 | 0;

      d = Math.floor(d / 16);

      return (c == ‘x‘ ? r : (r & 0x3 | 0x8)).toString(16);

    );

    return uuid;

 

 

  // 判断用户名是否已经注册

  function fn_check_username()

    let sUsername = $username.val();  // 获取用户名字符串

    if (sUsername === "")

      message.showError(‘用户名不能为空！‘);

      return

   

    if (!(/^\w5,20$/).test(sUsername))

      message.showError(‘请输入5-20个字符的用户名‘);

      return

   

 

    // 发送ajax请求，去后端查询用户名是否存在

    $.ajax(

      url: ‘/usernames/‘ + sUsername + ‘/‘,

      type: ‘GET‘,

      dataType: ‘json‘,

    )

      .done(function (res)

        if (res.data.count !== 0)

          message.showError(res.data.username + ‘已注册，请重新输入！‘)

        else

          message.showInfo(res.data.username + ‘能正常使用！‘)

       

      )

      .fail(function ()

        message.showError(‘服务器超时，请重试！‘);

      );

 

 

);

```

 

 

 

## 

 

### 五、判断手机号是否注册功能实现

 

#### 1.分析

 

**请求方法**：**GET** 

 

**url定义**：`/mobiles/(?P<mobile>1[3-9]\d9)/`

 

**请求参数**：url路径参数

 

| 参数   | 类型   | 前端是否必须传 | 描述             |

| ------ | ------ | -------------- | ---------------- |

| mobile | 字符串 | 是             | 用户输入的手机号 |

 

 

 

#### 2.后端代码实现

 

```python

# 在verifications目录下的views.py文件中定义如下类视图：

 

 

class CheckUsernameView(View):

    """

    Check whether the user exists

    GET usernames/(?P<username>\w5,20)/

    """

    def get(self, request, username):

 

        data =

            ‘username‘: username,

            ‘count‘: Users.objects.filter(username=username).count()

       

        return to_json_data(data=data)

```

 

```python

# 在verifications目录下的urls.py文件中定义如下路由：

 

from django.urls import path, re_path

 

from . import views

 

app_name = "verifications"

 

 

urlpatterns = [

    re_path(‘mobiles/(?P<mobile>1[3-9]\d9)/‘, views.CheckMobileView.as_view(), name=‘check_mobiles‘),

]

```

 

 

 

####3.前端代码实现    auth.js  

 

```javascript

$(function ()

  let $username = $(‘#user_name‘);  // 选择id为user_name的网页元素，需要定义一个id为user_name

  let $img = $(".form-item .captcha-graph-img img");  // 获取图像标签

  let sImageCodeId = "";  // 定义图像验证码ID值

  let $mobile = $(‘#mobile‘);  // 选择id为mobile的网页元素，需要定义一个id为mobile

 

  // 1、图像验证码逻辑

  generateImageCode();  // 生成图像验证码图片

  $img.click(generateImageCode);  // 点击图片验证码生成新的图片验证码图片

 

  // 判断用户是否注册

  // 2、用户名验证逻辑

  $username.blur(function ()

    fn_check_usrname();

  );

 

  // 3、手机号验证逻辑

  // 判断用户手机号是否注册

  $mobile.blur(function ()

    fn_check_mobile();

  );

 

  // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性

  function generateImageCode()

    // 1、生成一个图片验证码随机编号

    sImageCodeId = generateUUID();

    // 2、拼接请求url /image_codes/uuid:image_code_id/

    let imageCodeUrl = "/image_codes/" + sImageCodeId + "/";

    // 3、修改验证码图片src地址

    $img.attr(‘src‘, imageCodeUrl)

 

 

 

  // 生成图片UUID验证码

  function generateUUID()

    let d = new Date().getTime();

    if (window.performance && typeof window.performance.now === "function")

      d += performance.now(); //use high-precision timer if available

   

    let uuid = ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function (c)

      let r = (d + Math.random() * 16) % 16 | 0;

      d = Math.floor(d / 16);

      return (c == ‘x‘ ? r : (r & 0x3 | 0x8)).toString(16);

    );

    return uuid;

 

 

 

 

  // 判断用户名是否已经注册

  function fn_check_usrname()

    let sUsername = username.val();  // 获取用户名字符串

    if (sUsername === "")

      message.showError(‘用户名不能为空！‘);

      return

   

    // test()方法 判断字符串中是否匹配到正则表达式内容，返回的是boolean值 ( true / false )

    if (!(/^\w5,20/).test(sUsername))

      message.showError(‘请输入5-20个字符的用户名‘);

      return

   

 

 

 

    // 发送ajax请求，去后端查询用户名是否存在

    $.ajax(

      url: ‘/usernames/‘ + sUsername + ‘/‘,

      type: ‘GET‘,

      dataType: ‘json‘,

      // data:‘code‘:300268

    )

      .done(function (res)

        if (res.data.count !== 0)

          message.showError(res.data.username + ‘已注册，请重新输入！‘)

        else

          message.showInfo(res.data.username + ‘能正常使用！‘)

       

      )

      .fail(function ()

        message.showError(‘服务器超时，请重试！‘);

      );

 

 

 

  function fn_check_mobile()

    let sMobile = mobile.val();  // 获取用户输入的手机号码字符串

    let SreturnValue = "";

    if (sMobile === "")

      message.showError(‘手机号不能为空！‘);

      return

   

    if (!(/^1[345789]\d9/).test(sMobile))

      message.showError(‘手机号码格式不正确，请重新输入！‘);

      return

   

 

    $.ajax(

      url: ‘/mobiles/‘ + sMobile + ‘/‘,

      type: ‘GET‘,

      dataType: ‘json‘,

      async: false // 把async关掉

    )

      .done(function (res)

        if (res.data.count !== 0)

          message.showError(res.data.mobile + ‘已注册，请重新输入！‘)

          SreturnValue = ""

        else

          SreturnValue = "success"

       

      )

      .fail(function ()

        message.showError(‘服务器超时，请重试！‘);

        SreturnValue = ""

      );

    return SreturnValue

 

 

 

);

 

```