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="data: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();
         }
     }
 });