Vue聯調,圖片及簡訊驗證碼
阿新 • • 發佈:2020-10-08
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 }, }