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+視圖：

 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 });