1：前端封装接口

前端请求的统一封装也是为了方便前端项目的请求维护起来更加方便，将页面中的请求封装到js文件中，不同的页面需要用到相同的请求可以直接进行复用。

第一步创建一个api文件夹和js文件

第二步：在文件中导入axios，如果axios被二次封装那导入封装之后的文件

第三步：在页面中导入js文件使用封装好的方法

 

2：使用Vant库中的Toast轻提示

 

这toast就相当于vue2中的this.$message.success('成功提示')

第一种方式：在使用的地方直接导入即可使用，这种是局部使用哪个文件需要用到就在哪个组件或者js文件中使用

如果在组件或非组件文件中导入都可以进行使用

第二种方式：直接挂载在Vue实例上面可以进行全局使用

 3：实现短信验证功能

主要在用户点击获取验证码时，开启定时任务初始值六十秒倒计时每秒扣减，为防止出现负数加入判断

3.1：实现倒计时效果

页面代码实现：

<div class="form-item">
<input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
<img v-if="picUrl" :src="picUrl" @click="getImageCode" alt="请刷新">
</div>

数据区域： 

  data () {return {picUrl: null,picCode: '',picKey: '626115',msgCode: '',mobile: '15039465258',second: 60,totalSecond: 60,timer: null}},

 

注意：只要页面有定时器一定要注意在离开页面时候就给清除定时器，使至内存消耗减少 

 

3.2：倒计时校验

校验手机号和验证码是否符合规范填写

代码实现：

3.3：封装短信验证请求接口

点击获取短信验证码，校验手机号和图形验证码是否填写，校验通过调用短信验证码接口并开启计时器

封装调用短信验证码接口

获取验证码接口 

    getCode () {if (!this.validFn()) {return false}// 防止用户点击多次 加入判断if (!this.timer && this.second === this.totalSecond) {// 发送短信验证码getMsgCode(this.mobile).then(response => {this.$toast(response.data)})// 开启定时任务this.timer = setInterval(() => {this.second--// 防止倒计时扣减到负数加入判断停止定时任务if (this.second <= 0) {// 停止倒计时clearInterval(this.timer)this.timer = null// 重置倒计时this.second = this.totalSecond}}, 1000)}// 短信验证码发送成功this.$toast('短信验证码成功')},

 4：实现登录功能

点击登录，校验手机号，图形验证码，短信验证，调用登录接口，传值，返回状态200时登录成功提示，路由跳转

// 登录接口
export const login = (params) => {return request.post('/user/login', params)
}

login () {// 校验手机号和图形验证码if (!this.validFn()) {return false}// if (!this.picCode) {//   this.$toast('请输入图形验证码')//   return false// }if (!/^\d{6}$/.test(this.msgCode)) {this.$toast('请输入六位短信验证码')return false}// toast1.clear()const params = {phone: this.mobile,code: this.msgCode,key: this.picKey,imgCode: this.picCode}login(params).then(res => {if (res.status === 200) {this.$toast('登录成功')setTimeout(() => {// 将数据存放到vuexthis.$store.commit('user/setUserInfo', res.data)this.$router.push('/home')}, 1000)}})}