vue-django实现（云通讯短信验证码）（二）-编写前后端逻辑代码

本文详细介绍了如何使用Django后端配合Vue前端实现短信验证码的发送与验证功能。包括后端接口的定义、代码编写，以及前端组件的设计和调用API的过程。示例展示了发送和验证验证码的HTTP请求、响应结果，并提供了前端模板和方法来展示错误信息和触发请求。

一、后端接口的定义（发送验证码）：

1.请求方式

选项	方案
请求方法	GET
请求地址	http://127.0.0.1:8000/auth/sms_codes/(?P<mobile>1[3-9]\d{9})/

2.请求参数

参数名	类型	是否必传	说明
mobile	string	是	手机号

3.响应结果:JSON

字段	说明
errmsg	响应信息

二、后端代码的编写（发送验证码）：


class SmsCodeView(View):
    def get(self, request, mobile):
        # 获取redis连接对象，存储短信验证码
        try:
            redis_conn = get_redis_connection('verify_code')
        except DatabaseError as e:
            return http.JsonResponse({
                'errmsg': '获取验证码失败'
            })
        # 生成随机6为验证码
        sms_code = '%06d' % random.randint(0, 999999)
        # 存储随机验证码(五分钟的有效期)
        redis_conn.setex('sms_code_%s' % mobile, 300, sms_code)
        # 初始化SmsSDK（将自定义的utils中的常量传入）
        send_code = SmsSDK(accId=utils.ACCID, accToken=utils.ACCTOKEN, appId=utils.APPID)
        # 发送短信验证码（这里的发送验证码是一个耗时操作）
        send_code.sendMessage(tid='1', mobile=mobile, datas=(sms_code, 5))
        # 返回响应
        return http.JsonResponse({
            'errmsg': 'ok'
        })

三、后端接口的定义（验证验证码）：

1.请求方式

选项	方案
请求方法	POST
请求地址	http://127.0.0.1:8000/auth/sms_codes/(?P<mobile>1[3-9]\d{9})/

2.请求参数

参数名	类型	是否必传	说明
mobile	string	是	手机号
sms_code	string	是	验证码

3.响应结果:JSON

字段	说明
errmsg	响应信息

四、后端代码的编写（验证验证码）：

    def post(self, request, mobile):
        # 接受参数
        json_dict = json.loads(request.body.decode())
        # 提取用户传来的短信验证码
        sms_code_client = json_dict.get('sms_code')
        # 判断验证码是否为空
        if not sms_code_client:
            return http.JsonResponse({
                'errmsg': '验证错误'
            })
        # 获取redis连接对象，通过mobile获取存储在redis中的短信验证码
        try:
            redis_conn = get_redis_connection('verify_code')
            sms_code_server = redis_conn.get('sms_code_%s' % mobile)
        except DatabaseError as e:
            print(e)
            return http.JsonResponse({
                'errmsg': '验证错误'
            })
        # 判断短信验证码是否为空、是否与用户传入的相同
        if sms_code_server is None or sms_code_server != sms_code_client:
            return http.JsonResponse({
                'errmsg': '验证错误或图形验证码失效'
            })
        # 验证成功后删除验证码
        redis_conn.delete('sms_code_%s' % mobile)
        # 返回响应
        return http.JsonResponse({
            'errmsg': 'ok'
        })

五、前端代码的编写：

1.sms_code组件

<template>
    <div>
        <div>
            <label for="">手机号: </label>
            <input type="text" value="请输入手机号" v-model="mobile">

        </div>
        <div>
            <label for="">验证码:   </label>
            <input type="text" v-model="sms_code"><button @click="send_code">{{getsmscode}}</button>
            
        </div>
        <div>
             <button @click="check_sms_code">验证</button>
             <span v-show="show_errmsg_status">{{show_errmsg}}</span><br/>
        </div>
       
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        data() {
            return {
                show_errmsg_status:false, //是否显示错误提示信息
                show_errmsg:'',//显示错误提示信息
                getsmscode:'点击获取验证码',
                mobile:'',//手机号
                sms_code:'',//验证码
                url :'/api/auth/sms_code/'

            }
        },
        methods: {
            send_code() {//发送验证码请求
                axios.get(this.url+this.mobile+'/',{
                    responseType: 'json',
                })
                .then(res=>{
                    if(res.data.errmsg='ok'){
                        this.show_errmsg_status=false;
                        this.getsmscode='发送成功'
                    }
                    else{
                        this.show_errmsg_status=true;//显示错误信息
                        this.show_errmsg=res.data.errmsg;
                    }
                })
                .catch(err=>{
                    console.log(err.data);
                })

            },
            check_sms_code(){//验证码验证码请求
                axios.post(this.url+ this.mobile+'/',{
                    sms_code:this.sms_code//携带验证码参数
                })
                .then(res=>{
                    if(res.data.errmsg='ok'){
                        this.show_errmsg_status=false;
                        alert('验证成功')//成功即弹框
                    }
                    else{
                        this.show_errmsg_status=true;//显示错误信息
                        this.show_errmsg=res.data.errmsg;
                    }
                })
                .catch(err=>{
                    console.log(err.data)
                })
                
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>