VUE 开发——Vue学习（四）—— 智慧商城项目

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}})
}