Django与Vue交互，实现注册的图片验证码没有加载的原因

注册功能之图片验证码：

　　1.实现过程

　　传递uuid给后端，再发送图片验证码的请求给后端，后端存储uuid并生成图片验证码保存到redis，然后将图片验证码返回给前端。

　　当用户输入图片验证码的时候，前端会发送uuid和用户输入的图片验证码内容给后端，后端进行比较校验。

　　2.实现步骤

　　后端：实现接口，获取图片验证码，生成图片验证码，保存图片验证码到redis，返回图片验证码到前端

　　前端：uuid作为验证码图片的标识，并通过url传递到后端，实现uuid生成，实现获取验证码的src内容，绑定用户点击事件

　　3.BUG1

　　Vue的js函数实现完成后，前端页面没有显示出图片相关信息

　　产生原因：前端获取验证码图片的函数有问题；

　　解决方案：修改函数名，解决问题

　　4.BUG2

　　Vue的js函数实现完成后，前端页面有图片，但是不是目标图片

　　产生原因：前端获取验证码的请求路径不能成功访问，请求函数有问题；

　　解决方案：修改后端url正则表达式，成功匹配到uuid，可以正常访问

总结：图片的显示是前端在页面加载完成后，进入到Vue入口函数加载js，前端加载js的时候，会生成url中需要传递的图片id以及生成获取图片验证码的url，

不论是src属性还是用户点击都可以发送获取图片验证码的请求，在前后端服务都开启的情况下，如果出现异常，通过url访问进行测试。

　　5.后端代码　　

　　url+视图：

urlpatterns = [
    url(r'^image_codes/(?P<image_code_id>[w-]+)/$',views.ImageCodeView.as_view())
]

class ImageCodeView(APIView):
    """
    接收图片ｉｄ
    校验图片id
    生成图片验证码
    保存验证码内容
    返回验证码图片
    """
    def get(self,request,image_code_id):
        # 生成图片验证码　图片验证码返回的是文本和图片
        text, image = captcha.generate_captcha()
        redis_conn = get_redis_connection('verify_codes')
        redis_conn.setex("img_%s"%image_code_id,constants.IMAGE_CODE_REDIS_EXPIRES,text)

        return HttpResponse(image,content_type='images/jpg')

　　6.前端代码

　　html + Vue

<li>
<label>图形验证码:</label>
<input type="text" v-model="image_code" @blur="check_image_code" name="pic_code" id="pic_code" class="msg_input">
<img :src="image_code_url" @click="get_image_code" alt="图形验证码" class="pic_code">
<span v-show="error_image_code" class="error_tip">请填写图片验证码</span>
</li>

　　Vue

var vm = new Vue({
    el: '#app',
    data: {
        host:host,
        error_name: false,
        error_password: false,
        error_check_password: false,
        error_phone: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        username: '',
        password: '',
        password2: '',
        mobile: '', 
        image_code: '',
        sms_code: '',
        allow: false,

        image_code_id:'',
        image_code_url:'',
    },
    mounted:function(){
        this.get_image_code()
    },
    methods: {
         // 生成uuid
        generate_uuid: function(){
            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;
        },

        get_image_code: function(){
            console.log(document.querySelector(".pic_code").getAttribute('src')),
        //    保存ｕｕｉｄ
            this.image_code_id = this.generate_uuid();
        //    生成图片获取路径
            this.image_code_url = this.host + '/image_codes/' + this.image_code_id + '/';
        },

        check_username: function (){
            var len = this.username.length;
            if(len<5||len>20) {
                this.error_name = true;
            } else {
                this.error_name = false;
            }
        },
        check_pwd: function (){
            var len = this.password.length;
            if(len<8||len>20){
                this.error_password = true;
            } else {
                this.error_password = false;
            }        
        },
        check_cpwd: function (){
            if(this.password!=this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }        
        },
        check_phone: function (){
            var re = /^1[345789]d{9}$/;
            if(re.test(this.mobile)) {
                this.error_phone = false;
            } else {
                this.error_phone = true;
            }
        },
        check_image_code: function (){
            if(!this.image_code) {
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }    
        },
        check_sms_code: function(){
            if(!this.sms_code){
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },
        check_allow: function(){
            if(!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 注册
        on_submit: function(){
            this.check_username();
            this.check_pwd();
            this.check_cpwd();
            this.check_phone();
            this.check_sms_code();
            this.check_allow();
        }
    }
});