04.智慧商城——短信验证码倒计时、登录请求、响应拦截器统一处理、请求loading效果

news2025/2/26 14:33:10

01. 短信验证倒计时功能

在这里插入图片描述

(1) 倒计时基础效果

  1. 准备 data 数据
data () {
  return {
    totalSecond: 60, // 总秒数
    second: 60, // 倒计时的秒数
    timer: null // 定时器 id
  }
},
  1. 给按钮注册点击事件
<button @click="getCode">
  {{ second === totalSecond ? '获取验证码' : second + `秒后重新发送`}}
</button>
  1. 开启倒计时时
async getCode () {
  // 如果有定时器不存在同时当前计时的时间达到60秒时才能发送获取验证码的请求(当前接口还未写发送请求)
  if (!this.timer && this.second === this.totalSecond) {
    // 开启倒计时
    this.timer = setInterval(() => {
      this.second--

      if (this.second < 1) {
        clearInterval(this.timer)
        this.timer = null
        this.second = this.totalSecond
      }
    }, 1000)

    // 发送请求,获取验证码
    this.$toast('发送成功,请注意查收')
  }
}
  1. 离开页面销毁定时器
destroyed () {
  clearInterval(this.timer)
}

(2) 验证码请求校验处理

  1. 输入框 v-model 绑定变量
data () {
  return {
    mobile: '', // 手机号
    picCode: '' // 图形验证码
  }
},
    
<input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
<input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
  1. methods中封装校验方法
// 校验输入框内容
validFn () {
  if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
    this.$toast('请输入正确的手机号')
    return false
  }
  if (!/^\w{4}$/.test(this.picCode)) {
    this.$toast('请输入正确的图形验证码')
    return false
  }
  return true
},
  1. 请求倒计时前进行校验
// 获取短信验证码
async getCode () {
  if (!this.validFn()) {
    return
  }
  ...
}

(3) 封装接口,请求获取验证码

  1. 封装接口 api/login.js
// 获取短信验证码
export const getMsgCode = (captchaCode, captchaKey, mobile) => {
  return request.post('/captcha/sendSmsCaptcha', {
    form: {
      captchaCode,
      captchaKey,
      mobile
    }
  })
}
  1. 调用接口,添加提示
// 获取短信验证码
async getCode () {
  //当验证码和手机号格式正确时才能往下走
  if (!this.validFn()) {
    return
  }

  if (!this.timer && this.second === this.totalSecond) {
    // 发送请求,获取验证码
    await getMsgCode(this.picCode, this.picKey, this.mobile)
    this.$toast('发送成功,请注意查收')
    
    // 开启倒计时
    ...
  }
}

02. 封装api接口 - 登录功能

api/login.js 提供登录 Api 函数

// 验证码登录
export const codeLogin = (mobile, smsCode) => {
  return request.post('/passport/login', {
    form: {
      isParty: false,
      mobile,
      partyData: {},
      smsCode
    }
  })
}

login/index.vue 登录功能

<input class="inp" v-model="msgCode" maxlength="6" placeholder="请输入短信验证码" type="text">
<div class="login-btn" @click="login">登录</div>

data () {
  return {
    msgCode: '',
  }
},
methods: {
  async login () {
    if (!this.validFn()) {
      return
    }
    if (!/^\d{6}$/.test(this.msgCode)) {
      this.$toast('请输入正确的手机验证码')
      return
    }
    await codeLogin(this.mobile, this.msgCode)
    this.$router.push('/')
    this.$toast('登录成功')
  }
}

03. 响应拦截器统一处理错误提示

响应拦截器是咱们拿到数据的 第一个 “数据流转站”,可以在里面统一处理错误,只要不是 200 默认给提示,抛出错误

utils/request.js

import { Toast } from 'vant'

...

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status !== 200) {
    Toast(res.message)
    return Promise.reject(res.message)
  }
  // 对响应数据做点什么
  return res
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

04. 将登录权证信息存入 vuex

  1. 新建 vuex user 模块 store/modules/user.js
export default {
  namespaced: true,
  state () {
    return {
      userInfo: {
        token: '',
        userId: ''
      },
    }
  },
  mutations: {},
  actions: {}
}
  1. 挂载到 vuex 上
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
  }
})
  1. 提供 mutations
mutations: {
  setUserInfo (state, obj) {
    state.userInfo = obj
  },
},
  1. 页面中 commit 调用
// 登录按钮(校验 & 提交)
async login () {
  if (!this.validFn()) {
    return
  }
  ...
  const res = await codeLogin(this.mobile, this.msgCode)
  this.$store.commit('user/setUserInfo', res.data)
  this.$router.push('/')
  this.$toast('登录成功')
}

05. vuex持久化处理

  1. 新建 utils/storage.js 封装方法
const INFO_KEY = 'hm_shopping_info'

// 获取个人信息
export const getInfo = () => {
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : {
    token: '',
    userId: ''
  }
}

// 设置个人信息
export const setInfo = (info) => {
  localStorage.setItem(INFO_KEY, JSON.stringify(info))
}

// 移除个人信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}
  1. vuex user 模块持久化处理
import { getInfo, setInfo } from '@/utils/storage'
export default {
  namespaced: true,
  state () {
    return {
      userInfo: getInfo()
    }
  },
  mutations: {
    setUserInfo (state, obj) {
      state.userInfo = obj
      setInfo(obj)
    }
  },
  actions: {}
}

06. 优化:添加请求 loading 效果

  1. 请求时,打开 loading
// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  Toast.loading({
    message: '请求中...',
    forbidClick: true,  // 禁止背景点击,(节流处理,防止多次无效请求)
    loadingType: 'spinner',  //设置加载图标,不设置会使用默认的小圆圈,这里设置为一个发散的小圆圈
    duration: 0   // 加载图标不会自动消失
  })
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
  1. 响应时,关闭 loading
// 添加响应拦截器
import { Toast } from 'vant'

request.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status !== 200) {
    Toast(res.message)
    return Promise.reject(res.message)
  } else {
    // 清除 loading 中的效果
    Toast.clear()
  }
  // 对响应数据做点什么
  return res
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1214728.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Go 使用Viper处理Go应用程序的配置

在开发Go应用程序时&#xff0c;处理配置是一个常见的需求。配置可能来自于配置文件、环境变量、命令行参数等等。Viper是一个强大的库&#xff0c;可以帮助我们处理这些配置。 什么是Viper&#xff1f; Viper是一个应用程序配置解决方案&#xff0c;用于Go应用程序。它支持JS…

Go fsnotify简介

fsnotify是一个用Go编写的文件系统通知库。它提供了一种观察文件系统变化的机制&#xff0c;例如文件的创建、修改、删除、重命名和权限修改。它使用特定平台的事件通知API&#xff0c;例如Linux上的inotify&#xff0c;macOS上的FSEvents&#xff0c;以及Windows上的ReadDirec…

220V交流转直流的简易电源设计

220V交流转直流的简易电源设计 设计简介设计原理电路图变压器电路交流转直流电路3.3V电源接口电路 PCB3D图 实践检验 设计简介 通过模拟电路的相关知识&#xff0c;尝试将220V的交流电转化为我们指定电压的直流电。 设计原理 将220V交流电转化为直流电的方法常用的有通过变压器…

(四)什么是Vite——冷启动时vite做了什么(源码、middlewares)

vite分享ppt&#xff0c;感兴趣的可以下载&#xff1a; ​​​​​​​Vite分享、原理介绍ppt 什么是vite系列目录&#xff1a; &#xff08;一&#xff09;什么是Vite——vite介绍与使用-CSDN博客 &#xff08;二&#xff09;什么是Vite——Vite 和 Webpack 区别&#xff0…

IO流回顾与装饰者模式

目录 代码图示原理 代码 // 初始化服务器System.out.println("初始化服务器");ServerSocket serverSocket new ServerSocket(8087);System.out.println("服务器初始化成功");// 监听服务器Socket accept serverSocket.accept();System.out.println("…

vue-vuex详解

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-vuex详解 目录 Vuex 1.vuex是什么&#xff1f; 2.vuex核心概念 3.vuex模块化 4. Vuex中ac…

【Java 进阶篇】JQuery 动画:为页面添彩的魔法

在现代的Web开发中&#xff0c;用户体验的提升是至关重要的一环。而动画作为页面交互中的重要组成部分&#xff0c;更是为用户带来了全新的感官体验。本篇博客将深入探讨 JQuery 中动画的应用&#xff0c;带你进入一个充满活力的前端世界。 前言 动画是网页设计的一种重要手段…

YOLO目标检测——树叶检测数据集下载分享【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;生物多样性研究、林业管理、环境监测和教育科研等方面数据集说明&#xff1a;树叶分类检测数据&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;总共十个类别。标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标…

力扣刷题篇之数与位1

系列文章目录 目录 系列文章目录 前言 一、进制转换 总结 前言 本系列是个人力扣刷题汇总&#xff0c;本文是数与位。刷题顺序按照[力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 - 力扣&#xff08;LeetCode&#xff09; 一、进制转换 67. 二进制求和 - 力扣&…

(免费领源码)Java#SpringBoot#mysql高校实验室资产管理系统85189-计算机毕业设计项目选题推荐

摘 要 随着计算机技术的发展&#xff0c;特别是计算机网络技术与数据库技术的发展&#xff0c;使人们的生活与工作方式发生了很大的改观。本课题研究的高校实验室资产管理系统&#xff0c;主要功能模块包括后台首页&#xff0c;轮播图&#xff0c;公告管理&#xff0c;资源管理…

一看就会的jni,不会你来打我!

环境配置 Android Studio&#xff0c;这个不多说了。 简单说一下NDK的下载和环境变量&#xff0c;方便在Terminal里使用命令(mac版)。 下载 1.可以通过Android Studio内置的Settings-Android SDK-SDK Tools安装NDK&#xff0c;下载目录为 /Users/mac-xxx(Username)/Library…

服务号可以升级为订阅号吗

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;在推送频率上来看&#xff0c;服务号每月能推送四条消息&#xff0c;而订阅号可以每天&#xff08;24小时&#xff09;推送一条消息。如果企业开通公众号的目的是提供服务&#xff0c;例如售前资讯…

WPS文件丢失如何恢复?4个方法教你快速恢复!

“在WPS里保存了一些比较重要的文档&#xff0c;由于某些原因导致文件丢失了&#xff0c;这种情况下&#xff0c;还有办法成功恢复WPS文件吗&#xff1f;” WPS Office是许多用户在电脑上创建和编辑文档的首选工具。然而&#xff0c;有时文件会意外丢失&#xff0c;可能是由于误…

Linux_在命令行中以树状结构显示目录_tree

1、安装tree命令 使用tree命令&#xff0c;可以在命令行中以树状结构显示目录&#xff0c;当你想知道一个路径下文件的结构时十分方便&#xff0c;还有别的选项功能&#xff0c;下面会介绍其中的一些&#xff0c;完整的介绍Linux命令 - tree—LZL在线工具。 sudo apt updates…

头部厂商Q3交付量环比下滑!激光雷达,现实很骨感

由于中国自主品牌车企在高阶智驾赛道上的激进策略&#xff0c;全球激光雷达行业的走势&#xff0c;也无疑受到中国市场的影响。 本周&#xff0c;禾赛科技发布2023年度三季报&#xff0c;季度激光雷达交付量为47,440台&#xff0c;同比增长125.5%&#xff0c;其中ADAS激光雷达交…

mysql---主从复制和读写分离

主从复制 主从复制&#xff0c;修改&#xff0c;表里的数据&#xff1a;主mysql上的数据&#xff0c;新增都会同步到从mysql上面试题&#xff1a;mysql的主从复制的模式&#xff1a; 1、异步复制&#xff1a;mysql的默认复制就是异步复制。只要执行完之后&#xff0c;客户端提…

使用 Redis 构建轻量的向量数据库应用:图片搜索引擎(二)

本篇文章我们来继续聊聊轻量的向量数据库方案&#xff1a;Redis&#xff0c;如何完成整个图片搜索引擎功能。 写在前面 在上一篇文章《使用 Redis 构建轻量的向量数据库应用&#xff1a;图片搜索引擎&#xff08;一&#xff09;》中&#xff0c;我们聊过了构建图片搜索引擎的…

如何在10亿级别用户中检查用户名是否存在?

题目 不知道大家有没有留意过&#xff0c;在使用一些app注册的时候&#xff0c;提示你用户名已经被占用了&#xff0c;需要更换一个&#xff0c;这是如何实现的呢&#xff1f;你可能想这不是很简单吗&#xff0c;去数据库里查一下有没有不就行了吗&#xff0c;那么假如用户数量…

windows usbip(瑞芯微windows开发)

Rockchip RK3588 windows开发 安装usbipd 除usbipd之外&#xff0c;还有一个usbip仓库可以参考usbip-win&#xff0c;但是相对麻烦一些 windows install winget install usbipdShare Devices usbipd --help usbipd list usbipd bind --busid<BUSID>Remote Connectin…

mysql统计整个数据库记录条数

SELECTSUM(TABLE_ROWS) FROM(SELECTTABLE_NAME,TABLE_ROWSFROMINFORMATION_SCHEMA.TABLESWHERETABLE_SCHEMA 数据名&#xff0c;其他不变) t;效果如下&#xff1a;