Django項目用戶注冊功能（二）

一.用戶名注冊校驗功能（后端部分）

1接口設計

1.1說明

條目 說明
請求方法 GET
url定義 /username/(?P<username>\w{5,20}) /
參數(shù)格式 url路徑參數(shù)

1.2 參數(shù)說明

參數(shù)名 類型 是否必須 描述
username 字符串 是 輸入的用戶名

1.3 返回數(shù)據(jù)

返回結果（json數(shù)據(jù)）：

{
      "errno":"0",
      "errmsg":"ok",
       "data":{
                  "username":"username",       #查詢用戶名
                    "count":1,                                #查詢用戶數(shù)量
                   }
}

1.4 截圖與代碼

verification_views 的新增代碼：

#因為需要從數(shù)據(jù)庫查詢，所以導入User模型
from user.models import User                         
def check_username_view(request,username):
    '''
    校驗用戶名
    url：/username/?P<username>\w{5,20}/
    :param request:
    :param username:
    :return:
    '''
    #查詢數(shù)據(jù)庫然后返回
    data = {
        "errno": "0",
        "errmsg": "ok",
        "data": {
            "username": username,  # 查詢用戶名
            "count": User.objects.filter(username=username).count(),  # 查詢用戶數(shù)量
        }
    }
    #返回json數(shù)據(jù)
    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

二.用戶名注冊校驗功能（前端部分）

首先定義狀態(tài)變量,注意每個完整的功能寫完之后要加 ；

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
            }

發(fā)送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
            }
           //發(fā)送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}) /
參數(shù)格式 url路徑參數(shù)

1.2 參數(shù)說明

參數(shù)名 類型 是否必須 描述
mobile 字符串 是 輸入的手機號碼

1.3 返回數(shù)據(jù)

返回結果（json數(shù)據(jù)）：

{
      "errno":"0",
      "errmsg":"ok",
       "data":{
                  "mobile":mobile,       #查詢電話號碼
                    "count":1,                                #查詢電話號碼數(shù)量
                   }
}

1.4 截圖與代碼

因為與user的功能大同小異 所以直接復制改參數(shù)

# 檢驗手機號碼
def check_mobile_view(request,mobile):
    '''
    校驗手機號碼
    url：/mobile/(?P<mobile>1[3,9]\d{9})/
    :param request:
    :param username:
    :return:
    '''
    #查詢數(shù)據(jù)庫然后返回
    data = {
        "errno": "0",
        "errmsg": "ok",
        "data": {
            "mobile": mobile,  # 查詢手機號
            "count": User.objects.filter(mobile=mobile).count(),  # 查詢手機號碼數(shù)量
        }
    }
    #返回json數(shù)據(jù)
    return JsonResponse(data)
07verification_view.jpg

四.手機校驗功能（前端部分）

由于跟用戶名叫校驗邏輯一樣，可以復制并修改變量

 //4.校驗手機號碼
    let $mobile = $('#mobile');
    //blur()光標移開事件
    $mobile.blur(fnCheckMobile);

功能實現(xiàn)

    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
        }
        //發(fā)送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('服務器連接超時，請重試');
                }
            })
    }

五、整合優(yōu)化（json響應數(shù)據(jù)結構設計）

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

1.結構設計

{
      "errno":"0",
      "errmsg":"ok",
       "data":{
                  "mobile":mobile,                     #查詢電話號碼
                    "count":1,                                #查詢電話號碼數(shù)量
                   }
}

字段分析

條目 類型 說明
errno 字符串 錯誤編碼
errmsg 字符串 錯誤信息
data json 返回數(shù)據(jù)

錯誤編碼聲明

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: "數(shù)據(jù)庫查詢錯誤",
    Code.NODATA: "無數(shù)據(jù)",
    Code.DATAEXIST: "數(shù)據(jù)已存在",
    Code.DATAERR: "數(shù)據(jù)錯誤",
    Code.METHERR: "方法錯誤",
    Code.SMSERROR: "發(fā)送短信驗證碼異常",
    Code.SMSFAIL: "發(fā)送短信驗證碼失敗",

    Code.SESSIONERR: "用戶未登錄",
    Code.LOGINERR: "用戶登錄失敗",
    Code.PARAMERR: "參數(shù)錯誤",
    Code.USERERR: "用戶不存在或未激活",
    Code.ROLEERR: "用戶身份錯誤",
    Code.PWDERR: "密碼錯誤",

    Code.SERVERERR: "內(nèi)部錯誤",
    Code.UNKOWNERR: "未知錯誤",
}

2、創(chuàng)建快捷方法

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:
    '''
    #查詢數(shù)據(jù)庫然后返回
    data = {
        "username": username,  # 查詢用戶名
        "count": User.objects.filter(username=username).count(),  # 查詢用戶數(shù)量
    }
    #返回json數(shù)據(jù)
    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:
    '''
    #查詢數(shù)據(jù)庫然后返回
    data = {
        "mobile": mobile,  # 查詢用戶名
        "count": User.objects.filter(mobile=mobile).count(),  # 查詢用戶數(shù)量
    }
    #返回json數(shù)據(jù)
    return json_response(data=data)

效果圖


08效果圖.jpg

最后別忘記推送到 碼云

 $ git add .
 $ git commit -m 'update projects'
 $ git push origin master
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容