1. 程式人生 > 實用技巧 >Vue聯調,圖片及簡訊驗證碼

Vue聯調,圖片及簡訊驗證碼

1.vue傳送簡訊邏輯

  • 前端函式如下,js方法程式碼無需更改,前端程式碼邏輯在components\common\lab_header.vue

  • 只需要修改components\axios_api\http.js中呼叫的後端地址

// axios.defaults.baseURL = "http://127.0.0.1:8000/"
axios.defaults.baseURL = "http://192.168.56.100:8888/"

手機驗證碼vue

    // 獲取手機驗證碼
   methods: {
    sendcode() {
      // 0. 判斷是否傳送中
      if (this.is_send) {
        return
      }
      this.check_phone()
      this.check_imgcode()
      if (this.phone_error || this.imgCode_error) {
        return false
      }
      // 3、簡訊傳送
      // imgCode: '',
      // uuid: '',
      var data = { phone: this.phone, image_code_uuid: this.uuid, image_code: this.imgCode }
      this.is_send = true
      send_phone_code_post(data).then((res) => {
        console.log(res)
        if (res.code != 0) {
          this.errorMsg = res.msg
          return
        }
        let t = 10
        let si = setInterval(() => {
          this.msgButtonText = t
          t = t - 1
          if (t == 0) {
            this.is_send = false
            this.msgButtonText = '獲取手機驗證碼'
            clearInterval(si)
          }
        }, 1000)

        // if (res.data.code == 200) {
        //   console.log('簡訊傳送成功')
        //   alert(res.data.message)
        // } else {
        //   alert(res.data.message)
        // }
      }).catch((err) => {
        console.log(err)
      })
    },
}

圖片驗證碼vue

     mounted(){
      this.getImgUrl()
      },

     methods: {
      // 生成uuid
      getUuid() {
      var d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now()
      }
      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
    },

    // 動態生成圖形驗證碼URL
    getImgUrl() {
      let uuid = this.getUuid()
      this.uuid = uuid
      let url = 'http://192.168.56.100:8888/verify/image_codes/?uuid=' + uuid
      // let url = 'http://192.168.56.100:8888/verify/image_codes/?uuid=66ea64aa-fbe6-11ea-a3d3-005056c00008'
      this.imgUrl = url
    },
}