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

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

1接口设计

1.1说明

条目 说明
请求方法 GET
url定义 /username/(?P<username>\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<username>\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<username>\w{5,20})/',views.check_username_view,name='check_username'),

注意 (?P<username>\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/(?P<mobile>1[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/(?P<mobile>1[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<username>\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/(?P<mobile>1[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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,123评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,031评论 2赞 384
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,723评论 0赞 345
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,357评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,412评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,760评论 1赞 289
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,904评论 3赞 405
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,672评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,118评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,456评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,599评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,264评论 4赞 328
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,857评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,731评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,956评论 1赞 264
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,286评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,465评论 2赞 348