vue联调图片验证码和发送短信验证码

目录

• vue联调图片验证码和发送短信验证码
  • 封装好axios请求
  • 接口地址列表
  • 在页面写入函数，样式点击事件，发送请求

vue联调图片验证码和发送短信验证码

封装好axios请求

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

//全局设置网络超时
axios.defaults.timeout = 10000;

//设置请求头信息
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';


// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = localStorage.getItem("token")
            // console.log(token)
        if (token) {
            config.headers.Authorization = 'JWT ' + token
        }
        return config;
    },
    error => {
        return Promise.error(error);
    })



// 响应拦截器
axios.interceptors.response.use(
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

    // 请求失败
    error => {
        if (error.response) {
            // 判断一下返回结果的status == 401？  ==401跳转登录页面。  ！=401passs
            // console.log(error.response)
            if (error.response.status === 401) {
                // 跳转不可以使用this.$router.push方法、
                // this.$router.push({path:'/login'})
                window.location.href = "http://127.0.0.1:8888/"
            } else {
                // errorHandle(response.status, response.data.message);
                return Promise.reject(error.response);
            }
            // 请求已发出，但是不在2xx的范围
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            // store.commit('changeNetwork', false);
            return Promise.reject(error.response);
        }
    });


// 封装xiaos请求

// 封装get请求
export function axios_get(url, params) {
    return new Promise(
        (resolve, reject) => {
            axios.get(url, { params: params })
                .then(res => {
                    // console.log("封装信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}


// 封装post请求
export function axios_post(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.post(url, JSON.stringify(data))
                .then(res => {
                    // console.log("封装信息的的res", res)
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
        }
    )
}

接口地址列表

// 将封装好的get, post请求导包
import { axios_get, axios_post } from './https.js'

export const send_phone_code_post = p => axios_post('/verify/sms_codes/', p)

在页面写入函数，样式点击事件，发送请求

<template>

  <div>
		<input
        type="text"
        v-model='imgCode'
        placeholder="输入图形验证码"
        @blur="check_imgcode"
        >
        <span
        v-show='imgCode_error'
        style="color:red"
        >{{imgCode_message}}</span>
        <img
        class="verify-code"
        :src="imgUrl"
        @click="getImgUrl"
        >
        <input
        type="text"
        v-model="code"
        class="form-control"
        placeholder="请输入短信验证码"
        @blur="check_msgcode"
        >
      <Button @click="sendcode">{{msgButtonText}}</Button>

  </div>
</template>

<script>
// 把封装好的请求导入
import {send_phone_code_post} from '../axios_api/api'
export default {
  data() {
    return {
        msgButtonText: '获取手机验证码'
    }
  },
  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
      this.imgUrl = url
    },
      
     // 获取手机验证码
    sendcode() {
      // 0. 判断是否发送中
      if (this.is_send) {
        return
      }
      // 短信发送
      // 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>