1.后端代碼
具體代碼如下：
# GET /api/v1.0/sms_codes/<mobile>?image_code=xxxx&image_code_id=xxxx
@api.route("/sms_codes/<re(r'1[34578]\d{9}'):mobile>")
def get_sms_code(mobile):"""獲取短信驗證碼"""# 獲取參數image_code = request.args.get("image_code")image_code_id = request.args.get("image_code_id")# 校驗參數if not all([image_code_id, image_code]):# 表示參數不完整return jsonify(errno=RET.PARAMERR, errmsg="參數不完整")# 業務邏輯處理# 從redis中取出真實的圖片驗證碼try:real_image_code = redis_store.get("image_code_%s" % image_code_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="redis數據庫異常")# 判斷圖片驗證碼是否過期if real_image_code is None:# 表示圖片驗證碼沒有或者過期return jsonify(errno=RET.NODATA, errmsg="圖片驗證碼失效")# 刪除redis中的圖片驗證碼，防止用戶使用同一個圖片驗證碼驗證多次try:redis_store.delete("image_code_%s" % image_code_id)except Exception as e:current_app.logger.error(e)# 與用戶填寫的值進行對比if real_image_code.lower() != image_code.lower():# 表示用戶填寫錯誤return jsonify(errno=RET.DATAERR, errmsg="圖片驗證碼錯誤")# 判斷對于這個手機號的操作，在60秒內有沒有之前的記錄，如果有，則認為用戶操作頻繁，不接受處理try:send_flag = redis_store.get("send_sms_code_%s" % mobile)except Exception as e:current_app.logger.error(e)else:if send_flag is not None:# 表示在60秒內之前有過發送的記錄return jsonify(errno=RET.REQERR, errmsg="請求過于頻繁，請60秒后重試")# 判斷手機號是否存在try:user = User.query.filter_by(mobile=mobile).first()except Exception as e:current_app.logger.error(e)else:if user is not None:# 表示手機號已存在return jsonify(errno=RET.DATAEXIST, errmsg="手機號已存在")# 如果手機號不存在，則生成短信驗證碼sms_code = "%06d" % random.randint(0, 999999)# 保存真實的短信驗證碼try:redis_store.setex("sms_code_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)# 保存發送給這個手機號的記錄，防止用戶在60s內再次出發發送短信的操作redis_store.setex("send_sms_code_%s" % mobile, constants.SEND_SMS_CODE_INTERVAL, 1)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="保存短信驗證碼異常")# 發送短信# 使用celery異步發送短信, delay函數調用后立即返回（非阻塞）# send_sms.delay(mobile, [sms_code, int(constants.SMS_CODE_REDIS_EXPIRES/60)], 1)# 返回異步任務的對象result_obj = send_sms.delay(mobile, [sms_code, int(constants.SMS_CODE_REDIS_EXPIRES/60)], 1)print(result_obj.id)# 通過異步任務對象的get方法獲取異步任務的結果, 默認get方法是阻塞的ret = result_obj.get()print("ret=%s" % ret)# 返回值# 發送成功return jsonify(errno=RET.OK, errmsg="發送成功")
2.前端html代碼
具體代碼如下：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>愛家-注冊</title><link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"><link href="/static/css/reset.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/register.css" rel="stylesheet">
</head>
<body><div class="container"><div class="logo-bar"><a href="/"><img src="/static/images/logo@128x59.png"></a></div><form class="form-register"><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-mobile fa-2x fa-fw"></i></div><input type="number" class="form-control" name="mobile" id="mobile" placeholder="手機號" required></div></div><div class="error-msg" id="mobile-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-image fa-lg fa-fw"></i></div><input type="text" class="form-control" name="imagecode" id="imagecode" placeholder="圖片驗證碼" required><div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div></div></div><div class="error-msg" id="image-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-envelope-o fa-lg fa-fw"></i></div><input type="text" class="form-control" name="phonecode" id="phonecode" placeholder="短信驗證碼" required><div class="phonecode input-group-addon"><a class="phonecode-a" href="javascript:;" onclick="sendSMSCode();">獲取驗證碼</a></div></div></div><div class="error-msg" id="phone-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div><input type="password" class="form-control" name="password" id="password" placeholder="密碼" required></div></div><div class="error-msg" id="password-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div><input type="password" class="form-control" name="password2" id="password2" placeholder="確認密碼" required></div></div><div class="error-msg" id="password2-err"><i class="fa fa-exclamation-circle"></i><span></span></div><button type="submit" class="btn btn-lg btn-theme btn-block">立即注冊</button><p class="login-a">已有賬號，<a href="/login.html">立即登陸</a></p></form></div><script src="/static/js/jquery.min.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script><script src="/static/js/ihome/register.js"></script>
</body>
</html>
3.前端js代碼
具體代碼如下：
function sendSMSCode() {// 點擊發送短信驗證碼后被執行的函數$(".phonecode-a").removeAttr("onclick");var mobile = $("#mobile").val();if (!mobile) {$("#mobile-err span").html("請填寫正確的手機號！");$("#mobile-err").show();$(".phonecode-a").attr("onclick", "sendSMSCode();");return;} var imageCode = $("#imagecode").val();if (!imageCode) {$("#image-code-err span").html("請填寫驗證碼！");$("#image-code-err").show();$(".phonecode-a").attr("onclick", "sendSMSCode();");return;}// 構造向后端請求的參數var req_data = {image_code: imageCode, // 圖片驗證碼的值image_code_id: imageCodeId // 圖片驗證碼的編號，（全局變量）};// 向后端發送請求$.get("/api/v1.0/sms_codes/"+ mobile, req_data, function (resp) {// resp是后端返回的響應值，因為后端返回的是json字符串，// 所以ajax幫助我們把這個json字符串轉換為js對象，resp就是轉換后對象if (resp.errno == "0") {var num = 60;// 表示發送成功var timer = setInterval(function () {if (num >= 1) {// 修改倒計時文本$(".phonecode-a").html(num + "秒");num -= 1;} else {$(".phonecode-a").html("獲取驗證碼");$(".phonecode-a").attr("onclick", "sendSMSCode();");clearInterval(timer);}}, 1000, 60)} else {alert(resp.errmsg);$(".phonecode-a").attr("onclick", "sendSMSCode();");}});
}
