当前位置：首页 > article >正文

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

article 2024/10/19 21:47:05

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=totalsecond
        if ( !this.timer && this.second === this.totalSecond ) {
            //开启计时器
            this.timer = setInterval(() => {
                this.second--

                if (this.second <= 0) {
                    clearInterval(this.timer)
                    this.timer = null //重置定时器id
                    this.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
    }
  })
}