vue后台管理登录页面
时间: 2023-08-30 14:10:46 浏览: 36
以下是一个简单的 Vue 后台管理系统登录页面的代码示例:
```
<template>
<div class="login-container">
<h3>后台管理系统</h3>
<el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" placeholder="密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 登录请求
this.$router.push('/dashboard')
} else {
console.log('登录失败')
return false
}
})
}
}
}
</script>
<style>
.login-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-form {
width: 300px;
margin-top: 20px;
}
</style>
```
这个示例使用了 Element UI 组件库中的 el-form、el-input 和 el-button 组件,利用表单验证确保用户输入有效,并在点击登录按钮时进行登录请求。如果登录成功,使用 `$router` 跳转到后台管理系统主页。