发送短信前端实现

• 在 main.js 文件的 sendSMSCode 方法中，使用 ajax 进行发送短信请求

// 发送短信验证码
function sendSMSCode() {
    // 校验参数，保证输入框有数据填写
    $(".get_code").removeAttr("onclick");
    var mobile = $("#register_mobile").val();
    if (!mobile) {
        $("#register-mobile-err").html("请填写正确的手机号！");
        $("#register-mobile-err").show();
        $(".get_code").attr("onclick", "sendSMSCode();");
        return;
    }
    var imageCode = $("#imagecode").val();
    if (!imageCode) {
        $("#image-code-err").html("请填写验证码！");
        $("#image-code-err").show();
        $(".get_code").attr("onclick", "sendSMSCode();");
        return;
    }

    // 发送短信验证码

    var params = {
        "mobile": mobile,
        "image_code": imageCode,
        "image_code_id": imageCodeId
    }

    $.ajax({
        // 请求地址
        url: "/passport/smscode",
        // 请求方式
        method: "POST",
        // 请求内容
        data: JSON.stringify(params),
        // 请求内容的数据类型
        contentType: "application/json",
        // 响应数据的格式
        dataType: "json",
        success: function (resp) {
            if (resp.errno == "0") {
                // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                var num = 60;
                // 设置一个计时器
                var t = setInterval(function () {
                    if (num == 1) {
                        // 如果计时器到最后, 清除计时器对象
                        clearInterval(t);
                        // 将点击获取验证码的按钮展示的文本回复成原始文本
                        $(".get_code").html("获取验证码");
                        // 将点击按钮的onclick事件函数恢复回去
                        $(".get_code").attr("onclick", "sendSMSCode();");
                    } else {
                        num -= 1;
                        // 展示倒计时信息
                        $(".get_code").html(num + "秒");
                    }
                }, 1000)
            } else {
                // 表示后端出现了错误，可以将错误信息展示到前端页面中
                $("#register-sms-code-err").html(resp.errmsg);
                $("#register-sms-code-err").show();
                // 将点击按钮的onclick事件函数恢复回去
                $(".get_code").attr("onclick", "sendSMSCode();");
                // 如果错误码是4004，代表验证码错误，重新生成验证码
                if (resp.errno == "4004") {
                    generateImageCode()
                }
            }
        }
    })
}

• 进行代码测试，发现在请求发送短信的时候提示如下：

• 暂时关闭 csrf_token 的校验，去 init/__init__.py 文件中注释 csrf_token 保护功能，先将当前业务调通。

def create_app(config_name):
    """通过传入不同的配置名字，初始化其对应配置的应用实例"""

    ...
    # 开启csrf保护，暂时关闭
    # CSRFProtect(app)
    ...
    return app

• 再次运行测试，页面正常倒计时，说明短信发送成功

修改现有前端页面 bug

$('.form_group').on('click',function(){
    $(this).children('input').focus()
})

$('.form_group input').on('focusin',function(){
    $(this).siblings('.input_tip').animate({'top':-5,'font-size':12},'fast')
    $(this).parent().addClass('hotline');
})