VUE实现密码登录和手机验证码登录代码
时间: 2024-09-28 07:14:43 浏览: 29
Vue.js本身是一个前端框架,它主要用于构建用户界面。在实现密码登录和手机验证码登录这样的功能时,通常会结合后端API和前端的数据交互处理。以下是一个简化版的Vue组件示例,假设我们已经有了后端提供的发送验证码和验证token接口:
```html
<template>
<div>
<form @submit.prevent="login">
<label>用户名:</label>
<input type="text" v-model="username" required>
<label>密码:</label>
<input type="password" v-model="password" required>
<label>验证码:</label>
<input type="tel" v-model="captcha" required>
<button @click="sendCaptcha">获取验证码</button>
<p>{{ error }}</p>
<button :disabled="!loading || captchaIncorrect">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
captcha: '',
loading: false,
error: ''
};
},
methods: {
sendCaptcha() {
this.loading = true;
axios.post('/api/send-captcha', { phone: this.username })
.then(response => {
this.captcha = response.data.captcha;
this.loading = false;
})
.catch(error => {
this.error = '发送验证码失败';
this.loading = false;
});
},
login() {
if (!this.validateCaptcha()) return;
this.loading = true;
axios.post('/api/login', { username: this.username, password: this.password, captcha: this.captcha })
.then(response => {
// 登录成功处理
localStorage.token = response.data.token; // 存储 token
this.$router.push('/dashboard'); // 跳转到首页
})
.catch(error => {
this.error = '登录失败,请检查信息';
this.loading = false;
});
},
validateCaptcha() {
return this.captcha === this.correctCaptcha;
}
} // 更多验证规则可以添加在这里
};
</script>
```
在这个例子中,`sendCaptcha`用于触发验证码的发送,`validateCaptcha`检查输入的验证码是否正确,`login`则负责将所有数据提交给服务器并处理登录逻辑。
阅读全文