zoukankan      html  css  js  c++  java
  • vue联调图片验证码和发送短信验证码

    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>
    
  • 相关阅读:
    mac c++编译出现segmentation fault :11错误
    ssh 连接缓慢解决方法
    237. Delete Node in a Linked List
    203. Remove Linked List Elements
    Inversion of Control Containers and the Dependency Injection pattern
    82. Remove Duplicates from Sorted List II
    83. Remove Duplicates from Sorted List
    SxsTrace
    使用CCleaner卸载chrome
    decimal and double ToString problem
  • 原文地址:https://www.cnblogs.com/hr20-04-19/p/13782267.html
Copyright © 2011-2022 走看看