美文网首页
Django项目用户注册功能（二）

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

作者: 违心唯心 | 来源:发表于2019-08-08 12:48 被阅读0次

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

    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

    相关文章

      网友评论

          本文标题：Django项目用户注册功能（二）

          本文链接：https://www.haomeiwen.com/subject/jwltjctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Django项目用户注册功能（二）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！