vue 從后端拿到驗證碼並點擊刷新

驗證碼登錄的實現思路
1.前端從后端拿到驗證碼圖片
2.輸入驗證碼進行登錄
3.后端拿到驗證碼進行比對，正確登錄成功。

前端請求驗證碼直接寫在img標簽中即可，不必單獨發送axios請求

 

 

// template
           <a-input
              style="width:60%"
              size="large"
              type="text"
              placeholder="驗證碼: "
              v-decorator="[
                'verification',
                {rules: [{ required: true, message: '請輸入驗證碼' }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="picture" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
            <img style="float:right;height:40px" @click="replace" :src="imgCode" alt="">

//js
            data () {
               retrun {
                 imgCode: 'http://192.168.1.119:8000/cms/getCaptcha'
               }
            }
            replace () {
              const num = Math.ceil(Math.random() * 10) // 生成一個隨機數（防止緩存）
              this.imgCode = 'http://192.168.1.119:8000/cms/getCaptcha?' + num
            }