能帮我写一个由Element实现的登录注册前端页面吗
时间: 2023-06-15 07:04:45 浏览: 71
当然可以,以下是一个简单的登录注册页面示例:
```html
<template>
<div class="login">
<el-card class="login-card" shadow="hover">
<h3 slot="header">登录</h3>
<el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin">登录</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="register-card" shadow="hover">
<h3 slot="header">注册</h3>
<el-form :model="registerForm" ref="registerForm" :rules="registerRules" label-width="80px" class="register-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleRegister">注册</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
registerRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' }]
}
}
},
methods: {
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 发送登录请求
console.log('登录成功')
}
})
},
handleRegister() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 发送注册请求
console.log('注册成功')
}
})
}
}
}
</script>
```
在这个示例中,我们使用 Element 的 `el-card`、`el-form`、`el-form-item`、`el-input` 和 `el-button` 组件实现了一个登录注册页面。其中,`el-card` 组件用于包裹登录和注册表单,`el-form` 组件用于创建表单,`el-form-item` 组件用于创建表单项,`el-input` 组件用于创建输入框,`el-button` 组件用于创建按钮。
我们定义了两个表单对象 `loginForm` 和 `registerForm`,分别对应登录和注册表单。对于每个表单项,我们使用 `prop` 属性指定了它的字段名,以便在后端处理表单数据时能够正确地获取到数据。同时,我们使用 `rules` 属性定义了表单验证规则,以确保用户输入的数据符合要求。在点击登录或注册按钮时,我们通过 `this.$refs.form.validate` 方法触发表单验证,如果验证通过,则发送登录或注册请求。
以上示例只是一个简单的登录注册页面,具体的实现方式还需要根据实际需求进行调整。