Flask專案之手機端租房網站的實戰開發（五）
阿新 • • 發佈：2019-01-06
說明：該篇部落格是博主一字一碼編寫的，實屬不易，請尊重原創，謝謝大家！
接著上一篇部落格繼續往下寫 ：https://blog.csdn.net/qq_41782425/article/details/85706012
注：在此專案中我不會使用程式碼塊插入程式碼，而是通過插入圖片來進行演示，防止CV大法，你懂得~
目錄
一丶圖片驗證碼前端編寫
1.當用戶進入到註冊頁後，頁面進行重新整理，所以在static前端靜態資源register.js中定義一個generateImageCode函式，當頁面載入完後，形成圖片驗證碼的後端地址， 設定到頁面中，讓瀏覽請求驗證碼圖片，同理在register.html中onclick點選驗證碼圖片時，也要觸發generateImageCode函式
register.html
<div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div>register.js
$(document).ready(function() {
generateImageCode();}2.生成圖片驗證碼編號兩種方式：第一種是時間軸；第二種是UUID全域性唯一識別符號，這裡我們使用UUID
- step1 在js中獲取UUID的值（這裡在網上找的一個程式碼）
function generateUUID() { var d = new Date().getTime(); if(window.performance && typeof window.performance.now === "function"){ d += performance.now(); //use high-precision timer if available } var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = (d + Math.random()*16)%16 | 0; d = Math.floor(d/16); return (c=='x' ? r : (r&0x3|0x8)).toString(16); }); return uuid; }
- step2 在generateImageCode函式中呼叫generateUUID，將生成的UUID賦值給imageCodeId變數，記得先使用var在函式外宣告該變數
function generateImageCode() {
// 生成圖片驗證碼編號
imageCodeId = generateUUID();
}3.拼接二維碼圖片的url地址，設定register.html中圖片二維碼div標籤class=image_code下的img標籤的src地址為拼接後的url，也就是二維碼圖片的連結地址
var url = "/api/v1.0/image_codes/" + imageCodeId;
$(".image-code img").attr("src", url);4.執行程式，清除瀏覽器快取，輸入http://127.0.0.1:5000/register.html後，檢視註冊頁面二維碼生成是否成功
5.在後端redis資料庫中成功生成image_code_uuid的key了
6.效果圖，滑鼠連續點選圖片驗證碼，請注意驗證碼
二丶簡訊驗證碼後端編寫
1.傳送簡訊服務介紹，這裡使用的是容聯雲，雲通訊
- step1 需要在官網https://www.yuntongxun.com/進行註冊，註冊時會通過打電話形式告訴你驗證碼，註冊成功後會贈送8元測試費用，如下圖
- step2 然後選擇測試平臺，新增測試手機號，最多三個，驗證成功才能新增上
- step3 進入開發文件---Rest API----簡訊----簡訊傳送介面，具體文件說明請到官網自尋檢視
- step4 我們直接去下載官方給開發人員封裝好的工具SDK，找到Demo示例，然後在文章上方點選Demo下載，找到python語言對應的SDK進行下載即可
- step5 解壓後的目錄檔案如下，請檢視README.txt等說明檔案，DEMO問案列，這裡我們只需要將SDK檔案拷貝到專案中的libs目錄下，並命名為yuntongxun，然後再將DEMO資料夾中的SendTemplateSMS.py檔案拷貝到yuntongxun目錄下
2.封裝傳送簡訊輔助工具
- step1 在libs以及雲通訊目錄下建立init檔案，使其變成python的包
- step2 在SendTemplateSMS.py檔案中建立一個CCP的類，用於封裝傳送簡訊的輔助類，目的是在我們呼叫sendTemplateSMS方法的時候，只初始化一次REST SDK，使用python單例達到不管建立多少個物件，都只初始化一次
- step3 將雲通訊開發者主賬號中的ACCOUNT SID和AUTH TOKEN以及AppID，複製到程式碼中
- step4 編寫測試指令碼，內容分為驗證碼9527，有效期5分鐘，使用測試模板1
- step5 執行sendTemplateSMS程式，最下面的statusCode為000000，代表簡訊傳送成功，在官網簡訊介面有詳細說明
- step6 此時手機便收到了簡訊
- step7 修改程式碼，不需要使用官方的程式碼將result字典資料進行遍歷列印，而是隻獲取狀態statusCode進行判斷，如果為000000代表傳送成功返回0，否則傳送失敗返回-1
檢視執行結果，驗證邏輯沒有問題
- step8 將sendTemplateSMS重新命名為sendSMS，為了後面使用方便
3.定義獲取簡訊介面
- step1 在介面檔案verify_code中定義一個get_sms_code的檢視函式
def get_sms_code()- step2 構建路由規則，同理與構建圖片驗證碼一樣，使用restful風格，並且需要有一個簡訊驗證碼的編碼，以手機進行編號，之前在分析圖片驗證碼時，已經說過傳送簡訊驗證碼時需攜帶圖片驗證碼的文字內容以及圖片驗證碼的編號，所以路由如下
# GET /api/v1.0/sms_codes/<mobile>?image_code=xxxx&image_code_id=xxxx- step3 獲取image_code以及image_code_id
image_code = request.args.get("image_code")
image_code_id = request.args.get("image_code_id")- step4 校驗引數
# 校驗引數
if not all([image_code, image_code_id]):
# 引數不完整返回對應錯誤
return jsonify(errno=RET.PARAMERR, errmsg="引數不完整")- step5 業務邏輯處理，從redis資料庫取出驗證碼與使用者輸入的驗證碼進行校驗，期間需要對驗證碼是否存在進行判斷
- step6 接下來判斷手機號是否存在
- step7 隨機生成6位數驗證碼（使用字串格式化的方式來生成，從0到999999，當不足6位時，以0做填充）
sms_code = "%06d" % random.randint(0, 999999)- step8 在redis資料庫中儲存真實的簡訊驗證碼
- step9 傳送簡訊
- step10 異常說明
- 放在try與except中的程式碼越少越好，會影響程式執行效率
三丶測試向後端介面傳送簡訊驗證碼
- step1 開啟Postman測試工具，傳送介面路由127.0.0.1:5000/api/v1.0/sms_codes/180xxxxxx96?image_code&image_code_id
- step2 執行專案
- step3 在瀏覽器輸入http://127.0.0.1:5000/register.html，進入專案註冊頁面
- step4 回到Postman工具，取消引數，什麼都不傳的情況下，出現如下錯誤資訊，就是我們在程式中定義的錯誤資訊
- step5 此時重新整理http://127.0.0.1:5000/register.html註冊頁，檢視驗證碼，並在redis資料中獲取驗證碼
獲取redis資料庫中圖片驗證碼的文字值與註冊頁圖片二維碼的值一樣
- step6 當過了180s後也就是我們在constants.py中設定的圖片驗證碼有效期，在Postman工具中傳送地址，提示 我們定義的錯誤圖片驗證碼失效，在程式中的邏輯為無法在redis資料庫中獲取image_code_id鍵的值，或者說不存在此鍵，返回結果為None
- step7 重新整理註冊頁面，獲取新的驗證碼，在Postman工具中向錯誤號碼傳送驗證碼，或者說是未在雲通訊測試平臺關聯的號碼傳送驗證碼，則出現以下錯誤提示，這個提示就是我們在介面檔案中寫的res不等於0的時候，返回錯誤的json格式的錯誤資訊
- step8 重新整理http://127.0.0.1:5000/register.html，將最新的驗證碼儲存到redis資料庫，在Postman工具中向正確地址傳送正確號碼，返回的響應資料為傳送成功，如下圖所示
註冊頁介面
redis資料庫中的圖片驗證碼值
Postman響應資料
