vue2登录页面源码
时间: 2024-10-16 07:22:19 浏览: 1
Vue2登录页面的源码通常会包含HTML结构、Vue实例的设置以及数据交互的逻辑。以下是一个简化的例子:
```html
<!-- login.vue -->
<template>
<div class="login-form">
<input v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button @click="submitForm">登录</button>
<span v-if="error" class="error">{{ error }}</span>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: '',
isLoggingIn: false,
};
},
methods: {
submitForm() {
if (this.username && this.password) {
this.isLoggingIn = true;
// 模拟异步请求
setTimeout(() => {
if (!isValidCredentials(this.username, this.password)) {
this.error = '用户名或密码错误';
} else {
this.$store.dispatch('login', { username: this.username, password: this.password });
this.error = '';
this.isLoggingIn = false;
}
}, 1000);
} else {
this.error = '请输入完整信息';
}
},
isValidCredentials(username, password) {
// 这里可以替换为实际的验证逻辑
// 返回true表示合法,false表示非法
return username === 'admin' && password === 'password';
},
},
};
</script>
<style scoped>
.login-form {
/* 样式 */
}
</style>
```
在这个例子中,我们创建了一个Vue组件`login.vue`,其中包含用户输入框、登录按钮和一个状态变量`isLoggingIn`用于处理登录过程中是否正在请求的状态。当点击登录按钮时,我们会先验证输入,然后模拟异步登录请求。如果验证失败或登录成功,会在相应的字段显示错误消息。
阅读全文