上節我們實現了登陸功能,但是可惜用戶表中沒數據。所以這節我們講如何注冊用戶。
還記得我們之前在登陸頁面 做的那個 注冊賬號的超鏈接么?
我們現在要想想,用戶點擊注冊賬號后,要實現個什么效果?
有 以下幾種設計:
切換到另一個頁面html登陸后顯示用戶名,一個注冊頁面,里面有用戶名密碼確認密碼注冊按鈕。
直接使用用戶在登陸界面輸入的用戶名/密碼,進入后臺完成注冊,給用戶彈窗提示注冊成功!
彈出一個彈層,上面有用戶名/密碼輸入框和注冊按鈕。
4.彈出一個彈窗,上面顯示“公司內部平臺,注冊賬號需要聯系xxx” 然后等別人聯系你了,再由你去數據庫后臺去創建這個用戶。
我們本章節就按照最簡單的方式來,畢竟我們的重點是之后的接口測試模塊,并不是用戶管理模塊。所以我們選擇第2種 ,簡單粗暴。
好,打開login.html,找到這個注冊按鈕,發現它是一個a標簽,a標簽不但在href屬性中可以寫一個超鏈接,也可以在href中寫一個js函數。
這里因為我們要傳遞用戶名/密碼 作為數據,所以href屬性要寫一個js函數,就取名為:()吧。具體寫法::函數名()
然后在下面的已有的標簽內,在login()函數上增加一個()函數
這個注冊函數的 功能 和登陸函數,其實大同小異。都是把用戶名/密碼傳入給后臺。所以格式基本一致,你直接復制粘貼,然后改改就可以:
這里我們接收到返回值后不再 直接彈出寫死的文案了,而是選擇彈出請求返回值,具體顯示什么由后臺決定。而后臺的返回值就是ret。所以我們alert(ret)。
為什么要這么做呢?因為用戶注冊最少有兩種結果:
注冊成功
用戶已存在注冊失敗
其他問題,如密碼過短等等違反你自己定義的規則。
所以為了后續方便我們增加規則等這樣做就會很方便。
然后我們去urls.py中 寫好這個注冊的映射:
然后去views.py中構建好這個()函數
這里可以看到,我們依然是先獲取到了 前端給的用戶名/密碼。
然后從這個./auth. 庫里倒入里User方法。(其實User是orm方式操作用戶表的實例)
然后我們直接用User..方法生成一個用戶,參數為用戶名和密碼。然后保存這個生成的用戶 就是注冊成功了。
但是如果用戶表中已存在這個用戶名,那么,這個生成語句就會報錯。所以我們用try來捕獲這個異常,如果發送錯誤那就是“用戶已經存在”,如實給用戶返回這句話。如果沒問題,那么就返回 注冊成功。
然后我們切換回瀏覽器,確保服務沒有因為報錯而中止。如果報錯中止,就是因我們先寫urls.py后,沒有來得及寫后臺對應函數就切換了,導致熱重起,然后發現沒有函數就報錯停止了。我們現在寫好了,那就直接重啟就好了,如果過程中按照教程出現其他報錯,請留言即可我會耐心解答。
現在我們刷新頁面來測試,先登陸一個賬號:
用戶名 測試開發干貨 密碼123。
1.點擊登陸,提示用戶名密碼錯誤。因為這時候還不存在這個賬號
2.點擊注冊賬號,提示注冊成功
3.再點擊登陸按鈕!
重點來了!仍然報錯哦!
為什么會發生這種事呢?
實際上 賬號已經注冊成功,我們的登陸函數也走到了登陸成功的分支。
我們明明寫好了 要跳轉到/home/ ,但是前端沒有跳轉,還給了個錯誤提示。
這里要引入一個新知識點,就是我們前端 想給后端 傳數據,發送請求,如果不是表單提交,或者超鏈接。只用我們的異步接口請求(就是我們前面用的$.get("url",{參數}{返回動作函數})) 的話,那么后端無論怎么寫重定向語句,都是徒勞的,前端并不會直接跳轉去/home/。
但是我們又不想去大改前端的登陸架構,用什么辦法彌補呢?
答案很簡單,后端可以返回諸如 True/False 0/1 成功/失敗這種字符串。因為前端的js函數里接受到ret就是這個后端返回的字符串。所以前端js可以根據這個ret來作出不同的處理,比如跳轉到/home/。這就像雨化田臺詞 :你東廠辦不了的事,稟告我們西廠,我們西廠來辦。你們管的了的我們要管,管不了的我也要管,先斬后奏html登陸后顯示用戶名,皇權特許,這!就是西廠,夠不夠清楚?
所以趕在這次就會,就要訓練好我們的應急處理能力,將來線上出現bug,我們要以最小代價緊急修復的 次數不會少。你不那每次都完全重構吧?所以這里給大家埋了一個坑,提升一下這方面的經驗。
那么現在我們修改后端login()函數,讓他別操心的重定向了,直接就返回成功 還是 失敗 就行,其余的事交給前端js
然后回到前端js,改動如圖:
其實就是寫了一個if判斷,如果ret是成功倆個字,。那么就用固定的跳轉語句跳到/home/ 如果不是成功倆個字,那么再提示 報錯文案。
現在我們去試登陸一下:用戶名:測試開發干貨 密碼:123
點擊登陸按鈕,發現登陸成功,成功進入了home.html !
好了。到此我們的注冊功能算是開發完成。
然后再補充一點:關于登陸頁面的密碼輸入框:
我們之前 是能顯示出來具體密碼的:
那是因我們input屬性 就是個普通輸入框,不能因我咱們給他起名密碼,瀏覽器就智能的把它當密碼輸入框了。
要想顯示*****,只需要給input標簽 的type屬性 從text改成即可
然后我們打開瀏覽器 再進入到登陸頁面看看:127.0.0.1:8000/login/
可以看到全都已經成功隱藏了。
最后有多疑的同學提問了,那么其他用戶為啥一定要 先經過login.html 登陸成功 再進入home.html主頁呢?她直接訪問:ip:8000/home/ 不可以么?
答案是:目前可以直接訪問,不信你不登陸試試看,一樣可以。那是因我們進入home頁面的函數 home() 并沒有強制要求 檢查登陸狀態。
所以是默認放行的。那么要如何避免這種鉆空子的狀況呢?
答案很簡單,首先我們要給home()函數 加上自帶的登陸態檢查裝飾符 ! 導入后,直接加在home函數頭上即可!
現在你再試試直接瀏覽器訪問:127.0.0.1:8000/home/看看什么效果?
就會報錯 讓你進不去!
然后我們再 去修改login函數中成功登陸的分支,給他加上:
如果用戶一但登陸成功,就調用的真正登陸函數auth.login。然后順便把這個登陸狀態也就是成功的用戶名當作寫進用戶的瀏覽器內,之后用戶就可以成功進入各個頁面了。
現在我們再來試試看:
非登陸狀態 無法直接進入/home/ , 報錯
登陸狀態進入/home/ 成功進入home.html
先進入/login/ ,登陸成功,發現成功跳轉到home.html
上面的測試結果,還有一點需要完善。就是當用戶非登陸狀態,直接進入/home/時候 不應該報錯,而是應該跳轉到login.html頁面讓其先登陸。所以我們繼續改動倆個地方:
函數 也加上 登陸態檢查裝飾符,之后我們幾乎每個重要頁面都要加上這個裝飾符
2.urls.py中加入非登陸狀態 自動跳到登陸頁面的映射
好了,等待重啟,然后刷新頁面我們再進行上述測試!
就會發現,當用戶非登陸狀態時,直接打開/home/ 或者// 的時候,都會先跳到/login/ 頁面上。登陸成功就可以繼續使用,失敗則永遠停留在login.html中,一點空子都不讓鉆。
好了,今天分享到這里了。把這個鏈接發送給你的同事,讓他們試著創建賬號 登陸吧?
你電腦的ip:8000/home/
下期:退出功能實現 + 熟悉 自帶后臺管理平臺
免費原創不易,請小伙伴多多支持,分享+點贊!
留言板小程序入口:留言板
往期目錄,可以點擊公眾號菜單:獲取系列- 接口測試平臺系列 來獲取所有章節!