主要是后臺代碼實現，
可以登陸容聯云通訊，https://www.yuntongxun.com/?ly=baidu-pz-p&qd=cpc&cp=ppc&xl=null&kw=10360228

然后注冊登錄，可以添加測試手機號
系統會給8塊錢，可以用來發送短信
然后會得到以下信息

然后對應的改后臺的代碼即可，對應改成自己生成的。

然后前端就可以寫代碼發送請求了，把對應的表單內容傳給后臺即可
部分代碼：

// 異步登陸async login() {// 這里定義result，才可以在if之外取到let result;// 前臺表單驗證，看是哪種登陸方式if (this.loginWay) {//短信登陸// 取數據const { phone, code, rightPhone } = this;if (!this.rightPhone) {// 手機號不正確this.showAlert("手機號不正確");return;} else if (!/^\d{6}$/.test(code)) {// 驗證碼必須是6位的this.showAlert("驗證碼必須是6位的");return;}// 發送ajax 驗證碼請求// const result = await reqSmsLogin(phone, code);result = await reqSmsLogin(phone, code);console.log(result)} else {//密碼登陸const { name, pwd, captcha } = this;if (!this.name) {// 用戶名不正確this.showAlert("用戶名不正確");return;} else if (!this.pwd) {// 密碼不正確this.showAlert("密碼不正確");return;} else if (!this.captcha) {// 驗證碼不正確this.showAlert("驗證碼不正確");return;}// 發送ajax請求密碼登陸// const result = await reqPwdLogin({ name, pwd, captcha });result = await reqPwdLogin({ name, pwd, captcha });}// 停止倒計時(這里是不管成功還是失敗，都要停止倒計時)if (this.computeTime) {this.computeTime = 0;clearInterval(this.intervalId);this.intervalId = undefined;}// 根據結果數據處理// result 不能用const定義了，得放到外面 否則 這個取不到if (result.code === 0) {const user = result.data;// 將user保存到vuex的statethis.$store.dispatch('recordUser',user)// 去個人中心界面this.$router.replace('/profile')} else {// 失敗以后顯示新的圖片驗證碼this.getCaptcha()//重新調用圖形驗證碼const msg = result.msg;this.showAlert(msg); //調用提示框}},

總結

以上是生活随笔為你收集整理的手机获取短信验证码登陆的全部內容，希望文章能夠幫你解決所遇到的問題。

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