Vue联调，图片及短信验证码

 

1.vue发送短信逻辑

• 前端函数如下,js方法代码无需更改，前端代码逻辑在componentscommonlab_header.vue

• 只需要修改componentsaxios_apihttp.js中调用的后端地址

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

手机验证码vue

<template>
  <div>
     <input
           type="text"
           v-model="code"
           class="form-control"
           placeholder="请输入短信验证码"
           @blur="check_msgcode">
          <Button @click="sendcode">{{msgButtonText}}</Button>
  </div>
</template>


<script>
    // 获取手机验证码
   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)
      })
    },
}
</script>

图片验证码vue

<template>
   <div class="input-group">
      <img
        class="verify-code"
        :src="imgUrl"
        @click="getImgUrl">
   </div>
</template>


<script>
     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
    },
}
</script>

 

 

查看全文