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

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

1接口設(shè)計

1.1說明

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

1.2 參數(shù)說明

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

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

返回結(jié)果（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返回結(jié)果.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('服務(wù)器連接超時蝗罗，請重試')
                }
            })

完整的代碼

 //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('服務(wù)器連接超時裁蚁，請重試')
                }
            })
    }

同理密碼校驗也是一樣

 // 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接口設(shè)計

1.1說明

條目 說明
請求方法 GET
url定義 /mobile/(?P<mobile>1[3,9]\d{9}) /
參數(shù)格式 url路徑參數(shù)

1.2 參數(shù)說明

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

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

返回結(jié)果（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('服務(wù)器連接超時，請重試');
                }
            })
    }

五崔泵、整合優(yōu)化（json響應(yīng)數(shù)據(jù)結(jié)構(gòu)設(shè)計）

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

1.結(jié)構(gòu)設(shè)計

{
      "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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末入篮，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子幌甘，更是在濱河造成了極大的恐慌潮售，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,607評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件锅风，死亡現(xiàn)場離奇詭異饲做，居然都是意外死亡，警方通過查閱死者的電腦和手機遏弱，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來塞弊，“玉大人漱逸，你說我怎么就攤上這事∮窝兀” “怎么了饰抒？”我有些...
    開封第一講書人閱讀 164,960評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長诀黍。 經(jīng)常有香客問我袋坑，道長，這世上最難降的妖魔是什么眯勾？ 我笑而不...
    開封第一講書人閱讀 58,750評論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任枣宫，我火速辦了婚禮，結(jié)果婚禮上吃环，老公的妹妹穿的比我還像新娘也颤。我一直安慰自己，他們只是感情好郁轻，可當我...
    茶點故事閱讀 67,764評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布翅娶。 她就那樣靜靜地躺著文留，像睡著了一般。 火紅的嫁衣襯著肌膚如雪竭沫。 梳的紋絲不亂的頭發(fā)上燥翅，一...
    開封第一講書人閱讀 51,604評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音蜕提，去河邊找鬼森书。 笑死，一個胖子當著我的面吹牛贯溅，可吹牛的內(nèi)容都是我干的拄氯。 我是一名探鬼主播，決...
    沈念sama閱讀 40,347評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼它浅，長吁一口氣：“原來是場噩夢啊……” “哼译柏！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起姐霍，我...
    開封第一講書人閱讀 39,253評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤鄙麦，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后镊折，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胯府，經(jīng)...
    沈念sama閱讀 45,702評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年恨胚，在試婚紗的時候發(fā)現(xiàn)自己被綠了骂因。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,015評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡赃泡，死狀恐怖寒波，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情升熊，我是刑警寧澤俄烁，帶...
    沈念sama閱讀 35,734評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站级野，受9級特大地震影響页屠，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蓖柔，卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一辰企、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧况鸣，春花似錦蟆豫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0贊 22
  • 一樁弒父案十减，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽栈幸。三九已至，卻和暖如春帮辟，著一層夾襖步出監(jiān)牢的瞬間速址，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工由驹， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留芍锚，地道東北人。 一個月前我還...
    沈念sama閱讀 48,216評論 3贊 371
  • 代替公主和親
    正文 我出身青樓蔓榄，卻偏偏與公主長得像并炮，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子甥郑，可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2贊 355