Django项目用户注册功能（二）

一.用户名注册校验功能（后端部分）

1接口设计

1.1说明

条目	说明
请求方法	GET
url定义	/username/(?P\w{5,20}) /
参数格式	url路径参数

1.2 参数说明

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

1.3 返回数据

返回结果（json数据）：

{
      "errno":"0",
      "errmsg":"ok",
       "data":{
                  "username":"username",       #查询用户名
                    "count":1,                                #查询用户数量
                   }
}

1.4 截图与代码

verification_views 的新增代码：

#因为需要从数据库查询，所以导入User模型
from user.models import User                         
def check_username_view(request,username):
    '''
    校验用户名
    url：/username/?P\w{5,20}/
    :param request:
    :param username:
    :return:
    '''
    #查询数据库然后返回
    data = {
        "errno": "0",
        "errmsg": "ok",
        "data": {
            "username": username,  # 查询用户名
            "count": User.objects.filter(username=username).count(),  # 查询用户数量
        }
    }
    #返回json数据
    return JsonResponse(data)

01verification_view.jpg

verification_urls 的新增代码：

re_path('username/(?P\w{5,20})/',views.check_username_view,name='check_username'),

注意 (?P\w{5,20})/ 这个()一定 要加上，不然会报错

02verification_urls.jpg

03返回结果.jpg

二.用户名注册校验功能（前端部分）

首先定义状态变量,注意每个完整的功能写完之后要加 ；

let isUsernameReady = false,
        //密码是否准备
        isPasswordReady = false,
        //手机是否准备
        isMobileReady   = false,
        //短信验证码是否准备
        isSmsCodeReady  = false ;

然后 校验功能

//用户名校验,鼠标离开用户名输入框就校验
    let $username = $('#username');
    //blur()光标移开事件
    $username.blur(fnCheckUsername);

校验用户名

 //校验用户名
            isUsernameReady = false;
            //获取输入的用户名
            let sUsername = $username.val();
            //用户名为空
            if (sUsername === ''){
                message.showError('用户名不能为空');
                //切记要返回，不然会一直运行
                return
            }
            //用户名格式不正确
            if (!(/^\w{5,20}$/).test(sUsername)){
                message.showError('请输入5-20位的用户名');
                return
            }

发送ajax

 $.ajax({
                url: '/username/'+ sUsername + '/',
                type: 'GET',
                dataType:'json',
                success:function (res) {
                    if (res.data.count !== 0){
                        message.showError(res.data.username + '用户名已被注册，请重新输入')
                    }else {
                        message.showInfo(res.data.username + '可以使用')
                    }
                },
                error:function () {
                    message.showError('服务器连接超时，请重试')
                }
            })

完整的代码

 //2. 校验功能
    //用户名校验,鼠标离开用户名输入框就校验
    let $username = $('#username');
    //blur()光标移开事件
    $username.blur(fnCheckUsername);

    function fnCheckUsername() {
            //校验用户名
            isUsernameReady = false;
            //获取输入的用户名
            let sUsername = $username.val();
            //用户名为空
            if (sUsername === ''){
                message.showError('用户名不能为空');
                //切记要返回，不然会一直运行
                return
            }
            //用户名格式不正确
            if (!(/^\w{5,20}$/).test(sUsername)){
                message.showError('请输入5-20位的用户名');
                return
            }
           //发送ajax
            $.ajax({
                url: '/username/'+ sUsername + '/',
                type: 'GET',
                dataType:'json',
                success:function (res) {
                    if (res.data.count !== 0){
                        message.showError(res.data.username + '用户名已被注册，请重新输入')
                    }else {
                        message.showInfo(res.data.username + '可以使用')
                    }
                },
                error:function () {
                    message.showError('服务器连接超时，请重试')
                }
            })
    }

同理密码校验也是一样

 // 3.检测密码是否一致
    let $passwordRepeat = $('input[name="password_repeat"]');
    $passwordRepeat.blur(fnCheckPassword);

    function fnCheckPassword () {
        isPasswordReady = false;
        let password = $('input[name="password"]').val();
        let passwordRepeat = $passwordRepeat.val();
        if (password === '' || passwordRepeat === ''){
            message.showError('密码不能为空');
            return
        }
        if (password !== passwordRepeat){
            message.showError('两次密码输入不一致');
            return
        }
        if (password === passwordRepeat){
            isPasswordReady = true
        }
    }

三、手机号注册校验

1接口设计

1.1说明

条目	说明
请求方法	GET
url定义	/mobile/(?P1[3,9]\d{9}) /
参数格式	url路径参数

1.2 参数说明

参数名	类型	是否必须	描述
mobile	字符串	是	输入的手机号码

1.3 返回数据

返回结果（json数据）：

{
      "errno":"0",
      "errmsg":"ok",
       "data":{
                  "mobile":mobile,       #查询电话号码
                    "count":1,                                #查询电话号码数量
                   }
}

1.4 截图与代码

因为与user的功能大同小异 所以直接复制改参数

# 检验手机号码
def check_mobile_view(request,mobile):
    '''
    校验手机号码
    url：/mobile/(?P1[3,9]\d{9})/
    :param request:
    :param username:
    :return:
    '''
    #查询数据库然后返回
    data = {
        "errno": "0",
        "errmsg": "ok",
        "data": {
            "mobile": mobile,  # 查询手机号
            "count": User.objects.filter(mobile=mobile).count(),  # 查询手机号码数量
        }
    }
    #返回json数据
    return JsonResponse(data)

07verification_view.jpg

四.手机校验功能（前端部分）

由于跟用户名叫校验逻辑一样，可以复制并修改变量

 //4.校验手机号码
    let $mobile = $('#mobile');
    //blur()光标移开事件
    $mobile.blur(fnCheckMobile);

功能实现

    function fnCheckMobile() {
        isMobileReady  = false;
        let sMobile = $mobile.val();
        if (sMobile === ''){
            message.showError('手机号码不能为空，请重新输入！');
            return
        }
        if (!(/^1[3,9]\d{9}$/).test(sMobile)){
            message.showError('请重新输入11位的手机号码！');
            return
        }
        //发送ajax
         $.ajax({
                url: '/mobile/'+ sMobile + '/',
                type: 'GET',
                dataType:'json',
                success:function (res) {
                    if (res.data.count !== 0){
                        message.showError('手机号码'+res.data.mobile + '已被注册，请重新输入');
                    }else {
                        message.showInfo('手机号码'+res.data.mobile + '可以使用');
                        isMobileReady = true
                    }
                },
                error:function () {
                    message.showError('服务器连接超时，请重试');
                }
            })
    }

五、整合优化（json响应数据结构设计）

目的
1.减少代冗余（重复），提高复用性，解耦
(https://baike.baidu.com/item/%E8%A7%A3%E8%80%A6
)
2.分工协作更容易

1.结构设计

{
      "errno":"0",
      "errmsg":"ok",
       "data":{
                  "mobile":mobile,                     #查询电话号码
                    "count":1,                                #查询电话号码数量
                   }
}

字段分析

条目	类型	说明
errno	字符串	错误编码
errmsg	字符串	错误信息
data	json	返回数据

错误编码声明

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: "未知错误",
}

2、创建快捷方法

def json_response(errno=Code.OK,errmsg='',data=None,kwargs=None):
   json_dict= {
       'errno':errno,
       'errmsg':errmsg,
       'data':data,
   }
   if kwargs and isinstance(kwargs,dict):
       json_dict.update(kwargs)
   return JsonResponse(json_dict)

views 新的代码

from utils.res_code import json_response
#检验用户名
def check_username_view(request,username):
    '''
    校验用户名
    url：/username/?P\w{5,20}/
    :param request:
    :param username:
    :return:
    '''
    #查询数据库然后返回
    data = {
        "username": username,  # 查询用户名
        "count": User.objects.filter(username=username).count(),  # 查询用户数量
    }
    #返回json数据
    return json_response(data=data)

def check_mobile_view(request,mobile):
    '''
    校验手机号码
    url：/mobile/(?P1[3,9]\d{9})/
    :param request:
    :param username:
    :return:
    '''
    #查询数据库然后返回
    data = {
        "mobile": mobile,  # 查询用户名
        "count": User.objects.filter(mobile=mobile).count(),  # 查询用户数量
    }
    #返回json数据
    return json_response(data=data)

效果图

08效果图.jpg

最后别忘记推送到 码云

 $ git add .
 $ git commit -m 'update projects'
 $ git push origin master