注册功能之图片验证码：

　　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+视图：

 1 urlpatterns = [
 2     url(r'^image_codes/(?P<image_code_id>[\w-]+)/$',views.ImageCodeView.as_view())
 3 ]
 4 
 5 class ImageCodeView(APIView):
 6     """
 7     接收图片ｉｄ
 8     校验图片id
 9     生成图片验证码
10     保存验证码内容
11     返回验证码图片
12     """
13     def get(self,request,image_code_id):
14         # 生成图片验证码　图片验证码返回的是文本和图片
15         text, image = captcha.generate_captcha()
16         redis_conn = get_redis_connection('verify_codes')
17         redis_conn.setex("img_%s"%image_code_id,constants.IMAGE_CODE_REDIS_EXPIRES,text)
18 
19         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

  1 var vm = new Vue({
  2     el: '#app',
  3     data: {
  4         host:host,
  5         error_name: false,
  6         error_password: false,
  7         error_check_password: false,
  8         error_phone: false,
  9         error_allow: false,
 10         error_image_code: false,
 11         error_sms_code: false,
 12 
 13         username: '',
 14         password: '',
 15         password2: '',
 16         mobile: '', 
 17         image_code: '',
 18         sms_code: '',
 19         allow: false,
 20 
 21         image_code_id:'',
 22         image_code_url:'',
 23     },
 24     mounted:function(){
 25         this.get_image_code()
 26     },
 27     methods: {
 28          // 生成uuid
 29         generate_uuid: function(){
 30             var d = new Date().getTime();
 31             if(window.performance && typeof window.performance.now === "function"){
 32                 d += performance.now(); //use high-precision timer if available
 33             }
 34             var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
 35                 var r = (d + Math.random()*16)%16 | 0;
 36                 d = Math.floor(d/16);
 37                 return (c =='x' ? r : (r&0x3|0x8)).toString(16);
 38             });
 39             return uuid;
 40         },
 41 
 42         get_image_code: function(){
 43             console.log(document.querySelector(".pic_code").getAttribute('src')),
 44         //    保存ｕｕｉｄ
 45             this.image_code_id = this.generate_uuid();
 46         //    生成图片获取路径
 47             this.image_code_url = this.host + '/image_codes/' + this.image_code_id + '/';
 48         },
 49 
 50         check_username: function (){
 51             var len = this.username.length;
 52             if(len<5||len>20) {
 53                 this.error_name = true;
 54             } else {
 55                 this.error_name = false;
 56             }
 57         },
 58         check_pwd: function (){
 59             var len = this.password.length;
 60             if(len<8||len>20){
 61                 this.error_password = true;
 62             } else {
 63                 this.error_password = false;
 64             }        
 65         },
 66         check_cpwd: function (){
 67             if(this.password!=this.password2) {
 68                 this.error_check_password = true;
 69             } else {
 70                 this.error_check_password = false;
 71             }        
 72         },
 73         check_phone: function (){
 74             var re = /^1[345789]\d{9}$/;
 75             if(re.test(this.mobile)) {
 76                 this.error_phone = false;
 77             } else {
 78                 this.error_phone = true;
 79             }
 80         },
 81         check_image_code: function (){
 82             if(!this.image_code) {
 83                 this.error_image_code = true;
 84             } else {
 85                 this.error_image_code = false;
 86             }    
 87         },
 88         check_sms_code: function(){
 89             if(!this.sms_code){
 90                 this.error_sms_code = true;
 91             } else {
 92                 this.error_sms_code = false;
 93             }
 94         },
 95         check_allow: function(){
 96             if(!this.allow) {
 97                 this.error_allow = true;
 98             } else {
 99                 this.error_allow = false;
100             }
101         },
102         // 注册
103         on_submit: function(){
104             this.check_username();
105             this.check_pwd();
106             this.check_cpwd();
107             this.check_phone();
108             this.check_sms_code();
109             this.check_allow();
110         }
111     }
112 });