vue 基于网易云API的短信验证码登录（axios封装）
2024-06-04 10:19:17
一 文章目录结构
二、request.js
import axios from 'axios'// 调用 axios.create() 函数，创建一个 axios 的实例对象，用 request 来接收
const request = axios.create({// 指定请求的根路径baseURL: 'https://netease-cloud-music-api-beta-lyart.vercel.app'
})export default request三、 loginbyphone.js
// 通过电话号码登录相关的 API 接口
import request from '@/utils/request.js'
const qs = require('qs')// 每次请求都带上时间戳 timestamp 参数 防止缓存
// withCredentials 请求为跨域类型时是否在请求中协带cookie
export const byPassword = function (phone, password) {return request.post('/login/cellphone', qs.stringify({phone: phone,password: password,timestamp: new Date().getTime()}))
}// 发送短信验证码
export const sendCode = function (phone) {return request.get('/captcha/sent', {params: {phone: phone,timestamp: new Date().getTime()}})
}// 验证短信验证码
export const byCode = function (phone, captcha) {return request.post('/captcha/verify', qs.stringify({phone: phone,captcha: captcha,timestamp: new Date().getTime()}))
}四、loginbyphone.vue
<template><div class="bbox"><div class="top"><div class="topp">登录<i class="el-icon-close"></i></div></div><div class="mid"><img src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9647707645/c8e7/4d8d/1895/6dff82b63181104bbac7cf3743c8b613.png" alt=""style="width:286px;" ><div id="form-container" style="margin:10px"><!-- <el-input placeholder="请输入手机号" v-model="phoneNumber" class="input-with-select"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input> --><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="login-ruleFrom" style="margin:0 15px"><el-form-item label="" prop="phoneNumber"><el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input><el-button size="mini" class="getCodeButton" :disabled="attcode" v-if="showBtn" @click="getCode">获取验证码</el-button><el-button class="getCodeButton" plain disabled v-else >{{codeMsg}}</el-button></el-form-item><el-form-item label="" prop="phoneCode"><el-input v-model="ruleForm.phoneCode" placeholder="请输入验证码"><i slot="prefix" class="el-input__icon el-icon-lock"></i></el-input></el-form-item><el-form-item label="" prop="type" style="margin-top:-10px"><el-switch v-model="ruleForm.autoLogin" active-text="自动登录" ></el-switch></el-form-item><el-form-item style="margin-bottom:-20px"><el-button type="primary" @click="submitForm('ruleForm')" style="width:100%;">登录</el-button></el-form-item></el-form></div></div></div>
</template><script>
import { byCode, sendCode } from '@/api/LoginAndRegister/loginByPhone.js'export default {data () {return {// 获取验证码按钮是否禁用attcode: true,// 获取验证码按钮是否展示showBtn: true,codeMsg: '获取验证码',// 倒计时codeSec: 60,ruleForm: {phoneNumber: '',phoneCode: '',autoLogin: false},rules: {phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请正确填写您的手机号码', trigger: 'blur' }],phoneCode: [{ required: true, message: '请输入验证码', trigger: 'blur' },{ pattern: /^[0-9]{4}$/, message: '请填写有效的验证码', trigger: 'blur' }]}}},watch: {// 监听手机号 改变获取验证码按钮状态'ruleForm.phoneNumber': function (value) {const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/const val = reg.test(value)if (val) {this.attcode = false} else {this.attcode = true}},'ruleForm.phoneCode': async function (code) {if (code.length === 4) {// 自动请求并且登录const { data: byCodeData } = await byCode(this.ruleForm.phoneNumber, this.ruleForm.phoneCode)console.log(byCodeData)if (byCodeData.code === 200) {this.successLoginMsg()sessionStorage.setItem("user", true);this.$router.push("/");// 保存信息到 Vuex 跳转页面}}}},methods: {// 错误提示信息errorMsg () {this.$message({showClose: true,message: '电话或验证码错误！',type: 'error'})},// 短信发送成功提示信息successSendMsg () {this.$message({showClose: true,message: '短信发送成功！',type: 'success'})},// 登录成功提示信息successLoginMsg () {this.$message({showClose: true,message: '登录成功！',type: 'success'})console.log();},// 提交登录表单async submitForm (formName) {console.log(this.ruleForm.phoneNumber, this.ruleForm.phonePassword, this.ruleForm.autoLogin)this.$refs[formName].validate(async (valid) => {if (valid) {// 发送请求const byCodeData = await byCode(this.ruleForm.phoneNumber, this.ruleForm.phoneCode)if (byCodeData.code === 200) {// this.successLoginMsg()sessionStorage.setItem("user", true);this.$router.push("/");// 保存信息到 Vuex 跳转页面} else {this.errorMsg()}} else {console.log('error submit!!')return false}})},// 发送验证码async getCode () {// 调用 sendCode 发送验证码const sendCodeData = await sendCode(this.ruleForm.phoneNumber)if (sendCodeData.code !== 200) this.successSendMsg()// 修改页面样式const timer = setInterval(() => {this.codeSec = this.codeSec - 1this.codeMsg = this.codeSec + 's后重试'this.showBtn = falseif (this.codeSec === 0) {clearInterval(timer)this.codeSec = 60this.showBtn = true}}, 1000)}}
};
</script><style lang="scss" scoped>
.bbox {margin: auto;position: relative;width: 700px;// height: 370px;background-color: #fff;border: #333 solid 1px;
}
.top {width: 700px;height: 50px;background-color: rgb(49, 35, 35);color: white;
}
.topp {font-weight: bold;margin-left: 18px;margin-right: 18px;padding-top: 16px;display: flex;justify-content: space-between;
}
.mid{margin-top: 8px;// margin-left: 52px;padding-left: 93px;padding-top: 21px;padding-bottom: 10px;margin: auto;width: 400px;display: flex;flex-wrap:wrap;align-items:center;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}.mima{margin-top: 20px;
}
.login{background-color: rgb(49, 125, 200);color: #fff;margin-top: 10px;}.mid img{margin-bottom:10px ;}.send{background-color: rgb(49, 125, 200);color: #fff;height: 29px;margin-top: 19px;}.huoqu{display: flex;justify-content: space-between;}</style>
五、效果图
vue 基于网易云API的短信验证码登录（axios封装）相关推荐
- 基于阿里云平台的短信验证码服务API的使用
基于阿里云平台的短信验证码服务API的使用 第一步:登录阿里云平台 第二步:申请国内文本短信签名 如果是个人作业项目(如作者的签名),可以直接申请测试和学习用的测试签名,该签名的缺点是必须绑定测试手机 ...
- 基于阿里云的手机短信验证码和注册校验逻辑
基于阿里云的手机短信验证码demo实现 1. 环境依赖 2. 页面表单 html 3. 校验与短信 js 4. 工具类 SmsUtils 5. 资源调用 Servlet 阿里云的短信平台:http:/ ...
- java云片模板参数_Java使用云片API发送短信验证码的代码详解
这篇文章主要介绍了Java使用云片API发送短信验证码,主要用的是Java实现短信验证码.需要的朋友可以参考下 下面开始介绍的是如何利用机器完成批量操作,将短信业务自动化. 获取APIKEY 云片网提 ...
- java 随机手机验证码_基于Java随机生成手机短信验证码的实例代码|chu
简单版 /** * 产生4位随机数(0000-9999) * * @return 4位随机数 */ public static String getFourRandom() { return Stri ...
- 使用阿里云短信服务API实现短信验证码以及短信服务通知
使用阿里云短信服务API实现短信验证码以及短信服务通知 前言 一 .短信调用简要说明 二 .官方不带签名原生态测试demo 调用结果如下 三 .以上为不带模板和签名的API调用结果 下面加入签名和模板 ...
- 使用阿里云短信验证码API发送短信验证码(配置,获取短信验证码,注册,登录,密码重置)
获取阿里云短信验证码需要的配置信息. 如果是新用户,可以免费领取3个月,老用户的话就只能购买了,但是也不贵. 申请短信签名 申请短信模板 编写发送短信验证码的工具类 代码中我已经进行了详细的注释,也写 ...
- java+生成手机验证码_基于Java随机生成手机短信验证码的实例代码
简单版 /** * 产生4位随机数(0000-9999) * * @return 4位随机数 */ public static String getFourRandom() { return Stri ...
- java antd实现登录,基于 antd pro 的短信验证码登录
概要 整体流程 前端 页面代码 请求验证码和登录的 service (src/services/login.js) 处理登录的 model (src/models/login.js) 后端 短信验证码 ...
- go 实现发送短信验证码登录
现在大多数app或wap都实现了通过手机号获取验证码进行验证登录,下面来看下用go来实现手机号发送短信验证码登录的过程,基于的框架是gin . 首先是短信服务商的申请,比如腾讯云.阿里云.网易易盾等, ...
- 「实操」用node.js开发短信验证码登录的功能
今天给大家操作如何给网站增加短信验证码登录功能,实际操作非常简单,对照文档15分钟就可以完成接入. 需要准备资料有:登录页面(html页面).短信接口参数.服务端 特别说明:因为闪速码接口支持个人.企 ...
最新文章
- Swift - 使用Alamofire通过HTTPS进行网络请求，及证书的使用
- 发明 AI 吵架神器？程序员对象这么厉害的吗？
- POJ 图算法(3)
- 哲理故事与管理之道(3)-不要吝惜赞美
- Java实现 二叉搜索树算法（BST）
- 推荐系统常用评价指标和代码实现
- hfss螺旋平面_利用HFSS设计平面等角螺旋天线
- linux 下创建GRE隧道
- python--一些特性
- assimp android build,使用Android Studio+CMakeLists编译assimp
- 为什么css导航右边有黑色,一段CSS的导航菜单，为什么有了这个左导航之后，右面的区域用不了了...
- 第218天：Angular---模块和控制器
- 搭建html5的,HTML5 - 搭建移动Web应用
- 数据预处理第2讲：非线性变换
- vivo 计算机怎么使用方法,vivo怎么能连接到电脑
- sopcast在ubuntu上的安装与使用
- github上传本地项目代码
- visual studio 2008 提示 “函数xxx 已有主体”
- php判断是否夏令时,关于php：时区和夏令时问题
- 用C语言求奇数的几种方法