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>
