一 文章目錄結構

二、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封装）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。