api接口模块
将请求封装成方法,统一存放到api模块,与页面分离。
1.新建请求模块
src/api/login.js
2.封装请求函数
/* eslint-disable */
// 此处用于存放所有登录相关的接口请求
import request from '@/utils/request'//获取图片验证码
export const getPicCode = () => {return request.get('/captcha/image')
}
3.页面中导入调用
Toast轻提示
1.注册安装
2.使用方式:导入调用;通过this直接调用
短信验证倒计时
1.注册点击事件
<button @click="getCode" >{{ second === totalSecond ? '获取验证码': second + '秒后重新发送' }}</button>
2.倒计时效果
//定时器没有开着并且second=totalsecondif ( !this.timer && this.second === this.totalSecond ) {//开启计时器this.timer = setInterval(() => {this.second--if (this.second <= 0) {clearInterval(this.timer)this.timer = null //重置定时器idthis.second = this.totalSecond}},1000)}
3.离开页面清除定时器
//离开页面时清除计时器destroyed () {clearInterval(this.timer)}
4.倒计时之前的校验处理
//验证手机号码是否正确validId () {if (!/^1[3-9]\d{9}$/.test(this.mobile)) {//进行弹窗提示this.$toast('请输入正确手机号')return false}return true}
5.封装短信验证请求。发送请求添加提示
//获取验证码
export const getMsgCode = (captchaCode, captchaKey, mobile) => {return request.get('/captcha/sendSmsCaptcha', {form: {captchaCode,captchaKey,mobile}})
}